C-0070 Netscape 6/Mozilla でルビを表示する

XHTML 1.1 では、 ruby モジュールが組み込まれたことにより正式にルビ（文字にふりがなをふる機能）が使えるようになりました。しかし実際には、 IE5 が単純ルビに対応している程度だったりして、いまいち役に立ちません。

N6/Moz もルビ非対応のブラウザの一つですが、こいつはユーザースタイルシートが使えるので、以下のような記述を userContent.css に書き加えれば、擬似的にルビを表示できるようになります。

/* 色は親要素を継承 */
ruby, ruby * {
    color: inherit;
    background: transparent;
}
/* 行間を広げる */
ruby {
    position: relative;
    line-height: 2.2;
}
/* rt(ruby text) を上に配置 */
ruby>rt,
rtc {
    position: absolute;
    left: 0;
    top: -1.1em;
    font: 60%/1 sans-serif;
    text-indent: 0;
}
/* 二つ目の ruby text container を下に配置 */
rtc+rtc {
    top: 1.6em;
}
/* 括弧を非表示にする */
rp {
    display:none;
}

完全ではありませんが、これでもそれなりに表示できます。興味のある方は一度試してみてください。

<ruby>
  <rb>喧々囂々</rb>
  <rp>（</rp>
  <rt>けんけんごうごう</rt>
  <rp>）</rp>
</ruby>

<ruby>
  <rbc>
    <rb>喧</rb>
    <rb>々</rb>
    <rb>囂</rb>
    <rb>々</rb>
  </rbc>
  <rtc class="reading">
    <rt>けん</rt>
    <rt>けん</rt>
    <rt>ごう</rt>
    <rt>ごう</rt>
  </rtc>
  <rtc class="english" xml:lang="en">
    <rt rbspan="4">clamourous</rt>
  </rtc>
</ruby>

※ この Tips は 徒書(2001/8/19) Netscape6/Mozilla でルビ表示 及び Ancient Library 日記(2001/8/24) ルビ用スタイル @ Latest topics を参考にさせていただきました。

PageTop

Back