HTMLでルビを使う方法

HTMLでルビを使うには、以下のようにやるといいそうです。

<ruby>
  <rb>日本語<rb>
  <rt>にほんご<rt>
</ruby>

rubyタグで囲うのはルビを使いたい全範囲、元の文字はrb（ruby base）タグ、上付文字はrt（ruby text）タグで囲ってやります。ルビじたいに対応しているブラウザがそんなに多くないので（とは言ってもIE6が対応してるので、対応ブラウザのシェア的にはかなり多いけど）、非対応ブラウザでも読めるようにするにはちょっと手を加えないといけません。

<ruby>
  <rb>日本語<rb>
  <rp>（</rp><rt>にほんご<rt><rp>）</rp>
</ruby>

とrp（ruby parenthesis）タグを使うと非対応ブラウザでは「日本語（にほんご）」というように括弧を付けてくれます。ルビ対応ブラウザでは括弧部分は表示されなくなるので、両対応できるやさしい文書が書けます。下付文字とか複数のブロックにわたるルビ付けもできます。

<ruby xml:lang="ja">
  <rbc>
    <rb>丸</rb>
    <rb>井</rb>
    <rb>淳</rb>
    <rb>史</rb>
  </rbc>
  <rtc class="reading">
    <rt>まる</rt>
    <rt>い</rt>
    <rt>あつ</rt>
    <rt>し</rt>
  </rtc>
  <rtc class="annotation">
    <rt rbspan="4" xml:lang="en">Marui Souken Chairman</rt>
  </rtc>
</ruby>

どうやらこのルビ機能はXHTMLの追加モジュールみたいですね。Safariでも表示できるようになればいいなぁ。