Operaでルビをそれっぽく見せるユーザスタイルシート

Operaにおけるルビ表示を見てルビの処理をUserJSからユーザスタイルシートへ移行するべく試行錯誤してみた。

芦塚さんの書かれたスタイルシートの問題はdisplay:table-caption;がやたら存在することだけ。table-header-grouptable-footer-grouptable-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 > rtdisplayプロパティはお好みで書き換える事が出来ます。各々の長所と短所は以下の通り。アップロードしたファイルは私の好みに基づいてtable-captionを採用してあります。

display:table-header-group
ruby要素の領域がきちんと確保され文字が重なることはない。
ベースラインの位置がおかしくなる。
display:table-caption
rbの描画幅がrtのそれより細い場合、rtの内容がはみ出る。
ベースラインの位置にあまり違和感がない。

この文書の諸情報

この文書の永続的URI
http://kuruman.org/diary/2006/10/21/opera-ruby-css
公開日時
2006年10月21日 午後8時58分51秒
ヘルプ
フィードバックについて
RSS Feedによる更新情報
http://kuruman.org/note/index.xml
This document is licensed under a CC : by-nc. 2006, Kuruma; FOAF description.