<rt>

Overview

The <rt> element is an integral part of ruby annotations in HTML, marking the ruby text section. This section offers additional insights, often about pronunciation or inherent meaning, for the main text it accompanies. Typically used in the context of East Asian scripts, the <rt> element is always nested within the <ruby> element to provide enriched content understanding.

Examples and Usage

Ruby annotations are most commonly used for East Asian languages, though there are occasional instances of their use in other linguistic contexts to provide supplementary details. However, such applications remain less common.

For an illustrative example, consider the annotation of a widely recognized Kanji character:

<ruby>
水 <rt>Mizu</rt>
</ruby>

When rendered, the above HTML will display the character "水" with the Romaji "Mizu" directly above it. Here, "水" is a Kanji character that means "water" in English, and its representation in the Romaji system (used for the Romanization of the Japanese script) is "Mizu".

Building on this, let's examine a more complex annotation for the Japanese term for "today":

<ruby>
今日 <rp>(</rp><rt>Kyō</rt><rp>)</rp>
</ruby>

Here, the Kanji term "今日" translates to "today" in English. The <rt> element provides its Romaji "Kyō". In the rendered HTML, "今日" appears with "Kyō" positioned above it. However, in environments that don't fully support ruby annotations, the presentation shifts to "今日(Kyō)". The <rp> elements are incorporated to offer these fallback parentheses, improving clarity for users in such scenarios.

Attribute Breakdown

The <rt> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.

Accessibility Aspects

The <rt> element contributes to the readability of web content, notably for content in East Asian languages.

From an ARIA standpoint, the <rt> element does not map to a specific role, and naming is prohibited for it. Developers should avoid assigning any specific ARIA roles or attributes to the <rt> element. It's essential to use it semantically to ensure it aids screen readers in providing the right context.

Associated Elements

• <ruby>
• <rp>

Additional Notes

• The text-transform property in CSS has a value called full-size-kana that can be useful when working with ruby annotations. This value transforms characters to full-size Katakana, aiding in typography and design aspects, especially for Japanese content. However, browser support is limited to newer versions of Safari and Firefox at the time of writing.

• An interesting feature of the <rt> element is its flexibility with end tags. The end tag can be omitted if an <rt> element is directly followed by another <rt> or <rp> element, or if the parent element has no additional content.

• There's potential for broader linguistic applications, such as phonetic guides in multilingual documents or specialized annotations in academic contexts.

• Some elements related to ruby annotations, like <rb> and <rtc>, were once a part of the specification but are now deprecated. While they might still be encountered in older documents, developers are advised to stick to the current set of ruby elements for future-proofing their content.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: rt

The HTML Living Standard Specification: rt