rubyの処理

CSS

HTMLはスタイルシートによって柔軟な表現力を備えたが、残念ながら未だ不十分なところが多々ある。均等割付け然り、多段組然り。
中でも、日本語表現上欠くべからざるものでありながら対応の進まないものの一つがルビであろう。
IEは独自の先行実装としてrubyタグをサポートしているが、現状、他のブラウザでは機能しない。
そこで、CSSでなんとかそれっぽく処理してみる。


前提として、ルビを割り込ませるだけの行間を持っていなければならない。
div.main内の要素にline-heightを2em程度で設定、同じくpのmarginも同程度に調整する。
ルビは

<ruby><rb>ルビ対象文字列</rb><rt>ルビ内容文字列</rt></ruby>

という構成になっている。rubyはルビ全体を括る要素、rbの中身がルビを振られる部分、rtがルビ自体。本来ならルビ非対応ブラウザでの表示に配慮してrtの前後にrpで括弧などを付けるのだが、今回は対応ブラウザと同じように表示させるのが目的なので省略する。
rubyにposition: relativeを設定してポジショニングの基準とし、font-sizeを60％程度に取ったrtをposition:absolute; top:-1em;でルビ対象の上に移動。横方向はleft:0;で良い筈だがなぜか右にずれているようだったのでleft: -1.2emとしてある。この辺は研究の余地有り。
また、ルビが元サイズ1文字に対し2文字まで割り当てられない事を考慮に入れ、rbの文字間を少し開け気味にletter-spacing: 0.4emとし、不要なrpはdisplay: none;してある。


総合すると、以下のようになる。

ruby { position: relative; }
rt { font-size: 60%; 
position: absolute;
top: -1em;
left: -1.2em;
}
rb { letter-spacing: 0.4em; }
rp { display: none; }

例：巨大構造物メガストラクチャ
まだWInIEとOperaでは確認していないが、FireFoxとSafariでは問題なさそうだ。


Operaではrbとtrがくっつきすぎるきらいがあったので、rtのtopを-1.2emに変更。
IEは何故かruby自体の表示位置が大きくずれる。htnlの子要素として設定してIEにスタイルを読み込ませないようにしてみたが結果変わらず。ruby自体の処理がおかしいのか。要実験。