旅行的記憶

這篇不是要講寫程式用的那個 Ruby 或者最近熱門看板在討論的 RoR 。

這篇要講的是一個XHTML標籤，剛好也叫 ruby 。

使用ruby的好處是可以對漢字（甚至非漢字！）加上標音（或者其他想加的阿薩布魯…）。

最熟悉的用法就是在漢字上加上振り仮名。

おお	さか
大	阪

以上是原本我用的笨方法，也就是用表格硬做，但是很累。
現在只要用一些簡單的標籤就可搞定。

首先是ruby的架構。
ruby和表格(table)的概念蠻像的，要用<ruby></ruby>當頭尾，裡頭視需要放標籤。

簡式ruby只要標明哪個是「底」(ruby base, rb)，哪個是「字」(ruby text, rt)就可以了。缺點是不支援ruby的瀏覽器會把兩個都秀出來。
含括號的簡式ruby則增加一個「括號」(ruby parenthesis, rp)，這樣不支援的瀏覽器只會把ruby text當成一般的括號註解。
rt可以利用CSS2的:before和:after以及content來做簡單設定，如下：
rt:before { content: "(" }
rt:after { content: ")" }

以下是簡式ruby範例：

<ruby>
    <rb>大阪</rb>
    <rp>(</rp>
    <rt>おおさか</rt>
    <rp>)</rp>
</ruby>

以下是簡式ruby結果：

大阪(おおさか)

繁式ruby則多了群組概念。可以對每個「底」以及每個「字」做群組設定，也可以一個「字」對應多個「底」。
「底」的群組用rbc(ruby base container)，「字」的群組用rtc(ruby text container)，但是一個「字」對應多個「底」是用屬性rbspan(ruby base span)。
要注意的是繁式ruby不能使用rp。

以下是繁式ruby範例：

<ruby>
   <rbc>
        <rb>大</rb>
        <rb>阪</rb>
    </rbc>
    <rtc>
        <rt>おお</rt>
       <rt>さか</rt>
    </rtc>
    <rtc>
       <rt rbspan="2">Ōsaka</rt>
    </rtc>
</ruby>

以下是繁式ruby的結果：

大阪おおさかŌsaka

關於ruby，在W3C的CSS3也有定義了，但是因為CSS3好像還不普遍支援，所以只把連結寫出來參考用。
W3C的CSS3 ruby定義請見http://www.w3.org/TR/css3-ruby/。
關於Firefox Add-on: XHTML Ruby Support，請見https://addons.mozilla.org/en-US/firefox/addon/1935。