注意
本記事は、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のようにテーブルを使ってルビを再現する方法があります。1
しかし、テーブルは表を示すものであり、それをルビ用のレイアウトに使うのは不適切です。2
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要素がHTMLであるため、CSSが使えずともカッコつきでルビテキストが表示できる事から、
非対応時に**括弧付きの表示をする必要のあるルビ(フリガナ)**などはruby要素を使うべきと考えます。
逆に傍点のような、括弧付きで表示してはいけないモノはruby要素を使うべきではないでしょう。
(ちなみに、傍点についてはCSS3にて専用のプロパティtext-emphasisが存在します。殆ど普及していませんが…)