CSSによるルビ（振り仮名）表示方法

檜山氏が「檜山正幸のキマイラ飼育記」の2006年5月30日に ルビ（ふりがな）タグの話 をエントリしているのはルビタグにはIEでは想定通りの表示も Firefoxでは儘ならずしてクロスブラウザ問題の深く影を落とすらしく、 とW3Cの"Ruby Annotation"勧告では不必要に思われる <rp> タグを使用するのも其の為である旨、記述されているのですが、 それにしても説明の為の例文

いい話はなしだ。

は秀逸な登用ですので、一度ご覧いただければと思います。

此れを受け小飼弾氏が自ブログで利用している記事が2006年5月31日 css - ルビもCSSで で問題解決を提示しておられ、 其の解決法として採用されているのが北村曉氏のサイトで 曉に死す のブログ 徒書 でCSSのinline-table属性を用いたルビ表示の考案がなされている2001年10月11日付の記事 Mozillaでルビ表示3 での手法です。 尚、コード下のCSS適用表示例文は、北村氏の手になる2001年10月11日付の ルビのサンプル を利用させていただいています。

まずは単純ルビを書いてみる。「彼は悪行を恣《ほしいまま》にした」。CSS2のinline-tableを使うと、ルビテキストが右隣の本文にオーバーハングせずに中央揃えされ、よりルビらしい表示になった。 一方、複雑ルビではどうか。「 斎藤信男 さいとうのぶお W3C Associate Chairman さんはいい人だった」と書いてみるが、inline-tableを使った表示ではルビつきテキスト部分が上にずれた表示になってしまう。しかし「 斎藤信男 さいとうのぶお さんは真面目な人だ」と後側ルビがなければ結構まともに表示されている。各rbとrtも対応付けられているし。

inline-tableを使った表示の利点の一つは、画像がルビベースにあるときも画像が欠けずに表示されることだ。例えば「《あるきかたがただしくない》」のように。

小飼弾氏が上記を参考に2006年5月31日の記事の自ブログで利用しているのが

まずは単純ルビを書いてみる。「彼は悪行を恣《ほしいまま》にした」。CSS2のinline-tableを使うと、ルビテキストが右隣の本文にオーバーハングせずに中央揃えされ、よりルビらしい表示になった。 一方、複雑ルビではどうか。「 斎藤信男 さいとうのぶお W3C Associate Chairman さんはいい人だった」と書いてみるが、inline-tableを使った表示ではルビつきテキスト部分が上にずれた表示になってしまう。しかし「 斎藤信男 さいとうのぶお さんは真面目な人だ」と後側ルビがなければ結構まともに表示されている。各rbとrtも対応付けられているし。

inline-tableを使った表示の利点の一つは、画像がルビベースにあるときも画像が欠けずに表示されることだ。例えば「《あるきかたがただしくない》」のように。

で基本的には全体に text-align:center; を付加しているのが見て取れます。

また北村曉氏が多くの閲覧を被った上で ルビ表示はユーザスタイルシートで! に公開されたCSSが主にOperaへの対応と思われる調整が施された下記になります。 基本的に下記3点に関する修正が施されているとのことです。

1. 製作者スタイルを上書きできるよう !important を追加。
2. line-height を単位なしの数値で指定。
3. rbspan属性つきのrt要素をそれらしく表示するワザは通用しなくなったようなので削除。

まずは単純ルビを書いてみる。「彼は悪行を恣《ほしいまま》にした」。CSS2のinline-tableを使うと、ルビテキストが右隣の本文にオーバーハングせずに中央揃えされ、よりルビらしい表示になった。 一方、複雑ルビではどうか。「 斎藤信男 さいとうのぶお W3C Associate Chairman さんはいい人だった」と書いてみるが、inline-tableを使った表示ではルビつきテキスト部分が上にずれた表示になってしまう。しかし「 斎藤信男 さいとうのぶお さんは真面目な人だ」と後側ルビがなければ結構まともに表示されている。各rbとrtも対応付けられているし。

inline-tableを使った表示の利点の一つは、画像がルビベースにあるときも画像が欠けずに表示されることだ。例えば「《あるきかたがただしくない》」のように。

