文言文注音必须逐字用ruby包裹，rb与rt需严格一一对应且中间无空格换行；多音字须人工判断硬编码；css需重置font-size、line-height和ruby-position；rp括号降级不可省略。
ruby标签在文言文网站中必须逐字拆解，不能按词或句包裹
文言文注音最常踩的坑，就是把整句或整词塞进一个ruby里，比如<ruby>之乎者也<rt>zhī hū zhě yě</rt></ruby>。浏览器无法对齐四个字和四个音节，结果拼音挤成一团、换行错位，甚至只给最后一个字标音。文言文单字信息密度高，“之”“乎”“者”“也”全是虚词，每个字都需独立发音控制。
正确做法是严格一一对齐：
- 每个汉字单独套一层
ruby，内部显式用rb包裹基字、rt紧跟对应拼音 - 像“不亦乐乎”要写成：
<ruby><rb>不</rb><rt>bù</rt></ruby><ruby><rb>亦</rb><rt>yì</rt></ruby><ruby><rb>乐</rb><rt>lè</rt></ruby><ruby><rb>乎</rb><rt>hū</rt></ruby> - 多音字如“乐”在“乐乎”中读
lè，在“音乐”中读yuè，必须人工判断后硬编码，ruby不解析上下文
rt必须是ruby的直接子元素，空格和换行都会破坏结构
很多人写结构时为了可读性加了换行或缩进，比如：
<ruby><rb>乎</rb><rt>hū</rt></ruby>
这在 Safari 17+ 和部分安卓 WebView 中会导致rt脱离锚点，拼音显示在行尾或完全不渲染。浏览器要求rb和rt之间**不能有文本节点（包括空格、换行符）**。
安全写法只有两种：
- 全部写在一行：
<ruby><rb>乎</rb><rt>hū</rt></ruby> - 用 HTML 注释隔开（不产生文本节点）：
<ruby><!-- --><rb>乎</rb><!-- --><rt>hū</rt><!-- --></ruby>
别指望 CSS 的 white-space: nowrap 能救——它只管渲染，不管 DOM 结构是否合法。
CSS重置必须覆盖font-size、line-height、ruby-position三处
文言文常用小字号（如14px）和高行距（1.8），但rt默认继承父级字号，不缩放；而浏览器对rt的行高计算逻辑不一致，Firefox 可能拉高，Chrome 可能压扁。不干预就会出现拼音贴底、遮挡基字或上下留白过大。
最小必要样式组合：
-
ruby { line-height: 1.8; }：保证基字行高足够，不挤压拼音空间 -
ruby rt { font-size: 0.65em; line-height: 1; ruby-position: over; }：强制缩小、禁用额外行高、启用原生上标定位 - 避免
vertical-align或margin-top——这些是模拟定位，缩放或换字体时立刻偏移
特别注意 iOS Safari：它对连续多个ruby的间距计算异常，可在父容器加font-size: 0，再给ruby单独设font-size: 14px微调。
rp不是可选项，文言文网站必须带括号降级
文言文读者常使用老旧设备或邮件客户端打开网页（比如学校内网、图书馆终端），这些环境大概率不支持ruby。没有rp时，降级效果是“乎hū”，拼音紧贴汉字，完全不可读；加上rp后变成“乎(hū)”，保留语义分隔。
标准写法（rp必须成对且仅含括号）：
<ruby><rb>乎</rb><rp>(</rp><rt>hū</rt><rp>)</rp></ruby>
不要省略，也不要写成<rp>(hū)</rp>——括号必须由两个rp分别包裹，否则老浏览器无法识别。
真正麻烦的是动态注入：服务端若某字无拼音数据，千万别输出空<rt></rt>，屏幕阅读器会读出“空白注音”，对视障用户造成干扰。得先校验拼音非空，再拼结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
