対応していないブラウザでも困らないような方法でルビを振ります。題材として平家物語の冒頭を使用しました。
祇園精舎 の鐘 の音 、諸行無常 の響 きあり。娑羅双樹 の花 の色 、盛者必衰 の理 を表 す。奢 れる者 も久 しからず。唯 春 の夜 の夢 の如 し。猛 き者 も遂 には滅 びぬ。偏 に風 の前 の塵 に同 じ。
解説は最初だけ行いますが、他の部分もやり方は同じです。また、実際には改行無しですが、 例ではわかりやすいように改行やインデントを行っています。
01 <ruby>
02 <rb>祇園精舎</rb>
03 <rp>(</rp>
04 <rt>ぎおんしょうじゃ</rt>
05 <rp>)</rp>
06 </ruby>
ルビを振る範囲の開始と終了です。
ルビを振る文字列です。この部分はルビベースと呼ばれます。
ルビを区別するための文字、または文字列です。当然2つ必要で、後述するルビ部分の前後に置かれます。 ルビタグを理解できるブラウザでは無視されます。
ルビそのものです。この部分はルビテキストと呼ばれます。デフォルトではルビベースよりも小さく表示され、位置はルビベースの上です。 縦書き表示の場合は、右側が標準位置です。 CSS3 module: Ruby によって位置や大きさなどを変えることが出来ます。