各ウェブブラウザでのルビの実装状況
このページでは、適切なルビ表示を実現するJavaScript・ruby_enabler2.js がオフになっています。つまり、あなたが現在お使いのウェブブラウザがルビをどのようにレンダリングするのかを確かめることができます。
ruby_enabler2.js が有効な場合のルビ表示がどのようになるかは →こちらのページでご確認ください。
各ウェブブラウザの最新版での対応状況を記載しています。
HTML5形式のグループルビ:新垣結衣 :熟語にひとまとめにルビ。
<ruby><rb>新垣結衣</rb><rt>あらがきゆい</rt></ruby>
※適切に表示 … Internet Explorer,Chrome,Safari,Opera,Firefox(38以降)
※上手く表示されない … Firefox(37以前)
※上手く表示されない … Firefox(37以前)
HTML5形式のモノルビ:佐 々 木 希 :文字ごとにルビ。
<ruby><rb>佐</rb><rt>さ</rt><rb>々</rb><rt>さ</rt><rb>木</rb><rt>き</rt><rb>希</rb><rt>のぞみ</rt></ruby>
※適切に表示 … Internet Explorer,Chrome,Safari,OperaFirefox(38以降)
※上手く表示されない … Firefox(37以前)
※上手く表示されない … Firefox(37以前)
XHTML1.1でのグループルビ:新垣結衣 :熟語にひとまとめにルビ。
<ruby><rb>新垣結衣</rb><rt>あらがきゆい</rt></ruby>
※適切に表示 … Internet Explorer,Chrome,Safari,Opera,Firefox(38以降)
※上手く表示されない … Firefox(37以前)
※上手く表示されない … Firefox(37以前)
XHTML1.1でのモノルビ:佐 々 木 希 :文字ごとにルビ。
<ruby><rbc><rb>佐</rb><rb>々</rb><rb>木</rb><rb>希</rb></rbc><rtc><rt>さ</rt><rt>さ</rt><rt>き</rt><rt>のぞみ</rt></rtc></ruby>
※適切に表示 …
※上手く表示されない … Internet Explorer,Chrome,Safari,Opera,Firefox
※上手く表示されない … Internet Explorer,Chrome,Safari,Opera,Firefox
「両面ルビ」は現在のところ、全滅です。
HTML5形式の両面ルビ:新垣結衣 :グループ + グループ。
<ruby><rb>新垣結衣</rb><rtc><rt>あらがきゆい</rt></rtc><rtc><rt>ガッキー</rt></ruby>
HTML5形式の両面ルビ:佐 々 木 希 :モノ + グループ。
<ruby><rb>佐</rb><rb>々</rb><rb>木</rb><rb>希</rb><rtc><rt>さ</rt><rt>さ</rt><rt>き</rt><rt>のぞみ</rt></rtc><rtc>のぞみん</rtc></ruby>
HTML5形式の両面ルビ:新 垣 結 衣 :モノルビ + モノルビ。
<ruby><rb>新</rb><rb>垣</rb><rb>結</rb><rb>衣</rb><rt>あら</rt><rt>がき</rt><rt>ゆ</rt><rt>い</rt><rtc><rt>ガ</rt><rt>ッ</rt><rt>キ</rt><rt>ー</rt></rtc></ruby>
XHTML1.1での両面ルビ:新垣結衣 :グループ + グループ。
<ruby><rbc><rb>新垣結衣</rb></rbc><rtc><rt>あらがきゆい</rt></rtc><rtc><rt>ガッキー</rt></rtc></ruby>
XHTML1.1での両面ルビ:佐 々 木 希 :モノルビ + モノルビ。
<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>
※適切に表示 …
※上手く表示されない … Internet Explorer,Chrome,Safari,Opera,Firefox
※上手く表示されない … Internet Explorer,Chrome,Safari,Opera,Firefox
ruby_enabler2.js を利用すれば、適切なルビ表示が行えます。こちらのページでご確認ください。