Mariko Kosaka [X](https://twitter.com/kosamari)


Published: Feb 21, 2025

<br />

> [!TIP]
> **Celebration:** This web feature is now available in all three major browser engines, and becomes **Baseline Newly available** as of December 11, 2024.

The HTML [`<ruby>`](https://developer.mozilla.org/docs/Web/HTML/Element/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.

```html

<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

```
![English ruby annotation 'Emoji' over a Japanese text.](https://web.dev/static/blog/baseline-ruby-align/image/ruby.png) English pronunciation as an annotation over Japanese base text.

## `ruby-align`

<iframe src="https:///frame/blog/baseline-ruby-align/index_3b0233129cdb4e021ce1d9aa7e2377ffde82e6ca1955f2e0059e5646418d7af6.frame" class="framebox inherit-locale " allow="clipboard-write https://" allowfullscreen is-upgraded></iframe>

The [`ruby-align`](https://developer.mozilla.org/docs/Web/CSS/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.](https://web.dev/static/blog/baseline-ruby-align/image/ruby-align.png) Image showing use-case for ruby-align property.