<ruby>-注音符号

<ruby>标签在HTML中用于为东亚字符添加注音或解释性文本，通常显示在基字符的上方或右侧。它常与<rt>、<rp>标签配合使用，适用于中文、日文等文字的注音场景。

<ruby>标签的基本结构

<ruby>标签的典型结构包含基字符和注音两部分：

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

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

核心子标签解析

<rt>标签

定义注音或解释文本，默认显示在基字符上方：

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

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

<rp>标签

为不支持ruby的浏览器提供后备显示：

<ruby>
  漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>

在不支持的环境会显示为：漢(かん)

实际应用场景

中文拼音标注

<ruby>
  中 <rt>zhōng</rt>
  国 <rt>guó</rt>
</ruby>

效果：
<ruby>中 <rt>zhōng</rt> 国 <rt>guó</rt></ruby>

日文假名注音

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

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

多字组合注音

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

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

进阶样式控制

调整注音位置

通过CSS修改默认样式：

rt {
  font-size: 0.6em;
  padding: 0 0.2em;
  color: #e74c3c;
}

横向排列注音

ruby {
  ruby-position: under;
}
rt {
  display: block;
  text-align: center;
}

浏览器兼容方案

多标签嵌套方案

<ruby>
  <ruby>
    漢 <rt>かん</rt>
  </ruby>
  <rt>Kan</rt>
</ruby>

伪元素替代方案

.ruby-fallback {
  position: relative;
}
.ruby-fallback::after {
  content: attr(data-ruby);
  position: absolute;
  font-size: 50%;
  top: -1em;
  left: 0;
  right: 0;
  text-align: center;
}

动态生成示例

JavaScript动态生成ruby注音：

function addRuby(base, ruby) {
  const element = document.createElement('ruby');
  element.innerHTML = `${base}<rt>${ruby}</rt>`;
  return element;
}

document.body.appendChild(addRuby('喵', 'miāo'));

特殊字符处理

处理包含HTML特殊字符的情况：

<ruby>
  &lt; <rt>小于号</rt>
  &gt; <rt>大于号</rt>
</ruby>

响应式设计考虑

针对移动端调整注音大小：

@media (max-width: 768px) {
  rt {
    font-size: 0.5em;
  }
}

无障碍访问建议

添加ARIA属性提升可访问性：

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