多音字拼音标注必须用字音结构，缺会导致Safari/旧Edge拼音错位；ruby-align: center须全局显式声明，多音字需人工复核，不可依赖自动工具。
多音字拼音标注必须用 ruby + rb + rt 结构
直接写 长 是错的——Safari 和旧版 Edge 会把拼音贴在字左侧，甚至垂直偏移一整行。原因在于：没有 rb，浏览器就找不到基线锚点，ruby-align 完全失效。
正确写法必须显式包裹每个汉字：
<ruby><rb>长</rb><rt>zhǎng</rt></ruby>
多个字如「长大」要拆开处理，不能合并： 就完事。
ruby-align: center 必须全局显式声明
很多人以为 ruby-align: center 是默认值，写了等于没写——但 Safari 16 及更早版本（包括 iOS 16 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; }
重点多音字需人工干预，别依赖自动转拼音工具
「长」在「长度」里读 cháng，在「成长」里读 zhǎng；「单」作姓氏读 shàn，作形容词读 dān。自动工具（如 pinyin-pro、pypinyin）按字频或上下文推测，准确率通常在 85–92%，但关键教学材料、姓名、专有名词必须人工复核。
常见踩坑点：
- 工具输出
单 shàn - 「发」在「发展」中是
fā，在「头发」中是fà，工具常统一标成fā - 导出到 Word 后再复制进 HTML，容易丢掉
rb标签或把rt塞进title或伪元素，破坏语义和可访问性
CSS 控制重点多音字视觉突出
仅靠默认 ruby 渲染，多音字和其他字在视觉上无差别。想突出，得靠 CSS 层叠控制：
给重点字加 class，比如
.key-tone rt {
font-weight: bold;
color: #d32f2f;
font-size: 0.7em;
}
.key-tone {
line-height: 1.3;
}
注意两点：
- 别用
position: absolute覆盖原生行为——会破坏屏幕阅读器识别和响应式缩放 -
font-size和line-height必须协同调整，否则拼音会被挤压变形，居中效果也失效
复杂点在于：同一段文字里可能有多个重点多音字，且需支持动态加载（如从 CMS 拉取内容后 JS 注音），此时必须确保 JS 插入的 ruby 结构完整、class 正确、CSS 作用域不被覆盖——漏掉任一环节，视觉重点就消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
