ruby-align 必须显式声明，因 safari 16 及更早版本不实现默认 center 而回退到 start，且 chrome/firefox 在 rtl 或 text-align: right 下易被覆盖；rb 元素不可省略，否则 rt 失去基线锚点导致对齐失效；font-size 与 line-height 需协同设置，否则 ruby-align 无效；多音字和组合字符需归一化并同步遍历处理；ios safari 17.4 在 contenteditable 中需加 transform: translatez(0) 触发 gpu 渲染。
ruby-align 为什么必须显式声明
多数人以为 ruby-align: center 是默认行为，写了等于没写——但 Safari 16 及更早版本（包括部分 iOS WebView）压根不实现该默认值，会退回到 start，导致拼音左贴汉字，尤其在窄容器或中英文混排时特别明显。Chrome 和 Firefox 虽默认 center，但一旦父元素有 text-align: right 或 RTL 语言环境，未声明的 ruby-align 就可能被意外覆盖。
实操建议：
- 所有用到
ruby的 CSS 文件里，第一行就加ruby { ruby-align: center; }，别依赖浏览器默认 - 不要只给某个 class 设，而是全局重置，避免组件间样式污染
- 若需兼容 Safari 15.6（macOS 12.5），还得补一句
ruby { -webkit-ruby-align: center; }，虽然已非必需，但保险起见
rb 元素不可省略，否则对齐失效
写成 <ruby>汉<rt>hàn</rt></ruby> 看似简洁，实际在 Safari 和旧版 Edge 中，rt 会失去基线锚点，ruby-align 完全不生效，拼音可能飘在字左侧、右侧，甚至垂直偏移一整行。
原因在于：浏览器只有在 rb 明确包裹基字后，才能计算每个 rb 的宽度和基线位置，进而把对应 rt 居中对齐。没有 rb，rt 就成了“无主注音”，ruby-align 失去作用对象。
实操建议：
- 每个汉字都套一层
<rb></rb>，哪怕单字也别省略 - 多字词如「苹果」，必须拆成
<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby>
- 用正则或 pypinyin 后处理时，在生成
<rt> 前，确保每个汉字字符都被 <code><rb></rb>包裹，不能靠字符串替换偷懒
font-size 和 line-height 不配对调，ruby-align 就是摆设
ruby-align: center 只控制水平对齐，但拼音被截断、上下错位、行距撑开——这些视觉问题 90% 出在 font-size 和 line-height 没协同设置。比如只设 rt { font-size: 0.5em; }，但父 ruby 的 line-height 是 1.8，拼音就会被上下挤压变形，居中也就无从谈起。
实操建议：
- 统一设
ruby { line-height: 1.2; }，避免继承外部段落过大行高 -
rt必须设font-size: 0.6em（不是 50%，因各浏览器缩放比例不同），再加line-height: 1;防止自身行高干扰 - 禁用
white-space: nowrap在ruby上——它会让整个注音块无法折行，移动端易溢出；改用ruby { display: inline-flex; flex-wrap: wrap; }更可控
多音字和组合字符让逐字对齐变脆弱
pypinyin 的 lazy_pinyin() 默认按 Unicode 码点切分，对「一会儿」「呣」「ā」这类带组合符或口语词，返回拼音长度可能与原字符串 length 不等。例如「呣」是一个字符（U+80F3），但某些 pypinyin 版本会返回 ['m', 'u']，造成 rb 和 rt 数量错位，ruby-align 直接失效。
实操建议：
- 输入前先用
unicodedata.normalize('NFC', text)归一化字符串，减少组合符干扰 - 不用
len(text)控制循环，改用enumerate(lazy_pinyin(text, errors='ignore'))并同步遍历原始字符列表，跳过非汉字字符（如数字、emoji）时不生成rb/rt对 - 遇到明确多音字（如「长」「重」），别依赖 pypinyin 默认音，用
load_phrases_dict()预载地名/专有名词词典，再调lazy_pinyin(text, strict=True)
ruby 嵌套在 contenteditable 区域内时，ruby-align 会临时失效——这时得加一层 ruby { transform: translateZ(0); } 强制触发 GPU 渲染，否则拼音就偏了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
