ruby-align is Baseline Newly available

Mariko Kosaka
X

Published: Feb 21, 2025

The HTML <ruby> element lets you display phonetic annotations or other supplemental information above or beside base text. It is commonly used in East Asian languages.

A <ruby> element consists of two main parts, ruby base which is the main text and ruby text which is the annotation text, marked up with the <rt> element.


<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>
English ruby annotation 'Emoji' over a Japanese text.
English pronunciation as an annotation over Japanese base text.

ruby-align

The ruby-align CSS property controls the alignment of ruby base text and ruby annotation text. The property accepts one of the keyword values, space-around, space-between, start, and center.

Pīnyīn ruby annotation over a Chinese text.
Image showing use-case for ruby-align property.