<rt>
The annotation text in a ruby element: pronunciation or meaning displayed above the base text.
- Display
- ruby-text
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p lang="zh" style="font-size: 2rem;">
<ruby>学<rt>xué</rt>习<rt>xí</rt></ruby>
</p>
<p>Chinese for "to learn." Each character has its own annotation here.</p>Definition and usage
#The <rt> element (from ruby text) holds the annotation’s content inside a <ruby> element, most often its pronunciation. The browser displays it in a smaller font above the base text, and next to it in vertical text.
Each <rt> refers to the base text that comes before it: from the start of <ruby> or from the previous <rt>. So you can give an annotation to each character separately, or one to a whole word. Separate annotations let the browser break the line between characters.
<rt> can only appear inside <ruby>. The closing tag can technically be omitted if it’s immediately followed by another <rt>, an <rp>, or the end of the <ruby> element, but it’s more readable to write it.
Syntax
#<ruby>字<rt>zì</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="ja" style="font-size: 2rem;">
<ruby>東京<rt>とうきょう</rt></ruby>
</p>
<p>Tokyo in Japanese, with the pronunciation written in hiragana above the whole word.</p>Default CSS
#Most browsers display this element with these default styles:
rt {
display: ruby-text;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Annotations should be short: a pronunciation or a single word of translation.
- Only place
<rt>inside<ruby>. - You can change the annotation’s size and color in CSS, e.g.
rt { font-size: 0.6em; color: gray; }.
Related entries
#Spotted a mistake or missing an example? Write to us.