<ruby>
Ruby annotations: small text above characters, most often the pronunciation of Chinese or Japanese characters.
- Display
- ruby
- Closing tag
- Required
- Permitted content
- Phrasing content plus
<rt>and<rp>elements
Example
#<p lang="zh" style="font-size: 2rem;">
<ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby>
</p>
<p>"Hello" in Chinese, with the pinyin pronunciation above the characters.</p>Definition and usage
#The <ruby> element lets you add short annotations to text, displayed above it (in horizontal text). It’s a notation style known from East Asian typography: in Japanese, the pronunciation of kanji characters is written above them in hiragana (called furigana), and in Chinese, the pronunciation is given in pinyin.
The structure is simple: inside <ruby> you put the base text, followed right after by <rt> with the annotation. You can give a separate <rt> to each character, or one to a whole word. The optional <rp> elements with parentheses take care of readability in programs that don’t support ruby.
Ruby annotations are useful outside Asian languages too. You can use them to add the pronunciation of a difficult word or the translation of a term, as long as the annotation is short.
Syntax
#<ruby>base text<rt>annotation</rt></ruby>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<p lang="de" style="font-size: 1.5rem;">
<ruby>Feld<rp> (</rp><rt lang="en">array</rt><rp>)</rp></ruby>
<ruby>Schleife<rp> (</rp><rt lang="en">loop</rt><rp>)</rp></ruby>
<ruby>Funktion<rp> (</rp><rt lang="en">function</rt><rp>)</rp></ruby>
</p>Default CSS
#Most browsers display this element with these default styles:
ruby {
display: ruby;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Surround every
<rt>with<rp>elements, so the text stays readable even without ruby support. - Mark the text’s language with the
langattribute, e.g.lang="ja"orlang="zh", so the browser picks the right typeface. - The
<rb>and<rtc>elements from older tutorials are deprecated.<ruby>,<rt>, and<rp>are enough.
Related entries
#- <rt>The annotation text in a ruby element: pronunciation or meaning displayed above the base text.
- <rp>Fallback parentheses around a ruby annotation, visible only where ruby isn’t supported.
- <abbr>An abbreviation or acronym, with an optional expansion in the title attribute.
- <bdi>Isolates a piece of text whose writing direction is unknown, e.g. a username written in Arabic.
Spotted a mistake or missing an example? Write to us.