<ruby>

<ruby> groups base text and small annotations, often pronunciations for East Asian characters. The annotation is text content, not an image or a tooltip.

Base characters and readings

Each <rt> supplies a reading for the preceding base character. <rp> supplies parentheses for renderers that do not support ruby layout.

<p lang="ja">
  <ruby
    >漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby
  >
</p>

ruby {
  font-size: 2rem;
}
rt {
  font-size: 0.7em;
}

Structure and language

Use base phrasing text followed by <rt> annotation text, optionally with <rp> fallback punctuation. Do not nest ruby inside ruby. Set lang to the actual language so reading tools and fonts have useful context.

CSS writing mode and ruby positioning affect where annotations appear. Presentation and assistive-technology handling can differ; test the reading experience you support instead of assuming every screen reader speaks only one version.

Adapt the example

Remove the CSS: the annotation structure remains. For a plain prose definition, use dfn and visible explanation instead. Ruby is appropriate when the annotation belongs alongside particular base text, not as a substitute for every explanatory note.

Sources and browser support

MDN: ruby describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.