ruby要素

概要

ruby要素はルビ(ふりがな)を付けるためのインライン要素です。

現在、ruby要素を利用できるのはXHTML1.1だけです。(Modularization of XHTMLを利用して、自前のXHTMLを定義するのであれば話は別ですが。)

要素の内容

要素の内容は以下の3つのうちのどれかです。

属性

固有属性

この要素に固有の属性はありません。

汎用属性

id, class, title, langxml:lang), dir, style, xmlns(XHTML1.1のみ)

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

説明

ruby要素はルビ(ふりがな)を付けるためのインライン要素です。

単純ルビ

ここでは以下の要素を用います。

ruby
以下の要素を結びつけるための要素です。
rb
ベーステキスト、すなわちルビが付けられるテキストを表します。
rt
ルビテキスト、すなわちルビとなるテキストを表します。
rp
ルビに対応していないブラウザに括弧を提供するための要素です。

ベーステキストをrb要素、ルビテキストをrt要素としてマークアップし、両者をruby要素で結び付けます。

<ruby><rb>薔薇</rb><rt>ばら</rt></ruby>

ルビに対応したブラウザならば「薔薇」というテキストに「ばら」というルビが付きます。しかし、ルビに対応していないブラウザの場合は「薔薇ばら」と表示されてしまいます。そこで、ルビ要素に対応していないブラウザのためにrp要素で括弧を付け足します。

<ruby><rb>薔薇</rb><rp>(</rp><rt>ばら</rt><rp>)</rp></ruby>

これでルビに対応していないブラウザでは「薔薇(ばら)」と表示されます。ルビに対応したブラウザではrp要素の内容は表示されません。

なお、IE5以降はルビに対応していますが、Mozilla(Netscape)やOperaは今のところ対応していません。(CSSを利用することでルビを再現することならできます。参照: ルビのスタイル(2003年3月16日) - 徒書 -

複合ルビ

複合ルビでは以下のことが可能です。

  • 1つのベーステキストに2つのルビテキストを付ける。
  • ベーステキストの各部分とルビテキストの各部分を関連付ける。

ここではさらに2つの要素を用います。

rbc
rb要素をグループ化します。
rtc
rt要素をグループ化します。

複合ルビではベーステキストとルビテキストをそれぞれ分割できます。分割されたベーステキストとルビテキストは各々関連付けられます。次の例では「山田」と「やまだ」、「太郎」と「たろう」が関連付けられています。

<ruby>
  <rbc>
    <rb>山田</rb>
    <rb>太郎</rb>
  </rbc>
  <rtc>
    <rt>やまだ</rt>
    <rt>たろう</rt>
  </rtc>
</ruby>

この例では「山田」に「やまだ」、「太郎」に「たろう」というルビが付きます。

複数のルビテキストを付ける場合は次のようになります。rb要素とrt要素の数が異なる場合は、rt要素のrbspan属性で対応するrb要素の数を指定します。

<ruby>
  <rbc>
    <rb>山田</rb>
    <rb>太郎</rb>
  </rbc>
  <rtc>
    <rt>やまだ</rt>
    <rt>たろう</rt>
  </rtc>
  <rtc>
    <rt rbspan="2">Taro Yamada</rt>
  </rtc>
</ruby>

この例では、「山田」の上に「やまだ」、「太郎」の上に「たろう」、そして「山田太郎」全体の下に「Taro Yamada」というルビが付きます。

現在、IEも複合ルビには対応していません。MozillaとOperaも対応していませんが、CSSで複合ルビを表示させることはできます。

関連要素

参考文献