<rt>-注音解释

<rt> 标签是 HTML 中用于为 <ruby> 注解提供发音或解释的文本内容。它通常与 <rp> 结合使用，确保在不支持 <ruby> 的浏览器中也能优雅降级。以下是关于 <rt> 的详细解析和实际应用场景。

<rt> 的基本语法

<rt> 必须嵌套在 <ruby> 标签内，用于标注上方字符的发音或解释。基本结构如下：

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

渲染效果为：
<ruby>漢 <rt>hàn</rt> 字 <rt>zì</rt></ruby>

与 <rp> 的配合使用

当浏览器不支持 <ruby> 时，<rp> 提供后备显示方案。例如：

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

在不支持的浏览器中会显示为：漢 (hàn) 字 (zì)

实际应用示例

日文注音

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

效果：<ruby>東京 <rt>とうきょう</rt></ruby>

多语言混合场景

<ruby>
  HTML<rt>HyperText Markup Language</rt>
</ruby>

效果：<ruby>HTML<rt>HyperText Markup Language</rt></ruby>

CSS 样式控制

通过 CSS 可以调整 <rt> 的显示样式。例如缩小字体并右对齐：

<style>
  rt {
    font-size: 0.6em;
    text-align: right;
  }
</style>
<ruby>
  漢 <rt>hàn</rt>
</ruby>

动态生成注音内容

用 JavaScript 动态添加注音：

<script>
  document.querySelector('ruby').innerHTML = 
    '漢 <rt>hàn</rt>';
</script>

特殊场景处理

纵向排版支持

通过 CSS 的 writing-mode 实现竖排注音：

<div style="writing-mode: vertical-rl">
  <ruby>
    漢 <rt>hàn</rt>
  </ruby>
</div>

长文本注音折行

使用 white-space: normal 解决长注音换行问题：

<style>
  rt { white-space: normal }
</style>
<ruby>
  超長注音測試 <rt>This is an extremely long phonetic annotation</rt>
</ruby>

浏览器兼容性注意事项

虽然现代浏览器普遍支持 <rt>，但需要注意：

• IE9+ 和 Edge 需要指定 display: ruby-text
• 某些移动端浏览器可能需要前缀：

rt {
  -webkit-ruby-position: after;
}

扩展应用：注音标注系统

结合数据库实现动态注音系统：

// 假设从API获取注音数据
fetch('/api/phonetics?text=漢字')
  .then(res => res.json())
  .then(data => {
    document.getElementById('ruby-container').innerHTML = 
      `<ruby>${data.text} <rt>${data.phonetic}</rt></ruby>`;
  });

可访问性优化

为屏幕阅读器添加 ARIA 属性：

<ruby aria-label="漢字拼音标注">
  漢 <rt>hàn</rt>
</ruby>