Operaにおけるルビ表示を見てルビの処理をUserJSからユーザスタイルシートへ移行するべく試行錯誤してみた。
芦塚さんの書かれたスタイルシートの問題はdisplay:table-caption;がやたら存在することだけ。table-header-groupやtable-footer-group、table-row-groupにしたらうまくいくよ……と書こうと思っていたのだけれど、うまくいかない。どうやらOperaはtable-footer-groupの処理に難があるようだ。ruby>rbc+rtc{display:table-footer-group} ruby>rbc+rtc+rtc{display:table-header-group}と順番を逆にすればきちんと処理されるとどこかで読み、試してみたら確かに正しく描画された。(この記述をどこで見たメモするのを忘れたのが悔やまれる。)これで妥協しようかとも思ったのだけれど、ふと思った。table-footer-groupを全く知らないわけではないのだから、table-captionと組み合わせると上手く描画されるのではないか、と。
結論を述べると、それでうまくいく。どのみちrbspan属性等は上手く処理できないのだから、文字が上と下に割り振られれば十分なわけで。出来上がったファイルはmy.operaにでも上げておきましたので、ユーザスタイルシートとしてご利用下さい。但し、Geckoユーザの方は北村さんの書いたスタイルの方が素直で良いかと思われます。
ruby > rtのdisplayプロパティはお好みで書き換える事が出来ます。各々の長所と短所は以下の通り。アップロードしたファイルは私の好みに基づいてtable-captionを採用してあります。
ruby要素の領域がきちんと確保され文字が重なることはない。rbの描画幅がrtのそれより細い場合、rtの内容がはみ出る。