ruby标签仅适用于东亚文字注音，对©、®等符号无效；应使用abbr+title实现语义化标注，既兼容无障碍又支持tooltip。
ruby 标签不能用来标注特殊符号（如 ©、®、™、→、★ 等），它只对东亚文字的注音/表记有效——浏览器的排版引擎会识别 rb + rt 结构并触发专用渲染逻辑，而该逻辑不适用于非字符类符号或拉丁字母组合。
ruby 渲染失败的典型表现：特殊符号+rt 无上标效果
常见错误写法：
<ruby>©<rt>copyright</rt></ruby>
<ruby>→<rt>right arrow</rt></ruby>
这类写法在所有主流浏览器中都会降级为普通内联流：符号和注音并排显示，rt 不缩放、不上标、不居中。原因很直接：
- 浏览器仅对 Unicode 中文、日文、韩文区块（如 U+4E00–U+9FFF、U+3040–U+309F、U+AC00–U+D7AF）及部分平假名/片假名/注音符号启用 ruby 排版引擎；
- 符号（U+00A9、U+2192 等）不在该白名单内，
rt被当作普通子节点忽略语义； - 即使加了
rb和rp，结构合法但语义不匹配，依然无效。
为什么不用 ruby 给符号加说明？语义与无障碍双失效
ruby 是 HTML5 中定义的语义化注音标签，其设计目标明确：
立即学习“前端免费学习笔记（深入）”；
- 为汉字提供拼音、日文提供假名、韩文提供谚文；
- 屏幕阅读器按“基字 → 注音”顺序朗读，形成可访问的语音对；
- 搜索引擎可识别注音意图，用于中文 SEO 或教育类内容增强。
把 ruby 用在 © 上，等于告诉辅助技术：“这个版权符号读作‘copyright’”——这既不符合语言习惯（© 本身是图形符号，不是文字），也破坏了语义一致性。实际测试中，NVDA、VoiceOver 都会跳过 rt，或直接读成“© copyright”，失去分层播报能力。
替代方案：用 abbr + title 更合理
对 ©、®、→ 等符号做解释性标注，应使用语义正确的 abbr：
<abbr title="copyright">©</abbr>
<abbr title="registered trademark">®</abbr>
优势包括：
- 所有浏览器原生支持，无需 CSS 也能 hover 显示 tooltip；
- 屏幕阅读器自动朗读
title内容（如 “©, copyright”）； - 无兼容性风险，连 IE6 都能 fallback；
- 可通过 CSS 控制 tooltip 样式（如
abbr[title]:hover::after自定义气泡）。
如果需要视觉上类似 ruby 的上标小字效果，可用纯 CSS 模拟：
<span class="symbol-note">©<span class="note">copyright</span></span>配合：
.symbol-note { position: relative; }
.symbol-note .note {
font-size: 0.7em;
position: absolute;
top: -1.2em;
left: 0;
white-space: nowrap;
}但注意：这种写法没有语义、不被屏幕阅读器识别为注释，仅适合纯视觉提示场景。
真正需要 ruby 的边界在哪？
只有当目标是「为一个可读的东亚字符提供发音/训读/表记」时，ruby 才生效。例如：
- 「臺」配「ㄊㄞ」（繁体字+注音符号）；
- 「東京」配「とうきょう」（日文汉字+平假名）；
- 「학교」配「學敎」（韩文+汉字训读）。
一旦字符本身不可读（如 ©）、或属于西文缩写（如 NASA）、或为数学符号（∑）、或为 emoji（?），就超出了 ruby 的设计范围。强行套用只会让结构变重、语义变乱、维护变难。
别为了“看起来像注音”而牺牲语义和可访问性。符号解释，请交给 abbr；汉字注音，请交给 ruby。两者职责清晰，不该混用。
