文字の装飾

ruby-position

ruby-position は、ルビ（ふりがな）を親文字の上に付けるか、下に付けるかを指定します。HTML の <ruby> と <rt> で付けたルビに効きます。

構文

[ alternate || [ over | under ] ] | inter-character

明日あしたは東京とうきょう

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  ruby-position: under;
}

ruby-positionunder

overunderalternateinter-character

明日あしたは東京とうきょう

over：横書きでは親文字の上、縦書きでは右に付けます。Chrome・Edge・Safari ではこれが初期値です。
under：横書きでは下、縦書きでは左に付けます。教科書などで、読みを下に添えるときに使います。
alternate：ルビを 2 段付けたとき（<rtc> で 2 つ目の段を書いたとき）、1 段目を上、2 段目を下と交互に置きます。1 段だけなら over と同じです。仕様の初期値ですが、対応しているのは Firefox だけです。
inter-character：横書きでも、ルビを親文字 1 字ずつの右に縦に並べます。台湾で使う注音符号（ボポモフォ）のための値で、縦書きでは over と同じです。対応しているのは Safari だけです（Chrome・Edge は -webkit-ruby-position でだけ書けます）。

ルビは HTML で <ruby>明日<rt>あした</rt></ruby> のように書きます。ruby-position は 継承するので、ルビの要素に書かなくても、段落など外側の要素にまとめて書けます。このページのプレビューでも、箱に書いた値が中のルビに効いています。

ルビの分だけ行の高さが足りないと、上下の行や外側の余白に重なることがあります。行間（line-height）を広めにしておくと安全です。
Safari 18.1 までは、接頭辞の付いた -webkit-ruby-position に、独自の値 before / after を書く必要がありました。