ruby标签在打印中默认不渲染，因浏览器打印引擎普遍不支持ruby布局模块；须用JS扁平化结构或强制设置display:inline、font-size用pt/mm单位，并禁用flex/grid父容器。
ruby标签在@media print中默认不渲染
浏览器打印引擎对ruby标签的支持极弱——Chrome、Firefox、Edge 在打印预览里基本忽略 ruby、rt、rp 的语义和布局，常表现为注音文字消失、或整段文字错位堆叠。这不是 bug，是规范未强制要求打印时保留 Ruby 渲染逻辑。
实操建议：
- 不要依赖
ruby的原生显示，尤其当目标是中文/日文注音（如「汉字かんじ」） - 若必须保留注音信息，提前用 JS 将
ruby结构扁平化为行内文本，例如转成「汉字 [kanji]」或「汉字（kanji）」 - 在
@media print中显式重置：ruby, rt, rp { display: inline; font-size: 0.8em; }，但仅作兜底，不能保证跨浏览器一致
用data-print="true"包裹ruby区域比class="no-print"更可控
很多页面把 ruby 放在标题或说明栏里，这些区域本身需要打印，但周围可能有广告、操作按钮等干扰项。用 class="no-print" 容易被框架样式覆盖（比如 Ant Design 的 .ant-typography 里已有同名 class），导致注音区域意外隐藏。
正确做法是只给最外层容器加 data-print="true"，并在 @media print 中写：
立即学习“前端免费学习笔记（深入）”；
body * { display: none; }
[data-print="true"] { display: block !important; }
[data-print="true"] * { display: inherit !important; }这样能确保 ruby 及其子元素被纳入打印流，且不受全局 display 重置误杀。
注音内容在打印中字号/行高容易失真
屏幕用 rem 或 % 控制 rt 字号，打印时物理尺寸会漂移；更糟的是，某些浏览器（如 Safari）直接丢弃 rt 的 font-size 声明，统一按正文缩放。
必须锁定物理单位：
-
rt必须用font-size: 8pt或font-size: 2.8mm，禁用em、rem - 避免
line-height用无单位值，改用line-height: 1.2（相对当前字体）或line-height: 12pt - 加
vertical-align: top强制对齐，防止不同引擎对rt基线计算差异
打印预览里ruby位置偏移，别怪CSS没写对
常见现象：屏幕看着正常，打印预览里注音跑到了字左侧、甚至换行到上一行末尾。这往往不是 ruby 样式问题，而是父容器用了 flex、grid 或 float —— 打印引擎根本不识别这些布局，直接降级为块流，导致内部 ruby 失去上下文。
解决路径很直接：
- 给
ruby的直接父元素加display: block（哪怕它原本是inline） - 禁用所有
flex/grid相关声明，包括justify-content、gap等 - 如果注音需右对齐（如日文右注），不用
text-align: right，改用margin-left: auto+display: inline-block
真正难调的点不在 ruby 本身，而在它嵌套的上下文是否被打印引擎“信任”。一旦父级用了现代布局，ruby 就成了孤儿节点——这点比字体、单位更容易被忽略。
