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>正确做法是只约束注音单元本身：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5493" title="html-to-pptx">html-to-pptx</a>
<p>将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>给每个<code>ruby加white-space: nowrap;，不是给父p或div
rb内容里禁用全角空格，用零宽空格分隔音节（如yīèrsān）<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" />，模板里固定<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“修正”对齐的操作，都会在缩放、换字体、导出时立刻暴露问题——结构对了，样式才真正可控。
