ruby注音错位或裁切需显式设置line-height和font-size：ruby{line-height:1.8}、rt{font-size:0.6em;line-height:1}，禁用全局缩放与nowrap父容器，单个ruby加white-space:nowrap，rb内用零宽空格分隔音节。
ruby注音错位或被裁切，先检查line-height和font-size
直接写<ruby><rb>汉</rb><rt>hàn</rt></ruby>，在Firefox里拼音常压字，在Safari里又留白过大——这不是bug，是浏览器对rt的默认line-height不继承、font-size计算逻辑不一致导致的。
必须显式干预：
-
ruby { line-height: 1.8; }—— 至少比汉字行高大0.6，防拼音贴底或挤进下一行 -
rt { font-size: 0.6em; }—— 别用50%或0.5em，部分引擎会四舍五入到整像素后偏移 -
rt { line-height: 1; }—— 禁止rt拉高整行，否则Firefox会多出上下空白 - 避免
ruby { font-size: 0.7em; }这种全局缩放，它会让rb和rt同比例缩，失去对齐基准
多字注音排版脱节，别用white-space: nowrap硬包整个段落
「第
<ruby><rb>123</rb><rt>yī èr sān</rt></ruby>页」在窄屏上容易把「123」断到下一行，但拼音还挂在上一行末尾——视觉完全错位。 <p>正确做法是只约束注音单元本身：</p>
- 给每个
ruby加<code>white-space: nowrap;，不是给父p或div - 数字/英文
rb内容里禁用全角空格，用零宽空格分隔音节（如yīèrsān） - 若需兼容老旧安卓WebView，可补
<rp>(</rp>和<rp>)</rp>，让括号+拼音被当整体处理
动态注入ruby结构时，v-html或dangerouslySetInnerHTML极易翻车
Vue里写v-html="`<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>`"，一旦char含&或，DOM直接断裂；React同理，<code>dangerouslySetInnerHTML里rt若被套进span，语义就废了。
安全路径只有两条：
- 封装组件：
<rubytext :char="c" :pinyin="p"></rubytext>，模板里固定<ruby><rb>{{ char }}</rb><rt>{{ pinyin }}</rt></ruby> - 字符串注入前必须过滤：Vue用
DOMPurify.sanitize(html, { ALLOWED_TAGS: ['ruby', 'rb', 'rt', 'rp'] })，React确保rt是ruby的**直接子元素**，不能嵌套在其他标签里
打印PDF或wkhtmltopdf导出时拼音消失，不是样式问题而是渲染器没实现ruby
Chrome打印预览能看到拼音，但用wkhtmltopdf导出PDF后只剩汉字——这不是CSS没生效，是绝大多数headless渲染器压根没实现ruby布局模块。
临时方案很务实：
- 导出前用JS遍历所有
ruby，把rt文本提取出来，拼成汉(hàn)格式插入rb后（保留原始结构供屏幕阅读器读取） - 服务端渲染时，对PDF请求走单独模板分支，用
span模拟注音，不依赖ruby - 永远别在
@media print里试图用display: block或position: absolute强行显示rt，它只会让导出更不可控
最常被忽略的是：ruby不是视觉装饰工具，它的排版行为强依赖基字与注音的严格一一对应。任何试图用CSS flex或grid“修正”对齐的操作，都会在缩放、换字体、导出时立刻暴露问题——结构对了，样式才真正可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
