松下響の天輪返しは架空の存在である松下 響(まつした ひびき)が自ら発信する無軌道かつノーフューチャーなブログです。

ルビタグの対応ブラウザを確認しますと、まずInternet Explorer 5以降、Google Chrome 4以降、Safari 5以降では、本文の上にルビを振る「単純ルビ」の表示に対応しています。
また、FirefoxでXHTMLルビサポートというアドオンを入れると、単純ルビのみならず、本文の上下にルビを付ける「複雑ルビ」まで表示することができるようになります。このアドオンはFirefox 0.8～Firefox 3.7に対応しており、Firefox 4用のものは現時点では発表されていません。

複雑ルビについては、現在のところ対応環境が狭いのと、そもそも使い道があまりないという理由から、無理して対応しなくてもそれほど問題は無いと言えます。
つまり現状での問題は、極端に古い、もしくは小数派のブラウザを除けば「XHTMLルビサポートが入っていないFirefox(特に4)」と「Opera」を使用してるユーザーにルビ組み状態で見せられないことです。

ではどうするか、ということで、ルビタグをCSSのinline-tableを使ってルビ状に成型し、幾つかのCSS hackも併せてどのブラウザでも同じように表示させるのがsim2ruby.css(シム・トゥ・ルビー・シーエスエス) = a cascading style sheet to simulate simple rubyというわけです。

そもそもルビというのは本文の上に小さな文字で表示されますので、そのままでは読みづらいという本質的問題を抱えています。
そこで、マウスカーソルでポイントするとルビを拡大、更にルビ適用範囲を点線で囲んで表示するという補助機能を付与してみました。これでいくらか読みやすくなったのではないでしょうか。
→実例表示(サンプル)

1. sim2ruby.cssをダウンロードして保存します。
2. 設置するページで最後のCSSとして読み込ませます。
3. ページ中に普通の書式でルビタグを記述します。
   <ruby><rb>本文</rb><rp>(</rp><rt>フリガナ</rt><rp>)</rp></ruby>
   ※HTML5ではrbタグが無かったことになっておりますが、これが無いとCSSで成型できませんので、従来通りrbタグを入れる必要があります。逆に言うと、既に上記の従来書式で内容を記述してある場合、ページの内容は全くいじらなくて済みます。

以上です。
普段から文中で振り仮名(ルビ)を多用するような方は、この際導入してみてはいかがでしょうか。

CSSが分かる人は、転送容量削減のために説明文を削ったり、或いは他のCSSファイルに必要な部分だけコピペして使ったり、拡大時の点線の色を変えたりして使いやすいようにカスタマイズすればよいと思います。

Windows

△Internet Explorer 6 (※ユーザビリティ向上機能無効)

○Internet Explorer 7

○Internet Explorer 8

○Internet Explorer 9

○Firefox 2.0

○Firefox 3.5

○Firefox 3.6

○Firefox 4.0

○Safari 3.2

○Safari 5.0

○Google Chrome 1.0

×Google Chrome 4.0 (※このver.でのみ文字が消えます)

○Google Chrome 10.0

○Opera 9.6

○Opera 11.1

Mac

○Firefox 2.0

○Firefox 3.6

○Firefox 4.0

○Safari 1.3

○Safari 5.0

Wii

○Opera 9.30

出来る限り表示誤差を吸収していますが、それでもブラウザによって上下1～2px程度の表示位置誤差があることが確認されています。

サイトのCSSで基本フォントにメイリオを使用するように指定していると、ブラウザによってルビつきテキスト部分が上方向に0.2em～0.8em程度ずれて表示されることがあります。
sim2ruby側でこのずれを補正しようとすると、今度はメイリオがインストールされていないユーザ環境でＭＳ Ｐゴシックなどの代理表示になった場合に逆に下方向にずれてしまうため、現在のところメイリオフォントを使用してなおかつルビ表示を全環境でそろえる方法はありません。
メイリオ以外のフォントを指定している場合は、気にする必要はありません。

現在以下のページでご紹介いただいております。

• ZON版電脳戦記 目録Ver 0.90 – まいんど-ぎあ
• [CSS]CSSでルビを表示する – mukakenの日記
• sim2ruby.css を使ってルビの表示を改善する – MOMENTS
• sim2ruby.css = a cascading style sheet to simulate simple ruby – blechmusik2の日記
• ルビCSS　version2.1（IE以外で表示可能） – Sky-Yard -Note-

初回発表時の記事は以下のものです。

• sim2ruby.css(a cascading style sheet to simulate simple ruby) – 銑鉄網

以上の話題とほぼ全く関係ないのですが、MicrosoftのIE9配布ページのブラウザ比較表、ひどくないですか? Firefoxって、ベース機能はシンプルにして必要なアドオンだけ入れて使えるのが売りなのに、ベース機能だけ比較して機能が足りないダメブラウザ扱いですよ。あまつさえ、そのベース機能でも本来あるはずの機能にチェックが入ってないという体たらく。ちょっとせこくないですかMicrosoftさん。