html5中ruby标签必须配合rb和rt使用才能实现语义化注音，rb包裹被注音字、rt提供读音，二者须一一对应紧邻；省略rb会导致拼音错位或不渲染，多字须分层标注，css调整需避免破坏可访问性与流式布局。
ruby 标签不是为了“加个拼音看起来漂亮”，而是为汉字、假名、谚文等东亚文字提供**语义化发音标注能力**——它让屏幕阅读器知道“这个字读什么”，让浏览器知道“这个音该对齐哪个字”，也让打印、导出、缩放时排版行为可预期。不按规范用，就只剩视觉效果，丢了语义和兼容性。
为什么ruby必须配rb和rt才能生效
浏览器只认 rb+rt 这一组合结构。写成 <ruby>汉<rt>hàn</rt></ruby> 看似简洁，但多数现代浏览器（Chrome 115+、Safari 17.4+）会降级为普通内联文本，拼音可能贴在字右侧、被截断，或干脆不渲染——因为缺失 rb，基字语义丢失，rt 失去锚点。
-
rb必须显式包裹被注音汉字，不能省略，也不能用纯文本替代 -
rt必须紧跟对应rb，不能跨rb混用（比如两个rb共享一个rt） - 多字必须分层：正确是
<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby>，错误是<ruby>重庆<rt>chóng qìng</rt></ruby>
拼音错位、不显示或被裁掉的常见 CSS 原因
默认情况下，rt 的字号、行高、垂直对齐都不继承父级，不同引擎处理 baseline 方式也不一致。直接套结构不加样式，Firefox 可能压字，Safari 可能留白过大，Chrome 可能换行脱节。
- 给
ruby设line-height: 1.8（至少比汉字大 0.6），防拼音贴底或重叠 - 显式设
rt { font-size: 0.6em; }，别依赖浏览器默认的 50% - 加
rt { line-height: 1; }，避免 Firefox 把拼音拉得过高 - 禁用
rt { position: absolute; }或visibility: hidden——降级后拼音直接消失，且破坏屏幕阅读器识别 - 优先用
ruby-position: over（默认值）而非 margin 模拟上移，后者在缩放/换字体时极易偏移
动态生成时怎么避免结构断裂和 XSS 风险
Vue 的 v-html 或 React 的 dangerouslySetInnerHTML 直接拼字符串，一旦汉字含 &、 或 HTML 特殊字符，就会破坏 DOM 结构，甚至引入 XSS。
- 不要写
v-html="`<ruby><rb>${char}</rb><rt>${pinyin}</rt></ruby>`" - 用封装组件：Vue 中定义
<ruby-text :char="c" :pinyin="p"></ruby-text>，模板里固定结构 - 若必须字符串注入，先用
DOMPurify.sanitize(html, { ALLOWED_TAGS: ['ruby', 'rb', 'rt', 'rp'] })过滤 - React 中确保
<rt></rt>是<ruby></ruby>的**直接子元素**，嵌套在<span></span>里会导致语义失效、样式错乱
导出 PDF 或旧环境降级时拼音消失的根本原因
wkhtmltopdf、某些邮件客户端（Outlook Desktop）、Android 4.3 WebView 等压根没实现 ruby 布局模块。它们不是“渲染不好”，而是完全忽略 rt 标签——但里面的文本内容通常仍作为普通文本流输出，变成“汉hàn”这种平铺形式。
- 用
document.createElement('ruby').tagName === 'RUBY'检测是否原生支持 - 不推荐把关键信息（如考试答案、操作指引）放在
rt里，降级后易被误读 - 打印场景下，
@media print里无法强制渲染rt，需另起逻辑生成带拼音的静态副本 -
rp标签不是为 IE 存在的，而是为安卓 WebView 断行时提供括号包裹 fallback，现代项目可省略，但要知道它在窄屏下的实际作用
真正难的不是写出 <ruby><rb>你</rb><rt>nǐ</rt></ruby>，而是让这一行在 VoiceOver 下朗读正确、在 Firefox 缩放 150% 时不重叠、在 wkhtmltopdf 导出时不丢拼音、在用户粘贴到微信里还能保持可读——这些细节全藏在 rb 是否显式、rt 是否直系子元素、CSS 是否破坏流式布局里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
