ruby标签不能用于双语对照，因其语义限定为“基字+发音”，不支持“原文+译文”；用于英文术语会导致屏幕阅读器误读、打印异常、seo失效；双语场景应改用abbr、dl或details等语义化标签。
ruby 标签在双语阅读器网页中不是为“中英对照”设计的，它只适合给单个东亚文字加注音（如汉字标拼音、日文标假名），不能用于英文单词解释或术语翻译。
为什么 ruby 不能当双语对照用
浏览器和屏幕阅读器把 ruby 当作「基字 + 发音」的语义单元，不是「原文 + 译文」。你写 <ruby>NASA<rt>National Aeronautics and Space Administration</rt></ruby>，结果是：
- 现代浏览器可能直接忽略
rt（因为NASA不是东亚文字，rb缺失或不匹配） - VoiceOver 或 NVDA 会尝试把整段英文当发音读出来，变成“N-A-S-A 国家航空航天局”，语义错乱
- 打印或导出 PDF 时，
rt常被压扁、换行异常，甚至消失 - 搜索引擎无法识别这是术语解释，不会索引译文内容
双语阅读器该用什么替代 ruby
真正适配双语场景的是语义明确、可聚焦、可缩放的结构：
- 术语解释统一用
<abbr title="National Aeronautics and Space Administration">NASA</abbr>：自带无障碍支持，鼠标悬停显示，屏幕阅读器自动播报title - 段落级双语对照用
<dl class="bilingual"> <dt lang="zh-CN">航天局</dt> <dd lang="en-US">space agency</dd> </dl>：语义正确、打印不断页、:focus-within可高亮整组 - 需要点击展开译文时，用
<details><summary>NASA</summary>National Aeronautics...</details>：零 JS、原生可访问、支持键盘操作
ruby 在双语页面里唯一合理的用法
仅限于对中文/日文/韩文原文中的生僻字、多音字、繁体字做发音标注，且必须满足：
- 每个字单独套一层
<ruby><rb>重</rb><rt>chóng</rt></ruby>，不能合并词组 - 显式写出
<rb></rb>和<rp></rp>：老环境降级后显示“重(chóng)”，比纯文本更可靠 - 配合
或使用，确保字体与语音引擎匹配 - 避免在
<code>、<pre class="brush:php;toolbar:false;"></pre>或表格单元格里嵌套ruby——排版引擎常失效
真正难处理的不是怎么写标签，而是当页面同时存在拼音标注、英文术语解释、繁体字注音、多音字上下文切换时，ruby 的 DOM 结构一旦漏掉 <rb></rb> 或错位一个 <rt></rt>，整个注音链就断了——而且这种错误在开发时看不出，要等盲人用户朗读或打印成册才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
