学术论文中ruby注音必须严格遵循语义规范：rb与rt须显式成对、一一对应、紧邻排列；多音字需人工标注；PDF导出需JS降级为括号格式；连续ruby需font-size:0重置间距；屏幕阅读器要求rb→rt顺序且不可隐藏rt；术语缩写禁用ruby而应使用abbr。
学术论文网页里用 ruby 标签加注音，不是“能用就行”，而是必须严格按语义拆字、配对、控制渲染行为——否则在 PDF 导出、屏幕阅读器朗读、窄屏排版时全会崩。
rb + rt 必须显式成对，不能省略 rb
很多论文页面直接写 <ruby>漢字<rt>hàn zì</rt></ruby>，看似简洁，但 Safari 17+ 和部分 Android WebView 会把拼音错位到末尾，甚至整个 rt 不渲染。原因很简单：缺少 rb，浏览器无法确定“哪个字对应哪个音节”。rb 不是可选包装，它是基字的语义锚点。
- 每个被注音汉字必须包裹在独立的
rb中，不能混入普通文本或空格 -
rb和rt必须一一对应、紧邻出现（中间不能有换行、 - 多音字如「行」在「行動」中读 xíng，在「銀行」中读 háng，必须人工判断后分别写：
<ruby><rb>行</rb><rt>xíng</rt></ruby>和<ruby><rb>行</rb><rt>háng</rt></ruby>
PDF 导出时 ruby 注音全消失怎么办
用 wkhtmltopdf 或浏览器“打印为 PDF”时，rt 内容几乎必然丢失——这不是 bug，是这些渲染引擎压根没实现 ruby 布局模块。你看到的只是汉字，拼音彻底蒸发。
- 导出前必须做降级：用 JS 检测
document.createElement('ruby').supports（或查CSS.supports('ruby-position', 'over')），不支持则把rt内容转为括号内联文本，例如将<ruby><rb>漢</rb><rt>hàn</rt></ruby>替换为漢(hàn) - 避免依赖
@media print里重写样式——rt在打印上下文中根本不会被解析，CSS 规则无效 - 如果论文需归档为 PDF，建议服务端预渲染两套 HTML：一套带完整
ruby结构供网页浏览，一套已展开为括号格式供导出
连续多个 ruby 在行内导致间距异常
论文常出现「《論語》· 子曰：『學而時習之』」这类混合标点、书名号、引号的长句。连续多个 ruby 块在 iOS Safari 或旧版 Chrome 中可能产生不可控的字间距，尤其在 font-size 变化时更明显。
立即学习“前端免费学习笔记（深入）”；
- 给包含
ruby的父容器设font-size: 0，再对每个ruby单独设font-size: 1rem，可消除因字体度量差异带来的微小间隙 - 禁用
ruby { letter-spacing: ... }—— 它会干扰浏览器内置的 ruby 对齐逻辑，导致拼音横向偏移 - 若含数字或西文（如「第23章」），把数字也套进
rb，并补上rp：例如<ruby><rb>23</rb><rt>èr shí sān</rt><rp>( </rp><rp> )</rp></ruby>，让安卓 WebView 断行时至少把括号和拼音当整体处理
屏幕阅读器朗读顺序错乱
学术论文常被视障研究者用 VoiceOver 或 NVDA 朗读。如果结构松散，会出现“先读完所有拼音，再回头读汉字”，或者跳过 rt 完全不读——这直接破坏理解逻辑。
- 确保
rb和rt是同一ruby元素下的直接子节点，且顺序固定为rb→rt（不能颠倒，也不能插入span等中介） - 不要给
rt设visibility: hidden或display: none—— 这会让屏幕阅读器彻底忽略注音内容 - 测试方法：用 VoiceOver（macOS）打开页面，按
Ctrl+Option+→逐字移动光标，确认每读一个字，紧接着就朗读其对应的rt内容
最易被忽略的一点：论文里大量使用的「术语缩写」（如「NLP」「CNN」）绝不能用 ruby 标注全称。它不是缩写解释工具，强行使用会误导屏幕阅读器、破坏语义层级，且在 PDF 导出时变成无意义的堆砌。该用 <abbr title="Natural Language Processing">NLP</abbr> 的地方，别碰 ruby。
