ruby

The HTML <ruby> element adds a pronunciation or reading annotation to text. It is especially useful for Japanese furigana and other East Asian typography.

What you will learn

The basic structure using ruby and rt
How rp provides fallback punctuation in older environments
How to use a reading as helpful supplemental information

Basic example

<ruby>
  漢字<rt>かんじ</rt>
</ruby>

The base text is written inside ruby, and rt contains the pronunciation or annotation displayed beside or above it.

Fallback with rp

<ruby>
  漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp>
</ruby>

rp supplies fallback parentheses when a browser does not render ruby annotations in the expected way. Modern browsers usually hide the rp content when ruby layout is supported.

Annotate the right text

Keep the annotation close to the characters it explains. For a phrase, place the whole phrase and its reading in one ruby structure when the reading belongs to the phrase as a unit. Do not use ruby only to create a small decorative label.

Accessibility notes

Ruby is supplemental information, not a replacement for the base text. Make sure the base text remains meaningful, and check the result at different zoom levels and with assistive technologies. Do not assume every environment presents annotations identically.

Common mistakes

Putting rt outside ruby.
Using a pronunciation as a substitute for the original text.
Writing a long explanation in rt when a normal sentence would be clearer.
Forgetting that a complex annotation may need careful testing across browsers and devices.