ruby 的 line-height 不影响 rt 垂直位置，需单独设置 rt { line-height: 1; } 和 rt { font-size: 0.6em; }，并配合 vertical-align: text-top；导出 PDF 时 ruby 排版会失效，须降级处理。
ruby 元素的 line-height 不会自动撑开行框
直接给 ruby 设置 line-height，几乎不影响 rt 的垂直位置——因为 rt 默认不继承父级行高，且其 baseline 对齐逻辑由浏览器内核独立处理。Chrome 和 Safari 可能“看起来正常”，但 Firefox 会把 rt 压在基字底部，甚至裁掉上半部分。
根本原因不是样式没写，而是 rt 在规范中被定义为“非流式内联注解”，它的行框高度由自身 font-size + line-height + 浏览器默认 baseline 偏移共同决定，和外层 ruby 的 line-height 没有计算关系。
- 别指望
ruby { line-height: 2; }能让拼音离汉字远一点 - 必须单独控制
rt { line-height: 1; }，否则 Firefox 会按 1.2+ 的默认值拉高，导致上下留白失控 -
ruby上设line-height的唯一可靠作用：防止多行ruby块之间挤在一起（比如段落里连续几个带拼音的字）
rt 的 font-size 是计算起点，不是缩放比例
rt 的 font-size 决定后续所有垂直计算的基准，但它不继承父级字号，也不受 ruby 的 font-size 影响——除非你显式重置。浏览器默认设为 50%，但这个 “50%” 是相对于谁？不同引擎答案不同：Chrome 相对 rb 字号，Firefox 相对 ruby 父容器字号，Safari 可能忽略该百分比直接用固定像素。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 统一做法：
ruby { font-size: 1em; }重置基础字号，再单独设rt { font-size: 0.6em; } - 避免用
rt { font-size: 50%; }——语义模糊，Firefox 下可能算成 0px - 如果基字用了
rem或vw动态字号，rt必须用相同单位或em才能保持比例
line-height 在 ruby 场景下必须配合 vertical-align 使用
rt 的垂直对齐不是靠 line-height 单独完成的，它依赖 vertical-align 与基字的 baseline 关系。默认 vertical-align: text-top 在多数浏览器里会让拼音偏高，而 middle 又容易因字体 descender 导致错位。
立即学习“前端免费学习笔记（深入）”；
- 最稳组合：
rt { line-height: 1; vertical-align: text-top; } - 若仍偏高，可微调：
rt { margin-bottom: -0.1em; }（比transform: translateY()更安全，不破坏屏幕阅读器识别） - 禁用
vertical-align: super——它基于整行行高计算偏移，缩放时极易失准 - 不要给
ruby设display: inline-block，会切断 baseline 链，让vertical-align失效
导出 PDF 或打印时 ruby 行高会崩，必须降级处理
绝大多数 PDF 渲染引擎（包括 Chrome DevTools 的 Print to PDF、wkhtmltopdf、甚至 Safari 的打印预览）完全忽略 ruby 的 CSS 排版规则。你看到的正常效果，在导出后大概率变成拼音贴底、换行错乱、或整个 rt 消失。
- 服务端生成 PDF 前，必须用 JS 或后端解析 HTML，将
<ruby><rb>汉</rb><rt>hàn</rt></ruby>替换为<span class="ruby-fallback">汉<span class="pinyin">hàn</span></span>，再配绝对定位 CSS - 前端导出前可加检测：
if (!CSS.supports('ruby-position', 'over')) { /* fallback */ } - 即使做了样式加固，也要预留 fallback：用
rp包裹括号，确保纯文本环境至少能读到拼音
