ruby标签需rb与rt成对嵌套，rb必须包裹单个汉字，多字须拆分多个ruby块；rt需重置CSS样式并用ruby-position: over触发原生排版，禁用inline-block/float及不规范写法。
ruby 标签在现代前端中不是“加拼音的快捷键”，而是专为东亚文字设计的语义化注音结构；不按规范写，Chrome 可能显示错位，Safari 可能直接不渲染，iOS WebView 甚至忽略整个 rt。
必须用 rb + rt 成对嵌套，不能省略 rb
很多开发者图省事写成 <ruby>汉<rt>hàn</rt></ruby>，结果在 Chrome 115+ 和 Safari 17.4+ 中拼音贴在字右侧、被截断，或完全不触发上标逻辑——因为浏览器需要 rb 显式声明基字锚点，rt 才能绑定定位。省略 rb 等于扔掉语义锚，只剩视觉“碰运气”。
-
rb必须包裹单个汉字（如<rb>重</rb>），不可是空标签或跨字文本 - 多个字必须拆成多个
ruby块：<ruby><rb>重</rb><rt>chóng</rt></ruby><ruby><rb>庆</rb><rt>qìng</rt></ruby> - 禁用
<ruby>重庆<rt>chóng qìng</rt></ruby>：基字长度与拼音字符数不匹配，排版引擎无法对齐
rt 的 CSS 必须显式重置，不能依赖默认值
不同浏览器对 rt 的默认 font-size、line-height、vertical-align 实现差异极大：Firefox 可能把拼音拉高半行，Safari 可能留白过大导致换行脱节，Chrome 在缩放时容易偏移。靠 margin-top: -0.3em 模拟上标是自找麻烦。
- 强制设
rt { font-size: 0.65em; line-height: 1; }，避免继承干扰 - 用
ruby { ruby-position: over; ruby-align: center; }触发原生排版引擎，而非position: relative+top - 父容器加
line-height: 1.8防止拼音被相邻行挤压，尤其在小字号段落中 - 禁用
display: inline-block或float在ruby上——会切断基字与注音的流式关联
动态生成时结构断裂比样式错位更致命
Vue/React 里用 v-html 或 dangerouslySetInnerHTML 拼接字符串，一旦汉字含 &、 或 Unicode 变体，DOM 就会提前闭合，<code>rt 脱离 ruby，变成平铺文本。这不是样式问题，是语义链断裂。
立即学习“前端免费学习笔记（深入）”；
- 不要写
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'] }) - 确保
rt是ruby的**直接子元素**，嵌套在span里会导致屏幕阅读器跳过注音
真正难的不是写出能看的拼音，而是让每个 rt 在任意字体、任意缩放、任意屏幕阅读器下，都稳稳钉在它该在的那个字上方——这要求你把 rb 当作必需锚点，把 CSS 当作排版开关，而不是装饰补丁。
