目的
HTML上でrubyタグを使ってルビ（フリガナ）を振ると、ルビのある行にルビテキスト分のline-heightが確保され、ルビのない行と比べて行間が不揃いになる。
これに対処するには本体テキストのline-heightを大きくし、ルビが入っても影響しないレベルまで行間を広げる。それは正しい対応であるが、デザイン的にはそれなりに制約となるのでどうにかしたい。
以下、あくまで実験です
方針
本文テキストについてline-heightに対するテキストの表示位置を下げ、各行の互いの干渉を減らす。ルビの親文字列（rbタグ）およびルビ文字列（rtタグ）についてline-heightをゼロにする。現時点では、ルビ関連の要素に対して設定可能なプロパティは限定的であるため、displayプロパティを上書きする。rubyタグ部分をFlexコンテナとし、rbタグ部、rtタグ部をFlex子要素にして表示位置を再定義する。
それでそれなりの結果は出せるが、今回は
- ルビを含む行の高さを、通常の行と揃える。
- ルビの表示高さを調整。
ルビを含む行の高さを下げる
rubyタグのCSS
ruby{
padding-top: 1em;
}
説明できないが、これでルビのある部分の行間が他と同じになる。
ルビ文字列の位置を調整
rtタグのCSS
rt{
transform: translateY(.8em);
}
ルビが上の行に重なってしまったので、好みの位置まで下げる。
Firefoxへの対応
Firefoxでは rt要素が transformで動かせない（ display: block ではなく ruby-text で定義されてて色々特殊っぽい）のでルビ文字列を spanで括りそれを移動させる。ほかに今のところ思いつかない。