上記を小飼氏が参照し作成したCSSが2006年6月1日の記事 css - ルビの理想と現実 にて紹介される下記にて

まずは単純ルビを書いてみる。「彼は悪行を恣《ほしいまま》にした」。CSS2のinline-tableを使うと、ルビテキストが右隣の本文にオーバーハングせずに中央揃えされ、よりルビらしい表示になった。 一方、複雑ルビではどうか。「 斎藤信男 さいとうのぶお W3C Associate Chairman さんはいい人だった」と書いてみるが、inline-tableを使った表示ではルビつきテキスト部分が上にずれた表示になってしまう。しかし「 斎藤信男 さいとうのぶお さんは真面目な人だ」と後側ルビがなければ結構まともに表示されている。各rbとrtも対応付けられているし。

inline-tableを使った表示の利点の一つは、画像がルビベースにあるときも画像が欠けずに表示されることだ。例えば「《あるきかたがただしくない》」のように。

と、微調整に留めている様です。

扠、この一連のエントリの後、数年を経た2008年のこと、 FireFox3のリリースを受け、同ブラウザにてルビの表示の崩れるのを見た小飼氏が、 新たに修正を施した詳細が2008年7月15日付 CSS - ルビ再び なるエントリに記されるのは以下コードを引用すれば

まずは単純ルビを書いてみる。「彼は悪行を恣《ほしいまま》にした」。CSS2のinline-tableを使うと、ルビテキストが右隣の本文にオーバーハングせずに中央揃えされ、よりルビらしい表示になった。 一方、複雑ルビではどうか。「 斎藤信男 さいとうのぶお W3C Associate Chairman さんはいい人だった」と書いてみるが、inline-tableを使った表示ではルビつきテキスト部分が上にずれた表示になってしまう。しかし「 斎藤信男 さいとうのぶお さんは真面目な人だ」と後側ルビがなければ結構まともに表示されている。各rbとrtも対応付けられているし。

inline-tableを使った表示の利点の一つは、画像がルビベースにあるときも画像が欠けずに表示されることだ。例えば「《あるきかたがただしくない》」のように。

とされ、固より北村氏の作成ファイルの秀逸なれば、 粗全面的採用の上で、IE以外へのルビの適用について基本的事項を纏められるに

1. rubyタグ全体を、inline-tableとして扱う
2. rb、rt、rbc、rtcといった要素は、その中のcellとして扱う
3. rtおよびrtcは、小さく表示する。ここでは71%。これは面積比で半分、すなわち1/√2の近似値としている、
4. rpは非表示に
5. これをruby要素の外の文字と底が一致するよう配置する

とあり、上記赤字部分は5.の実装となり、 2.で言及されるに依って、前回の中途半端とも思える71%なる数値の事由が理解されます。

今となって此れ等を追い掛けさせていただくだけで自らのCSSについてのスキル補強となり、 檜山氏、小飼氏、北村氏の三氏には改めて感謝申し上げたいと思います。

北村氏も一連の記事の脈絡中で語られていますように、 Mozzlla系の表示上の問題に対応したCSS3普及迄の一時的対応ですので、 最後にIEでの表示例として上記のクロスブラウザ対策のなされていないプレーンなソースを下記に表示させ、 上の一連の表示とブラウザを取り替え乍の比較に供したいと思います。

まずは単純ルビを書いてみる。「彼は悪行を恣《ほしいまま》にした」。CSS2のinline-tableを使うと、ルビテキストが右隣の本文にオーバーハングせずに中央揃えされ、よりルビらしい表示になった。 一方、複雑ルビではどうか。「 斎藤信男 さいとうのぶお W3C Associate Chairman さんはいい人だった」と書いてみるが、inline-tableを使った表示ではルビつきテキスト部分が上にずれた表示になってしまう。しかし「 斎藤信男 さいとうのぶお さんは真面目な人だ」と後側ルビがなければ結構まともに表示されている。各rbとrtも対応付けられているし。

inline-tableを使った表示の利点の一つは、画像がルビベースにあるときも画像が欠けずに表示されることだ。例えば「《あるきかたがただしくない》」のように。