rt要素

rt要素は、ruby要素の子要素として、または、ruby要素の子要素にrtc要素がある場合のその子要素としてルビテキストを表します。

ruby要素のコンテンツ・モデルは以下の順序の1つ以上で構成されます。


  1. 1つ以上のテキスト(フレージング・コンテンツ)またはrb要素
  2. rp要素の直前または直後のいずれかの、1つ以上のrt要素またはrtc要素
<ruby>漢字<rt>ふりがな</rt></ruby>

モノルビ

モノルビは、漢字とふりがなを個別に関連づけて記述する書式です。

例a)

<ruby><rt></rt></ruby><ruby><rt>ほん</rt></ruby><ruby><rt></rt></ruby><ruby><rt>はな</rt></ruby>します。

表示)

ほんはなします。

例b)例aは以下のようにもマークアップできます。語とrt要素(ふりがな)が連続する場合のruby要素の開始タグ、終了タグをまとめることができます。以下の例では、「日(に)」「本(ほん)」「語(ご)」のruby要素が1つにまとめられています。

<ruby><rt></rt><rt>ほん</rt><rt></rt></ruby><ruby><rt>はな</rt></ruby>します。

表示)

ほんはなします。

グループルビ

グループルビは、ふりがなを分割できない(2つの漢字にまたがるふりがななど)単語を記述する書式です。また、未対応のブラウザのレンダリングが「漢字 ふりがな」であるならば、例えば、「日本 にっぽん」となるほうが好ましいケースにもグループルビは有用です。同様のレンダリングを行うブラウザでは、モノルビを適用した場合は「日 に 本 っぽん」とレンダリングされます。

例a)

<ruby>今日<rt>きょう</rt></ruby>
<br>
<ruby>日本<rt>にっぽん</rt></ruby><ruby>昨今<rt>さっこん</rt></ruby>

表示)

今日きょう
日本にっぽん昨今さっこん

例b)グループルビの例aのふりがなに括弧を加えた書式です。括弧はrt要素でマークアップされたふりがなを囲い、開き、閉じともにrp要素でマークアップします。なお、ruby要素に対応しているブラウザでは括弧は表示されません。

<ruby>今日<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>
<br>
<ruby>日本<rp>(</rp><rt>にっぽん</rt><rp>)</rp></ruby>の<ruby>昨今<rp>(</rp><rt>さっこん</rt><rp>)</rp></ruby>

表示)Firefox 33.1.1の場合

今日(きょう)
日本(にっぽん)昨今(さっこん)

熟語ルビ

四字熟語など、漢字が2つ以上連続する場合はrb要素で漢字をそれぞれひらがなに対応するようまとめてマークアップし、続けてrt要素で漢字に対応するひらがなをマークアップします。

例)

<ruby>七<rb></rb><rb>八起</rb><rt>しち</rt><rt>てん</rt><rt>はっき</rt></ruby>
<br>
<ruby>山<rb></rb><rb></rb><rb></rb><rt>やま</rt><rt>だ</rt><rt>た</rt><rt>ろう</rt></ruby>

表示)ただし、rb要素はブラウザのレンダリングに差があります。rp要素で括弧を指定しておいたほうが良いかもしれません。Chrome 39.0の場合Firefox 33.1.1の場合

八起しちてんはっき
やまろう

ルビコンテナ

ひらがなや、ローマ字など2つのルビを配置する場合はrtc要素でそれぞれのルビを囲います。

例a)モノルビの場合。

<ruby>上<rb>手</rb><rtc><rt>じよう</rt><rt>ず</rt></rtc><rtc><rt>jou</rt><rt>zu</rt></rtc></ruby>

表示)

じようjouzu

例b)グループルビの場合。

<ruby>上手<rtc><rt>じようず</rt></rtc><rtc><rt>jouzu</rt></rtc></ruby>

表示)

上手じようずjouzu

例c)rtc要素は未対応のブラウザが多いので、rp要素で括弧をマークアップします。

<ruby>上手<rtc><rp>(</rp><rt>じようず</rt><rp>)</rp></rtc><rtc><rp>(</rp><rt>jouzu</rt><rp>)</rp></rtc></ruby>

表示)

上手(じようず)(jouzu)
カテゴリ
-
要素を使用することができる場所
ruby要素またはrtc要素の子要素として。
コンテンツ モデル(内容に含めることのできる要素)
フレージング・コンテンツ
コンテンツ属性
グローバル属性