HTML 的 ＜rt＞ 元素

1. 什么是 <rt> 元素

<rt>（Ruby Text，注音文本）元素用于为东亚文字（如中文、日文）提供注音或注释。它通常与 <ruby> 元素配合使用，将注音显示在基准文字的上方或右侧。

<ruby>
  漢 <rt>かん</rt>
  字 <rt>じ</rt>
</ruby>

浏览器渲染效果如下：

漢（かん）字（じ）

2. 基本语法与结构

<rt> 元素必须作为 <ruby> 元素的子元素使用，且通常紧跟在其所注释的基准文字之后。

<ruby>
  中文 <rt>zhōng wén</rt>
</ruby>

2.1 与 <rp> 元素配合

对于不支持 Ruby 注解的浏览器，可以使用 <rp>（Ruby Fallback Parenthesis）元素提供回退括号：

<ruby>
  中文 <rp>(</rp><rt>zhōng wén</rt><rp>)</rp>
</ruby>

在不支持 Ruby 的浏览器中，上述代码会显示为「中文 (zhōng wén)」。

3. 实际应用场景

3.1 日文注音（振假名）

<ruby>
  東京 <rt>とうきょう</rt>
</ruby>

3.2 中文拼音标注

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

3.3 生僻字注释

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

4. 样式定制

可以通过 CSS 自定义注音的字体大小、颜色和位置：

ruby {
  font-size: 1.2em;
}

rt {
  font-size: 0.5em;
  color: #666;
  font-weight: normal;
}

4.1 控制注音位置

使用 ruby-position 属性可以控制注音显示在上方还是右侧：

rt {
  ruby-position: over;   /* 上方（默认） */
}

/* 竖排文字时注音显示在右侧 */
rt {
  ruby-position: right;
}

5. 浏览器兼容性

<rt> 元素在现代浏览器中拥有良好的支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版浏览器，建议配合 <rp> 元素提供回退方案。

6. 总结

• <rt> 元素用于为 <ruby> 中的基准文字提供注音或注释。
• 常与 <rp> 元素配合，为不支持 Ruby 的浏览器提供回退显示。
• 可通过 CSS 灵活控制注音的样式与位置。
• 适用于中文拼音、日文振假名、生僻字注释等多种场景。