W3C Ruby 標注文字的注音、假名

前幾天我在每天固定活動的某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>

夏(なつ)の向日葵(ひまわり)

<p style="font-family:標楷體;">
  <ruby><rb>囧</rb><rt>ㄐㄩㄥˇ</rt></ruby>，大明也。<br/>
  江淹：「<ruby><rb>囧</rb><rt>ㄐㄩㄥˇ</rt></ruby><ruby><rb>囧</rb><rt>ㄐㄩㄥˇ</rt></ruby>秋月明，
  憑軒<ruby><rb>絰</rb><rt>ㄉㄧㄝˊ</rt></ruby><ruby><rb>麑</rb><rt>ㄋㄧˊ</rt></ruby>老。」
</p>
<p>
  <ruby><rb>夏</rb><rt>なつ</rt></ruby>の<ruby><rb>向日葵</rb><rt>ひまわり</rt></ruby>
</p>
<h5>with &lt;rp&gt;</h5>
<p>
  <ruby><rb>夏</rb><rp>(</rp><rt>なつ</rt><rp>)</rp></ruby>の
  <ruby><rb>向日葵</rb><rp>(</rp><rt>ひまわり</rt><rp>)</rp></ruby>
</p>

Firefox加裝Ruby Support 後可顯示 W3C Ruby 標籤的效果

樂多舊網址: http://blog.roodo.com/rocksaying/archives/2912837.html

樂多舊回應

maniacchou@hotmail.com(maniac) (#comment-4276633)

Tue, 27 Mar 2007 14:50:03 +0800

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 }

未留名 (#comment-4277527)

Tue, 27 Mar 2007 17:37:45 +0800

嗯，用 CSS 模擬的方式，看來是對瀏覽器 CSS2 支援度的大考驗。

試了一下，以 Opera 9 觀看 CSS 模擬效果，雖然可以標注在上方，但效果不如預期。 rt 的注音內容跟一般內容同高，反而 rb 的本文內容處於下標位置。

未留名 (#comment-4356305)

Fri, 06 Apr 2007 20:53:05 +0800

這就是 inline-table 的解釋不一樣的後果

像同一段 css 我在 mozilla 1.7 使用和到 seamonkey 1.0 上使用的結果就是有一個位置會跑掉...