[e] (0) New examples of <ruby>. Thanks to MikeSmith and heycam for th…

…e help. git-svn-id: http://svn.whatwg.org/webapps@2627 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Dec 30, 2008 · d36297b · d36297b
1 parent 9a2067b
commit d36297b
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 20 deletions.
diff --git a/images/sample-ruby-bopomofo.png b/images/sample-ruby-bopomofo.png
diff --git a/images/sample-ruby-ja.png b/images/sample-ruby-ja.png
diff --git a/images/sample-ruby-pinyin.png b/images/sample-ruby-pinyin.png
diff --git a/images/sample-ruby.png b/images/sample-ruby.png
diff --git a/index b/index
@@ -14061,19 +14061,62 @@ brighter. A &lt;b&gt;rat&lt;/b&gt; scurries past the corner wall.&lt;/p&gt;</pre
 
   <div class=example>
 
-   <p>In this example, each ideograph in the text <span lang=ja>&#25998;&#34276;&#20449;&#30007;</span> is annotated with
-   its reading.</p>
+   <!-- this is the kanji for the word "kanji" ("chinese character") in japanese -->
+   <!-- in japanese, ruby-like typography is called "furigana" -->
 
-   <pre lang=ja>... &lt;ruby&gt;
- &#25998; &lt;rt&gt; &#12373;&#12356; &lt;/rt&gt;
- &#34276; &lt;rt&gt; &#12392;&#12358; &lt;/rt&gt;
- &#20449; &lt;rt&gt; &#12398;&#12406; &lt;/rt&gt;
- &#30007; &lt;rt&gt; &#12362;         &lt;/rt&gt;
-&lt;/ruby&gt; ...</pre>
+   <p>In this example, each ideograph in the Japanese text <span lang=ja>&#28450;&#23383;</span> is annotated with its kanji
+   reading.</p>
+
+   <pre lang=ja>... 
+&lt;ruby&gt;
+ &#28450; &lt;rt&gt; &#12363;&#12435; &lt;/rt&gt;
+ &#23383; &lt;rt&gt; &#12376;&#12288; &lt;/rt&gt;
+&lt;/ruby&gt;
+...</pre>
+
+   <p>This might be rendered as:</p>
+
+   <p><img alt="The two main ideographs, each with its kanji annotation rendered in a smaller font above it." src=images/sample-ruby-ja.png></p>
+
+  </div>
+
+  <div class=example>
+
+   <!-- this is the bopomofo for the word "hanzi" ("chinese character") in traditional chinese, as used in taiwan -->
+
+   <p>In this example, each ideograph in the traditional Chinese text
+   <span lang=zh-TW>&#28450;&#23383;</span> is annotated with its
+   bopomofo reading.</p>
+
+   <pre class=zh-TW>&lt;ruby&gt;
+ &#28450; &lt;rt&gt; &#12559;&#12578;&#715; &lt;/rt&gt;
+ &#23383; &lt;rt&gt; &#12567;&#715;&#12288; &lt;/rt&gt;
+&lt;/ruby&gt;</pre>
+
+   <p>This might be rendered as:</p>
+
+   <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." src=images/sample-ruby-bopomofo.png></p>
+
+  </div>
+
+  <div class=example>
+
+   <!-- this is the pinyin for the word "hanzi" ("chinese character") in simplified chinese, as used in mainland china -->
+
+   <p>In this example, each ideograph in the simplified Chinese text
+   <span lang=zh-CN>&#27721;&#23383;</span> is annotated with its
+   pinyin reading.</p>
+
+   <pre class=zh-CN>...
+&lt;ruby&gt;
+ &#27721; &lt;rt&gt; h&agrave;n &lt;/rt&gt;
+ &#23383; &lt;rt&gt; z&igrave; &lt;/rt&gt;
+&lt;/ruby&gt;
+...</pre>
 
    <p>This might be rendered as:</p>
 
-   <p><img alt="The four main ideographs, each with its reading annotation rendered in a smaller font above it." src=images/sample-ruby.png></p>
+   <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font next to it." src=images/sample-ruby-pinyin.png></p>
 
   </div>
 

diff --git a/source b/source
@@ -15025,21 +15025,66 @@ brighter. A &lt;b>rat&lt;/b> scurries past the corner wall.&lt;/p></pre>
 
   <div class="example">
 
-   <p>In this example, each ideograph in the text <span
-   lang="ja">&#x658e;&#x85e4;&#x4fe1;&#x7537;</span> is annotated with
-   its reading.</p>
+   <!-- this is the kanji for the word "kanji" ("chinese character") in japanese -->
+   <!-- in japanese, ruby-like typography is called "furigana" -->
+
+   <p>In this example, each ideograph in the Japanese text <span
+   lang="ja">&#28450;&#23383;</span> is annotated with its kanji
+   reading.</p>
+
+   <pre lang="ja">... 
+&lt;ruby>
+ &#28450; &lt;rt> &#12363;&#12435; &lt;/rt>
+ &#23383; &lt;rt> &#12376;&#x3000; &lt;/rt>
+&lt;/ruby>
+...</pre>
 
-   <pre lang="ja">... &lt;ruby>
- &#x658e; &lt;rt> &#x3055;&#x3044; &lt;/rt>
- &#x85e4; &lt;rt> &#x3068;&#x3046; &lt;/rt>
- &#x4fe1; &lt;rt> &#x306e;&#x3076; &lt;/rt>
- &#x7537; &lt;rt> &#x304a;         &lt;/rt>
-&lt;/ruby> ...</pre>
+   <p>This might be rendered as:</p>
+
+   <p><img src="images/sample-ruby-ja.png"
+           alt="The two main ideographs, each with its kanji annotation rendered in a smaller font above it."></p>
+
+  </div>
+
+  <div class="example">
+
+   <!-- this is the bopomofo for the word "hanzi" ("chinese character") in traditional chinese, as used in taiwan -->
+
+   <p>In this example, each ideograph in the traditional Chinese text
+   <span lang="zh-TW">&#28450;&#23383;</span> is annotated with its
+   bopomofo reading.</p>
+
+   <pre class="zh-TW">&lt;ruby>
+ &#28450; &lt;rt> &#12559;&#12578;&#715; &lt;/rt>
+ &#23383; &lt;rt> &#12567;&#715;&#x3000; &lt;/rt>
+&lt;/ruby></pre>
+
+   <p>This might be rendered as:</p>
+
+   <p><img src="images/sample-ruby-bopomofo.png"
+           alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it."></p>
+
+  </div>
+
+  <div class="example">
+
+   <!-- this is the pinyin for the word "hanzi" ("chinese character") in simplified chinese, as used in mainland china -->
+
+   <p>In this example, each ideograph in the simplified Chinese text
+   <span lang="zh-CN">&#27721;&#23383;</span> is annotated with its
+   pinyin reading.</p>
+
+   <pre class="zh-CN">...
+&lt;ruby>
+ &#27721; &lt;rt> h&#224;n &lt;/rt>
+ &#23383; &lt;rt> z&#236; &lt;/rt>
+&lt;/ruby>
+...</pre>
 
    <p>This might be rendered as:</p>
 
-   <p><img src="images/sample-ruby.png"
-           alt="The four main ideographs, each with its reading annotation rendered in a smaller font above it."></p>
+   <p><img src="images/sample-ruby-pinyin.png"
+           alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font next to it."></p>
 
   </div>