ruby-position

What the values mean

• over: above the base in horizontal text, to its right in vertical text. This is the initial value in Chrome, Edge and Safari.
• under: below in horizontal text, to the left in vertical text. Used in textbooks, for example, to put readings underneath.
• alternate: with two levels of ruby (a second level written with <rtc>), puts the first above and the second below. With a single level it is the same as over. It is the initial value in the spec, but only Firefox supports it.
• inter-character: even in horizontal text, sets the annotation vertically to the right of each base character. It exists for the Bopomofo (Zhuyin) annotations used in Taiwan, and acts like over in vertical text. Only Safari supports it (Chrome and Edge accept it only in -webkit-ruby-position).

How to write it

Ruby is written in HTML as <ruby>明日<rt>あした</rt></ruby>. ruby-position is inherited, so you can set it once on a paragraph or other outer element instead of on each ruby. The preview here sets it on the box, and the ruby inside picks it up.

Watch out

• If the line isn’t tall enough for the annotations, they can overlap the lines above or below or spill into the surrounding space. A generous line-height is safer.
• Up to Safari 18.1, you had to use the prefixed -webkit-ruby-position with its own values before / after.