电子报刊中ruby标签必须显式包含rb和rt元素才能稳定排版，否则会导致错位、换行异常及屏幕阅读器误读；现代浏览器已不再兼容省略rb的写法，多字需分层嵌套ruby，且须配合line-height、white-space、ruby-position等css属性确保兼容性。
ruby 标签在电子报刊中能用，但必须按字拆解、显式写 rb 和 rt，否则排版错位、换行异常、屏幕阅读器读错——这不是样式问题，而是结构失效。
ruby 必须配 rb + rt 才能稳定排版
电子报刊对文字流连续性要求高，ruby 一旦结构不完整，就会退化为普通内联文本，导致拼音平铺在汉字右侧，破坏段落节奏。现代浏览器（Chrome 115+、Safari 17.4+、Firefox 115+）已不再兼容省略 rb 的写法，比如 <ruby>汉<rt>hàn</rt></ruby> 在 Safari 17.6 中会错位或压字。
-
rb必须显式包裹每个被注音字，不能用纯文本替代 -
rt必须是ruby的直接子元素，且紧贴对应rb后面，中间不能有空格、换行或span - 多字必须分层：
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，不能合并成一个ruby块 - 地名、成语、多音字全靠手动拆，浏览器不会自动切分或选音
连续 ruby 在报刊中容易换行错位
电子报刊常设多栏或窄容器，ruby 默认是 inline 元素，其内部注音高度会影响整行 line-height。当宽度不足时，浏览器优先保证基字不断行，rt 就可能溢出到行外，或把相邻字挤出可视区。
- 给包含
ruby的父容器加line-height: 1.8（至少比汉字大 0.6），防拼音贴底或重叠 - 强制不换行：
ruby { white-space: nowrap; }，避免字-音对被断开 - iOS Safari 对连续
ruby间距处理异常，可用font-size: 0父容器 + 子元素重设字号微调 - 禁用
display: inline-block或float，否则破坏文档流，打印和缩放时更易错乱
CSS 控制 rt 位置别用 margin 模拟上标
用 rt { margin-top: -0.5em } 强行上拉拼音，在电子报刊的响应式字体、不同 DPI 屏幕、打印预览中极易偏移失准——这不是排版，是“碰运气”。
- 优先用标准属性：
rt { ruby-position: over; }（默认值，但显式声明更稳） - 设固定像素字号：
rt { font-size: 12px; line-height: 1; }，避免浏览器对百分比字号计算不一致 - 加
ruby-align: center让拼音水平居中（部分旧 Safari 需此声明） - 禁用
position: absolute或visibility: hidden：降级后拼音直接消失，且破坏屏幕阅读器识别
动态生成时结构断裂比样式错误更致命
电子报刊常从 CMS 或 API 动态注入带拼音的内容，若用字符串拼接，一个未转义的 & 或换行符就能让 DOM 结构断裂，轻则拼音错位，重则引入 XSS 风险。
- 不要用
v-html或dangerouslySetInnerHTML直接插字符串：`<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>` - 用封装组件（如 Vue 的
<ruby-text></ruby-text>或 React 的RubyText），模板里固定结构，变量只进内容 - 若必须字符串注入，先用
DOMPurify.sanitize(html, { ALLOWED_TAGS: ['ruby', 'rb', 'rt', 'rp'] })过滤 - 注音数据为空时，跳过整个
ruby块，避免输出空<rt></rt>——部分读屏软件会播报“空白注音”
电子报刊里最常被忽略的不是样式细节，而是 rb 的显式存在和 rp 的成对包裹——前者决定拼音是否对齐，后者决定老环境里读者能不能看懂括号里的内容。结构一松，后面所有排版努力都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
