ruby 要素によるルビとスタイリング

ふと思い立って、ruby 要素を使った時のルビを CSS でスタイリングできないか調べてみたが、コレがなんとも発展途上な感じだった。

ruby 要素を使うと、rt 要素 (ふりがなの要素) の分だけ、その行の行間が広がる。このせいで、ルビがある行とない行とで行間が変わってしまう。この行間を揃えるには、手元で調べてみた感じ、line-height: 2.25 以上の値を指定しないといけなかった。多分これもフォントによると思うので、2.5 とかゆとりをもった数値にしておいた方が良いかも。しかしこれだと、かなり間延びした行間になってしまう。

次に、rt 要素に position: absolute とかを適用してフローティングさせれば位置をイジれるんじゃないか、と思って試してみたが、Chrome と IE は rt 要素の位置をイジれなかった。Firefox だけはこの指定が効くが、Firefox だけ対応してもイマイチだ。

そこで、rt 要素と同様の内容を ruby 要素に data-* 属性で持たせておき、ふりがなを ruby 要素の擬似要素として表示・配置する、という方法を見つけた。

これでパッと見は良い感じになるのだが、ベースの文字数よりもフリガナの文字数の方が多い場合、見た目がイマイチだった。かなり使い所を選ぶ感じ。

以上の諸々を試したデモページを置いておく。

ルビはまだまだまともに CSS でスタイリングできる感じではなさそうだ…。

あ、そうそう、HTML5 では rb 要素がなくなってるっぽい。イマイチ最新の仕様もハッキリ分からなくてつらみ。