HTML <rt> Tag
The <rt> tag in HTML is used to define the ruby text component of a ruby annotation. Ruby text provides a pronunciation guide for East Asian characters and is displayed above or to the right of the base text. This is especially helpful for learners or when dealing with less common characters. The <rt> tag is always used inside of the <ruby> element, along with the base text defined by <rb> or the base fallback by <rp>.
Syntax
<ruby>
<rb>base text</rb>
<rt>ruby text</rt>
</ruby>
Attributes
| Attribute | Value | Description |
|---|---|---|
The <rt> tag does not have any specific attributes. |
Example
<ruby>
<rb>ζ±δΊ¬</rb>
<rt>γ¨γγγγ</rt>
</ruby>
More Examples
Basic Ruby Text
This example demonstrates the simplest usage of <rt> to annotate a Japanese word with its pronunciation in hiragana.
<p>
<ruby>
<rb>ζΌ’ε</rb>
<rt>γγγ</rt>
</ruby>
is Japanese for Chinese characters.
</p>
Using with <rp> for Fallback
In browsers that don't support <ruby>, the <rp> tag can be used to provide fallback text, typically enclosed in parentheses, making the ruby text visible for those browsers that don't support it, which is rare now.
<p>
<ruby>
<rb>δ½ ε₯½</rb>
<rp>(</rp><rt>nΗ hΗo</rt><rp>)</rp>
</ruby>
is Chinese for hello.
</p>
Multiple <rt> elements for complex annotations
You can include multiple <rb> and <rt> elements to provide different annotations for different parts of the text, when base is splitted in multiple parts.
<p>
<ruby>
<rb>δΈ</rb><rt>ichi</rt><rb>ζ₯</rb><rt>nichi</rt>
</ruby>
means one day.
</p>
Styled Ruby Text
You can also apply CSS to style the <rt> element to better suit your design.
<style>
rt {
font-size: 0.8em;
color: blue;
}
</style>
<p>
<ruby>
<rb>δΈη</rb>
<rt>γγγ</rt>
</ruby>
means world.
</p>
Browser Support
The <rt> tag is supported by all modern browsers.
| Browser | Support |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
Notes and Tips
- The
<rt>tag must be placed directly inside the<ruby>element and following a<rb>or a<rp>element. - Always include
<rb>for the base text and consider<rp>for fallback support, even though most browsers support ruby text now. - Ruby text can significantly improve the readability of East Asian text for learners or those unfamiliar with certain characters.
- You can use CSS to style the appearance of the ruby text to better match the overall design of the page. For example: change the font size or color of the ruby text.
- Proper usage of the
<rt>tag ensures accessibility and enhances the user experience for the target audience. It's crucial for web applications dealing with Asian languages. - It is a best practice to use
langattribute in<html>element, and consider adding it also to<ruby>element to ensure proper text rendering in different environments.
“`html
…
δ½ ε₯½
