ルビと行間

ルビありの文章を作っていて、ルビのある行とない行で行間がずれるのを防ぐにはどうしようかと考えていた。どうもInternet ExplorerとChrome共にrtの表示はCSSで制御できないみたい。それならと論理的な計算で行間を確保すればいけるかと思ったけれども、それもダメそう。アバウトにline-height: 2という結論は出たけれども……。

Demo: Sizing Ruby

rtのフォント・サイズは50%でline-heightプロパティーはnormalなので、その高さは0.5 * 1.25 = 0.625と計算できる。例えば親のフォント・サイズが16pxとすると16px * 0.625 = 10pxとなる。これが行間に収まれば良いので、line-height: 1.625あれば十分そうだが、フォントによっては1.85程度必要になる。アセンダラインとディセンダラインの影響なんだと思う。

これにブラウザー側の最小フォントサイズ設定の影響が加わる。Chromeでは9pxがデフォルトだったような気がするので、単純に50%と考えて計算はできないことになる。

結果ワークアラウンド的な対処にならざるを得なそう。僕の結論としてはline-height: 2くらいでそこそこ安定してルビが振れるということになった。徒労感しか残らない結論だ。

以下のような感じにできると、行ボックスから独立させられるので良さそうだけど、今のところ出来ない。

ruby {
  position: relative;
}

ruby rt {
  display: block;
  position: absolute;
  bottom: 100%;
}

逆に行間に合わせてルビのフォント・サイズを自動調整できるという形でも良さそうだけど、どっちにしろ出来ないことには変わりない。今のところはおとなしくline-height: 2くらいの、可能な限り小さな値を指定するしかなさそう。