rt要素
rt要素は、ruby要素の子要素として、または、ruby要素の子要素にrtc要素がある場合のその子要素としてルビテキストを表します。
ruby要素のコンテンツ・モデルは以下の順序の1つ以上で構成されます。
- 1つ以上のテキスト(フレージング・コンテンツ)またはrb要素。
- 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>
日本の昨今
熟語ルビ
四字熟語など、漢字が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>
表示)
例b)グループルビの場合。
<ruby>上手<rtc><rt>じようず</rt></rtc><rtc><rt>jouzu</rt></rtc></ruby>
表示)
例c)rtc要素は未対応のブラウザが多いので、rp要素で括弧をマークアップします。
<ruby>上手<rtc><rp>(</rp><rt>じようず</rt><rp>)</rp></rtc><rtc><rp>(</rp><rt>jouzu</rt><rp>)</rp></rtc></ruby>
表示)