[html5] r2627 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Mon Dec 29 20:34:08 PST 2008
Author: ianh
Date: 2008-12-29 20:34:07 -0800 (Mon, 29 Dec 2008)
New Revision: 2627
Added:
images/sample-ruby-bopomofo.png
images/sample-ruby-ja.png
images/sample-ruby-pinyin.png
Removed:
images/sample-ruby.png
Modified:
index
source
Log:
[e] (0) New examples of <ruby>. Thanks to MikeSmith and heycam for the help.
Added: images/sample-ruby-bopomofo.png
===================================================================
(Binary files differ)
Property changes on: images/sample-ruby-bopomofo.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: images/sample-ruby-ja.png
===================================================================
(Binary files differ)
Property changes on: images/sample-ruby-ja.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: images/sample-ruby-pinyin.png
===================================================================
(Binary files differ)
Property changes on: images/sample-ruby-pinyin.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Deleted: images/sample-ruby.png
===================================================================
(Binary files differ)
Modified: index
===================================================================
--- index 2008-12-30 01:38:19 UTC (rev 2626)
+++ index 2008-12-30 04:34:07 UTC (rev 2627)
@@ -14061,23 +14061,66 @@
<div class=example>
- <p>In this example, each ideograph in the text <span lang=ja>斎藤信男</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>... <ruby>
- 斎 <rt> さい </rt>
- 藤 <rt> とう </rt>
- 信 <rt> のぶ </rt>
- 男 <rt> お </rt>
-</ruby> ...</pre>
+ <p>In this example, each ideograph in the Japanese text <span lang=ja>漢字</span> is annotated with its kanji
+ reading.</p>
+ <pre lang=ja>...
+<ruby>
+ 漢 <rt> かん </rt>
+ 字 <rt> じ </rt>
+</ruby>
+...</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 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>漢字</span> is annotated with its
+ bopomofo reading.</p>
+
+ <pre class=zh-TW><ruby>
+ 漢 <rt> ㄏㄢˋ </rt>
+ 字 <rt> ㄗˋ </rt>
+</ruby></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>汉字</span> is annotated with its
+ pinyin reading.</p>
+
+ <pre class=zh-CN>...
+<ruby>
+ 汉 <rt> hàn </rt>
+ 字 <rt> zì </rt>
+</ruby>
+...</pre>
+
+ <p>This might be rendered as:</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>
+
+
<h4 id=the-rt-element><span class=secno>4.6.23 </span>The <dfn><code>rt</code></dfn> element</h4>
<dl class=element><dt>Categories</dt>
Modified: source
===================================================================
--- source 2008-12-30 01:38:19 UTC (rev 2626)
+++ source 2008-12-30 04:34:07 UTC (rev 2627)
@@ -15025,25 +15025,70 @@
<div class="example">
- <p>In this example, each ideograph in the text <span
- lang="ja">斎藤信男</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">... <ruby>
- 斎 <rt> さい </rt>
- 藤 <rt> とう </rt>
- 信 <rt> のぶ </rt>
- 男 <rt> お </rt>
-</ruby> ...</pre>
+ <p>In this example, each ideograph in the Japanese text <span
+ lang="ja">漢字</span> is annotated with its kanji
+ reading.</p>
+ <pre lang="ja">...
+<ruby>
+ 漢 <rt> かん </rt>
+ 字 <rt> じ　 </rt>
+</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-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">漢字</span> is annotated with its
+ bopomofo reading.</p>
+
+ <pre class="zh-TW"><ruby>
+ 漢 <rt> ㄏㄢˋ </rt>
+ 字 <rt> ㄗˋ　 </rt>
+</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">汉字</span> is annotated with its
+ pinyin reading.</p>
+
+ <pre class="zh-CN">...
+<ruby>
+ 汉 <rt> hàn </rt>
+ 字 <rt> zì </rt>
+</ruby>
+...</pre>
+
+ <p>This might be rendered as:</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>
+
+
<h4>The <dfn><code>rt</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list