這篇不是要講寫程式用的那個 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

    全站熱搜

    repeat :D 發表在 痞客邦 留言(0) 人氣()