ruby_enabler2.js 動作見本

動作見本【HTML5形式のルビ】

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

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

HTML5では、明らかにそれと判断できる場合は rb,rt,rtc の終了タグを省略することができます。その他、場合によって省略可なタグもあります。詳細は HTML5 日本語訳を参照してみてください。

グループルビ：新垣結衣あらがきゆい：熟語にひとまとめにルビを振ります。

<ruby><rb>新垣結衣</rb><rt>あらがきゆい</rt></ruby>

rb,rtの終了タグは省略可：<ruby><rb>新垣結衣<rt>あらがきゆい</ruby>

rbは省略可：<ruby>新垣結衣<rt>あらがきゆい</ruby>

モノルビ：佐さ々さ木き希のぞみ：文字ごとにルビを振ります。

rb,rtの終了タグは省略可：<ruby><rb>佐<rt>さ<rb>々<rt>さ<rb>木<rt>き<rb>希<rt>のぞみ</ruby>

先頭のrbは省略可：<ruby>佐<rt>さ<rb>々<rt>さ<rb>木<rt>き<rb>希<rt>のぞみ</ruby>

HTML5では、両面ルビが定義されました。

両面ルビ：新垣結衣あらがきゆいガッキー：グループルビ + グループルビ。

<ruby><rb>新垣結衣</rb><rtc><rt>あらがきゆい</rt></rtc><rtc><rt>ガッキー</rt></ruby>

上の例の場合には、rbタグやひとつ目のrtcタグ、rtcタグ内のrtタグも省略可。　

両面ルビ：佐々木希ささきのぞみのぞみん：モノルビ + グループルビ。

こんな書き方も：

<ruby><rb>佐</rb><rb>々</rb><rb>木</rb><rb>希</rb><rt>さ</rt><rt>さ</rt><rt>き</rt><rt>のぞみ</rt><rtc>のぞみん</rtc></ruby>
<ruby><rb>佐<rt>さ<rb>々<rt>さ<rb>木<rt>き<rb>希<rt>のぞみ<rtc>のぞみん</ruby>

両面ルビ：新垣結衣あらがきゆいガッキー：モノルビ + モノルビ。

ここでも、明らかな終了タグは省略可：　

<ruby><rb>新<rb>垣<rb>結<rb>衣<rt>あら<rt>がき<rt>ゆ<rt>い<rtc><rt>ガ<rt>ッ<rt>キ<rt>ー</ruby>

こんな書き方も：

<ruby><rb>新<rt>あら<rb>垣<rt>がき<rb>結<rt>ゆ<rb>衣<rt>い<rtc><rt>ガ</rt><rt>ッ</rt><rt>キ</rt><rt>ー</rt></rtc></ruby>

HTML5 日本語訳に例は載っていないのですが、次のような両面ルビも適切にレンダリングします。

両面ルビ：佐々木希ささきのぞみのぞみん：グループルビ + モノルビ。

<ruby><rb>佐</rb><rb>々</rb><rb>木</rb><rb>希</rb><rtc><rt>ささきのぞみ</rt></rtc><rtc><rt>の</rt><rt>ぞ</rt><rt>み</rt><rt>ん</rt></rtc></ruby>

こんな書き方も：

★ 従来のXHTML1.1 / HTML4の書式も適切にレンダリングします。こちらで確認してみてください。