<rt> - phonetic annotation to explain this sentence

The <rt> tag is an HTML tag used to provide pronunciation or explanations for <ruby> annotations, typically used in conjunction with the <rp> tag to ensure graceful degradation in browsers that do not support <ruby>. It is primarily used for phonetic annotations in East Asian scripts (such as Chinese and Japanese).

Basic Syntax of the <rt> Tag

The <rt> tag must be nested within a <ruby> tag. The syntax is as follows:

<ruby>
  Base Text <rt>Annotation</rt>
</ruby>

If the browser does not support <ruby>, the content of <rt> will be displayed as text in parentheses after the base text. Modern mainstream browsers now support this tag.

Typical Use Cases for the <rt> Tag

Pinyin Annotation for Chinese Characters

The most common usage is to annotate Chinese characters with Pinyin:

<ruby>
  汉 <rt>hàn</rt>
  字 <rt>zì</rt>
</ruby>

Rendered effect:
汉(hàn) 字(zì)

Japanese Kana Annotation

Used in Japanese to annotate pronunciation with Kana:

<ruby>
  日本語 <rt>にほんご</rt>
</ruby>

Explanation of Rare Characters

Providing explanations for rare or complex characters:

<ruby>
  魑 <rt>chī</rt>
  魅 <rt>mèi</rt>
  魍 <rt>wǎng</rt>
  魉 <rt>liǎng</rt>
</ruby>

Compatibility with <rp> Tag

The <rp> tag defines parentheses to display when the browser does not support <ruby>:

<ruby>
  汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>
  字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>

In browsers that do not support <ruby>, this will display as: 汉(hàn) 字(zì)

CSS Styling Control

You can customize the display style of <rt> using CSS:

<style>
  rt {
    font-size: 0.6em;
    color: #666;
  }
  ruby {
    ruby-position: under;
  }
</style>

<ruby>
  北京 <rt>Běijīng</rt>
</ruby>

Considerations in Practical Development

1. Font Size: The content of <rt> should generally be smaller than the base text; relative units (em) are recommended.
2. Vertical Alignment: Adjust positioning using vertical-align.
3. Multilingual Support: Ensure the font includes the required character sets.
4. Accessibility: Screen readers will read the base text but not the <rt> content.

Complex Example: Multi-Line Annotations

<ruby style="ruby-position: over">
  <ruby>
    漢 <rt>かん</rt>
    字 <rt>じ</rt>
  </ruby>
  <rt>Kanji</rt>
</ruby>

This example shows Japanese Kanji with Kana annotations above and an English explanation below.

Combining with Other HTML Elements

The <rt> tag can be combined with most inline elements:

<ruby>
  <span style="color:red">红</span>
  <rt><mark>hóng</mark></rt>
</ruby>

Browser Compatibility History

Early versions of IE required specific syntax:

<!-- Syntax for IE5-8 compatibility -->
<ruby>
  漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

Modern browsers now uniformly support the standard syntax. According to CanIUse data, over 98% of browsers globally support the <rt> tag.