動作見本【XHTML 1.1 / HTML4 形式のルビ】

このページでは ruby_enabler2.js が動作しています。

あなたが制作したウェブページに ruby_enabler2.js を設置すれば、主要なウェブブラウザで以下のように適切なルビ表示を行えます。

XHTML 1.1 に沿った書き方の例

グループルビ:新垣結衣あらがきゆい:熟語にひとまとめにルビを振ります。
<ruby><rb>新垣結衣</rb><rt>あらがきゆい</rt></ruby>
モノルビ: のぞみ:文字ごとにルビを振ります。
<ruby><rbc><rb>佐</rb><rb>々</rb><rb>木</rb><rb>希</rb></rbc><rtc><rt>さ</rt><rt>さ</rt><rt>き</rt><rt>のぞみ</rt></rtc></ruby>
両面ルビ: 新垣結衣あらがきゆいガッキー:グループルビ + グループルビ。
<ruby><rbc><rb>新垣結衣</rb></rbc><rtc><rt>あらがきゆい</rt></rtc><rtc><rt>ガッキー</rt></rtc></ruby>
両面ルビ:のぞみ:モノルビ + モノルビ。
<ruby><rbc><rb>佐</rb><rb>々</rb><rb>木</rb><rb>希</rb></rbc><rtc><rt>さ</rt><rt>さ</rt><rt>き</rt><rt>のぞみ</rt></rtc><rtc><rt>の</rt><rt>ぞ</rt><rt>み</rt><rt>ん</rt></rtc></ruby>

★ XHTML1.1 で定められている「rb,rc要素に対するrbspanアトリビュート」は効きません。

★ 最新のHTML5最終勧告で定められた書式も適切にレンダリングします。こちらで確認してみてください。