<rt> Ruby text
The small reading or note in a ruby annotation.
<rt> holds the annotation part of a <ruby> element, usually the pronunciation of a character. In horizontal text, browsers draw it in a smaller font above the base text.
Place it inside ruby, right after the base text it belongs to. The closing tag is optional. Write it anyway, because the markup is easier to follow.
How each annotation pairs with the base text before it is spelled out in the rt element definition (opens in a new tab). Its parent is always a ruby element.
Syntax
<ruby>
Base<rt>annotation</rt>
</ruby>When to use it
Furigana over Japanese kanji in a reader for learners, pinyin over Chinese characters in a textbook, the reading of an odd place name in a travel article: that is what <rt> is for. Each rt annotates the base text right before it. So you can annotate character by character, or give one reading for a whole word, depending on how your readers look words up.
For ordinary footnotes or tooltips in English text, rt is the wrong tool. A short explanation in brackets does the job, and so does an abbr element for abbreviations or a real footnote link. Don't use it as a styling trick to put small text above a word either. Screen readers may read the annotation straight after the base text, and that sounds odd when it is not a reading or a gloss.
Keep annotations short. If one rt covers a whole word and its text is much longer than the base, browsers spread the base characters apart to match, and you get visible gaps.
Live example
Edit the code and watch the preview.
<p style="font-size:2em"><ruby>東<rt>to</rt>京<rt>kyo</rt></ruby></p>More examples
Pinyin over Chinese characters
Every Chinese character has its own <rt> holding the pinyin. The tone marks are written as numeric character references. With lang set, browsers and screen readers know the base text is Chinese.
<p lang="zh" style="font-size:2em">
<ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby>
</p>
<p>Ni hao means hello.</p>One reading for a whole word
Some Japanese words have a reading you can't split across their characters. The two characters for tomorrow share one <rt> here, and the hiragana sits centered over the whole word.
<p lang="ja" style="font-size:2em">
<ruby>明日<rt>あした</rt></ruby>
</p>
<p>The word for tomorrow, read ashita.</p>Tip: Put rt directly inside ruby, nowhere else.
Browser support
rt belongs to the HTML Living Standard and works in Chrome, Edge, Firefox, Safari and every other current browser. Very old browsers printed the annotation inline after the base text. That is why rp fallbacks exist. Styling with ruby-position is less consistent, and the ruby support table (opens in a new tab) has the details.
Accessibility
Screen readers may announce the rt text along with the base text. Keep annotations short and set lang on the ruby or a parent element; the W3C note Understanding Language of Parts (opens in a new tab) covers this.
Common mistakes
Wrong
<rt>kan</rt>Right
<ruby>漢<rt>kan</rt></ruby>rt is valid only as a child of ruby.
Frequently asked questions
Where does the rt element go?
An <rt> lives inside <ruby>, directly after the base text it annotates. You can annotate one character at a time, as in <ruby>東<rt>to</rt>京<rt>kyo</rt></ruby>, or place a single rt after a whole word. By default browsers render it as small text above horizontal lines.
Can the ruby text go below the characters instead?
Yes, with CSS. ruby-position decides where the annotation sits: over is the default in horizontal text and under moves it below. A few browsers also accept inter-character, used for bopomofo in traditional Chinese. The markup is identical in every position, so you can switch layouts later without touching the content. Can I use (opens in a new tab) tracks browser support for ruby layout.