ルビ表示はユーザスタイルシートで!

なんだか最近になってMozillaでルビ表示3の記事(個別ページ)がブックマークされているなと思っていたのですが、404 Blog Not Found:css - ルビもCSSでで紹介されていたからのようでした。

それにしてもその紹介記事のブックマーク数が200以上ってすごいな。やはりウェブでは作った人よりも紹介した人の方が注目される、ということなのでしょうか。それはいいとしても、トラックバックで「プログラマーの小飼弾氏のアイデアと技術には……」と書かれているのを見てしまうと釈然としないものを感じてもいいでしょうか。(←誤った疑問文)

* * *

それはそれとして、404 Blog Not Foundではルビ表示用のスタイル定義をサイト用のCSSに組み込んでいますが、これはあまりよくありません。あのスタイル定義は(2001年当時のMozilla用に作った、)あくまで擬似的な表示を行うスタイルです。製作者スタイルシートとして用いると、自前でルビ表示スタイルを備えているブラウザ(現時点ではIE)で見た場合、スタイルが混ざって適用され、表示が崩れる可能性が高いです。「IEでもSafariでもFirefoxでもちゃんと見えます」と述べられていましたが、それは多分ルビが1つだけだったからでしょう。複数のルビを用いたページで確認したところ、以下のように崩れた表示になっていました。

ルビ用のスタイルを製作者スタイルシートとして用いたページをIEで閲覧した状態

Mozillaでルビ表示3の記事でも触れていましたが、ルビ用のスタイル定義は、ルビ表示を持たないブラウザにユーザスタイルシートとして適用することをお勧めします。

FirefoxだとuserContent.cssというのがありますが、書き換えたあとブラウザの再起動が必要だったりなど扱いがややこしいので、Stylishという拡張を用いてユーザスタイルシートを管理するのがよいかと思います(自分もそうしています)。使い方については以下のページが参考になります。

※ Stylishでルビ用スタイルを保存しようとするとなぜかエラーが出ます。CSS2としても妥当なのでそのまま使って特に問題は無いはずなのですが……。

または、ユーザスタイルを使う代わりに拡張機能(XHTML Ruby Support)を使うのもよいでしょう。

Operaだと、ユーザスタイルシートを使う方法は以下の通りのようです(バージョン8.54で確認)。

メニューから、ツール→設定→詳細設定→コンテンツ→スタイルオプションと辿る。
「ユーザスタイルシート」で保存したCSSファイルを選択。
「作成者モード」の「ユーザスタイルシート」をチェック。

Safariでも同様にユーザスタイルシートの設定があるようです。Macを使用していないので未確認ですが……。

* * *

最後に、改めて書き直してみたルビ用のユーザスタイルシートを載せておきます。Operaで見てもルビが消えないよう調整してみました。Firefox 1.5.0.3とOpera 8.54で表示を確認。

ruby {
  display:inline-table !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-indent:0 !important;
  margin:0 !important;
  vertical-align:text-bottom !important; /* modified 2009-12-03 */
  line-height:1 !important;
}

ruby>rb,ruby>rbc {
  display:table-row-group !important;
  line-height:1.2 !important;
}

ruby>rt,ruby>rbc+rtc {
  display:table-header-group !important;
  font-size:60% !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
}

ruby>rbc+rtc+rtc {
  display:table-footer-group !important;
  font-size:60% !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}

rbc>rb,rtc>rt {
  display:table-cell !important;
  letter-spacing:0 !important;
}

rp {
  display:none !important;
}

以前との変更点は以下の通り。

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

Operaでは、後側ルビ付きの複雑ルビが正しく表示できないのでご注意下さい。

ルビテキストの文字サイズは60%とかではなくpx固定でもよいかも。その辺りはお好みで調整して下さい(そのためのユーザスタイルシートです)。ちなみにブラウザ側で最小文字サイズを設定している場合は、CSSでどう頑張ってもそれ以上は小さくならないのでご注意を。

* * *

とまあ色々と書きましたが、これらの対処方法はあくまでCSS3 Ruby Moduleが正式勧告となり実装されるまでの一時的なものとご認識頂ければ幸いです。というか2003年から勧告候補のままということは、もしかして勧告の見込み無しだったりするのでしょうか。うーむ。

* * *

本記事については以下に関連記事があります。あわせてご参照ください。

ルビ表示はユーザスタイルシートで!

案内