sebgod/ruby_test.html

## ruby_test.html
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test Unicod and the ruby-Tag</title>
</head>

<body>
    <article>
        <header>
            <h1>HTML5 Overview</h1>
        </header>

        <section>
            <h2>Test of Unicode modifiers:</h2>
            <p>Enclosing circle:</p>
            <p>
                1&#160;&#x20DD; 2&#160;&#x20DD; 3&#160;&#x20DD; 4&#160;&#x20DD; 5&#160;&#x20DD;
                6&#160;&#x20DD; 7&#160;&#x20DD; 8&#160;&#x20DD; 9&#160;&#x20DD;
            </p>

            <h2><code>abbr</code> and <code>sup</code> elements</h2>
            <p>
                The most beautiful women are
                <span lang="fr">
                    <abbr>M<sup>lle</sup></abbr>Gwendoline</span>
                and
                <span lang="fr">
                    <abbr>M<sup>me</sup></abbr>Denise</span>.
            </p>

            <h2><code>time</code> element</h2>
            <p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
        </section>
        <section>
            <h2>Test of astral Unicode chars:</h2>
            <dl>
                <dt>mathematical script capital p:</dt>
                <dd>&#x1D4AB; vs &#8472; (Weierstrass-P)</dd>
                <dt>o with stroke: (scand.)</dt>
                <dd>U+00D8 Ø latin capital letter o with stroke (HTML: &#216; <code>Oslash</code>) and U+00F8 ø latin small letter o with stroke (HTML: &#248; <code>oslash</code>).</dd>
                <dt>empty set</dt>
                <dd>"∅,&#x2205;" (Unicode character U+2205)</dd>
                <dt>diameter symbol</dt>
                <dd>The diameter symbol (⌀) (Unicode character U+2300) is similar to the letter Ø, and in some typefaces it even uses the same glyph,
                    although in many others the glyphs are subtly distinguishable. The diameter symbol is used extensively in engineering drawings,
                    and it is also seen anywhere that abbreviating "diameter" is useful, such as on camera lenses.
                    For example, a lens with a diameter of 82 mm would be labeled ⌀ 82 mm.
                </dd>
            </dl>
        </section>
        <section>
            <h2>Test of the <code>ruby</code>-tag:</h2>
            <p>One <code>rt</code>-tag per sentence (spaces after pinyin words)</p>
            <dl>
                <dt>Using <code>\u200b</code> between Chinese words</dt>
                <dd>
                    <ul>
                        <li><ruby lang="zh-CN">我&#x200b;非常&#x200b;喜欢&#x200b;中国!<rt>Wǒ fēicháng xǐhuan zhōngguó!</rt></ruby></li>
                        <li><ruby lang="zh-CN">我非常喜欢德国!<rt>Wǒ fēicháng xǐhuan déguó!</rt></ruby></li>
                        <li><ruby lang="zh-CN">我&#x200b;非常&#x200b;喜欢&#x200b;德国!<rt>Wǒ fēicháng xǐhuan déguó!</rt></ruby></li>
                    </ul>
                </dd>

                <dt>No special characters, just prose Chinese</dt>
                <dd>
                    <ul>
                        <li><ruby lang="zh-CN">你好吗?<rt>nǐ hǎo ma?</rt></ruby></li>
                        <li><ruby lang="zh-CN">我很好呢!<rt>wǒ hěnhǎo ne!</rt></ruby></li>
                        <li><ruby lang="zh-CN">我非常喜欢中国!<rt>Wǒ fēicháng xǐhuan zhōngguó!</rt></ruby></li>
                    </ul>
                </dd>
            </dl>
        </section>
    </article>
</body>
</html>
	<!DOCTYPE html>

	<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Test Unicod and the ruby-Tag</title>
	</head>

	<body>
	<article>
	<header>
	<h1>HTML5 Overview</h1>
	</header>

	<section>
	<h2>Test of Unicode modifiers:</h2>
	<p>Enclosing circle:</p>
	<p>
	1 ⃝ 2 ⃝ 3 ⃝ 4 ⃝ 5 ⃝
	6 ⃝ 7 ⃝ 8 ⃝ 9 ⃝
	</p>

	<h2><code>abbr</code> and <code>sup</code> elements</h2>
	<p>
	The most beautiful women are
	<span lang="fr">
	<abbr>M<sup>lle</sup></abbr>Gwendoline</span>
	and
	<span lang="fr">
	<abbr>M<sup>me</sup></abbr>Denise</span>.
	</p>

	<h2><code>time</code> element</h2>
	<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
	</section>
	<section>
	<h2>Test of astral Unicode chars:</h2>
	<dl>
	<dt>mathematical script capital p:</dt>
	<dd>𝒫 vs ℘ (Weierstrass-P)</dd>
	<dt>o with stroke: (scand.)</dt>
	<dd>U+00D8 Ø latin capital letter o with stroke (HTML: Ø <code>Oslash</code>) and U+00F8 ø latin small letter o with stroke (HTML: ø <code>oslash</code>).</dd>
	<dt>empty set</dt>
	<dd>"∅,∅" (Unicode character U+2205)</dd>
	<dt>diameter symbol</dt>
	<dd>The diameter symbol (⌀) (Unicode character U+2300) is similar to the letter Ø, and in some typefaces it even uses the same glyph,
	although in many others the glyphs are subtly distinguishable. The diameter symbol is used extensively in engineering drawings,
	and it is also seen anywhere that abbreviating "diameter" is useful, such as on camera lenses.
	For example, a lens with a diameter of 82 mm would be labeled ⌀ 82 mm.
	</dd>
	</dl>
	</section>
	<section>
	<h2>Test of the <code>ruby</code>-tag:</h2>
	<p>One <code>rt</code>-tag per sentence (spaces after pinyin words)</p>
	<dl>
	<dt>Using <code>\u200b</code> between Chinese words</dt>
	<dd>
	<ul>
	<li><ruby lang="zh-CN">我非常喜欢中国!<rt>Wǒ fēicháng xǐhuan zhōngguó!</rt></ruby></li>
	<li><ruby lang="zh-CN">我非常喜欢德国!<rt>Wǒ fēicháng xǐhuan déguó!</rt></ruby></li>
	<li><ruby lang="zh-CN">我非常喜欢德国!<rt>Wǒ fēicháng xǐhuan déguó!</rt></ruby></li>
	</ul>
	</dd>

	<dt>No special characters, just prose Chinese</dt>
	<dd>
	<ul>
	<li><ruby lang="zh-CN">你好吗?<rt>nǐ hǎo ma?</rt></ruby></li>
	<li><ruby lang="zh-CN">我很好呢!<rt>wǒ hěnhǎo ne!</rt></ruby></li>
	<li><ruby lang="zh-CN">我非常喜欢中国!<rt>Wǒ fēicháng xǐhuan zhōngguó!</rt></ruby></li>
	</ul>
	</dd>
	</dl>
	</section>
	</article>
	</body>
	</html>