W3C Ruby 標注文字的注音、假名
w3c 中日韓文 cjk
前幾天我在每天固定活動的某ACG論壇中，看到有人問如何在文章的漢字上標注假名。某元老人士說可以用 HTML 中的 Ruby 標籤。這我以前沒用過，當下就去搜尋相關資訊。
Ruby 標籤屬於 W3C XHTML 1.1 規範項目，規範內容查閱《Ruby Annotation》。原本是 Micorsoft IE 5.5版加進的延伸功能，後來成為 W3C XHTML 1.1 規範項目之一，目前 IE 以外的瀏覽器仍未普遍支援此標籤。Firefox 的使用者可以安裝 ぴろ 氏提供的「XHTML Ruby Support」擴充套件。
Ruby 標籤語法
Ruby 標籤實際上由<ruby>, <rb>, <rt> 三個標籤元素構成，一般還會配合選用性的 <rp> 標籤。<ruby>標示文字區域；<rb>標示主要文字內容；<rt>標示旁注文字內容，即注音、假名等。<rp>則是不支援 Ruby 標籤之瀏覽器顯示的文字內容。
一個
<ruby>
<rb>文字</rb>
<rt>ㄨㄣˊㄗˋ</rt>
</ruby>
Ruby 使用範例
囧，大明也。
江淹：「囧囧秋月明，憑軒絰麑老。」
夏の向日葵
with <rp>
夏の向日葵
Posted by shirock at
樂多Roodo! │16:32
│
回應(3)
│
引用(0)
│
電腦技術
引用URL
http://cgi.blog.roodo.com/trackback/2912837
http://www.w3.org/People/mimasa/test/schemas/NOTE-ruby-implementation
在這裡頭有用 css inline-table 來模擬 ruby 的效果
個人覺得會比要求使用者裝 XHTML Ruby Support 來的方便
--
節錄該部分的內容
ruby { display: inline-table }
ruby * {
display: inline;
line-height: 1.2;
text-indent: 0;
text-align: center;
white-space: nowrap;
}
ruby > * {
display: table-row-group;
}
ruby > rt, ruby rtc {
display: table-header-group;
font-size: 60%;
}
ruby rtc + rtc { display: table-footer-group }
ruby rbc > *, ruby rtc > * { display: table-cell }
/* this only works when an rt spans across all rb */
ruby rtc > *[rbspan] { display: table-caption }
ruby rp { display: none }
嗯，用 CSS 模擬的方式，看來是對瀏覽器 CSS2 支援度的大考驗。
試了一下，以 Opera 9 觀看 CSS 模擬效果，雖然可以標注在上方，但效果不如預期。 rt 的注音內容跟一般內容同高，反而 rb 的本文內容處於下標位置。
這就是 inline-table 的解釋不一樣的後果
像同一段 css 我在 mozilla 1.7 使用和到 seamonkey 1.0 上使用的結果就是有一個位置會跑掉...
