注意

本記事は、sim2ruby.cssを紹介し、Qiitaでの知名度を上げることを目的としています。
自前で対応したい場合、筆者の投稿「CSSでruby要素に対応させる場合の、Firefoxと旧Opera用の最低限の記述」を参考にしてください。

追記

Opera 15以降、ruby要素に対応しています。
Firefox 38より、ruby要素に対応するかも知れません。
Firefox 38でルビ機能が有効化へ - Mozilla Flux

ruby要素の現状

XHTML 1.1から登場したruby要素は、文字にルビをふる機能をHTMLが提供したことにより、小説サイト等、フリガナを要するWebサイト製作者を喜ばせました。
現在はHTML5にも引き継がれ、殆どのブラウザが対応しています。
(Internet ExplorerはIE5の頃から対応していました。)

しかし、未だにFirefox~~とOpera~~で非対応です。
FirefoxはHTML Rubyというアドオンを導入しなくてはなりませんし、
~~Operaは…調べたらOperaにもHTML Rubyがありましたが、認知度は低いと思うのでOperaでは諦めている人も居るでしょう。~~

Opera 15以降、ruby要素に対応しています。

小説サイトなどではルビが使われます。
しかし、Firefox~~やOpera~~ユーザはルビを見れず、歯痒い思いをすることになってしまいます。
(rp要素が省略されていると、場合によっては文章を読むことさえ出来なくなります。)

閲覧者にそんな思いをさせないために、サイト製作者ができる事は無いでしょうか?

CSSでruby要素を有効にする

方法の1つとして、TAG indexのようにテーブルを使ってルビを再現する方法があります。¹
しかし、テーブルは表を示すものであり、それをルビ用のレイアウトに使うのは不適切です。²

sim2ruby.cssは、ルビの表示を再現するCSSです。
かなりのブラウザに対応しており、Google Chrome 4.0を除いて普通に利用できます。
Google Chrome 4.0のみ、どういうわけか文字が消えてしまうようですが、Google Chromeは自動アップデートされるので無視して問題ないでしょう。
(自動アップデートを無効化している一部のユーザを考慮するかの判断は任せます。)

sim2ruby.css利用時における、HTML5のruby要素との違い

※HTML5ではrbタグが無かったことになっておりますが、これが無いとCSSで成型できませんので、従来通りrbタグを入れる必要があります。逆に言うと、既に上記の従来書式で内容を記述してある場合、ページの内容は全くいじらなくて済みます。

HTML5ではrb要素の存在が無くなっていますが、sim2ruby.cssではこのrb要素が不可欠です。
HTML5として正しい構文にする場合、rb要素の代わりにspan要素を使うなどの工夫が必要でしょう。
ただし、rb要素でないと、FirefoxのHTML Ruby 6.22.3で滅茶苦茶になります。

備考:そもそもruby要素がダメ?

本記事のためにruby要素について調べていた所、興味深い記事を見つけたので記載します。

<ruby>関連要素って駄目駄目 - WebStudio

私はこの意見におおむね賛成ですが、
ruby要素がHTMLであるため、CSSが使えずともカッコつきでルビテキストが表示できる事から、
非対応時に**括弧付きの表示をする必要のあるルビ(フリガナ)**などはruby要素を使うべきと考えます。

逆に傍点のような、括弧付きで表示してはいけないモノはruby要素を使うべきではないでしょう。
(ちなみに、傍点についてはCSS3にて専用のプロパティtext-emphasisが存在します。殆ど普及していませんが…)

脚注