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
の内容がはみ出る。