ruby-align: center不生效的根本原因是rb缺失、font-size与line-height未协同、Safari≤16未显式声明；必须全局设ruby { ruby-align: center; }，每个汉字用<rb>包裹，并统一ruby行高为1.2、rt字号为0.6em。
ruby 标签的对齐效果不是“设了 ruby-align: center 就自动居中”的事——它高度依赖结构完整性、CSS 协同和浏览器实现差异。实测下来，90% 的错位问题都出在 rb 缺失、font-size/line-height 不匹配，或 Safari 旧版本未显式声明对齐方式。
为什么 ruby-align: center 经常不生效
多数人以为这是默认行为，但 Safari 16 及更早版本压根不实现该默认值，会回退到 start；Chrome/Firefox 在 text-align: right 或 RTL 环境下也容易被覆盖。实测中，未声明 ruby-align 的页面在 iOS Safari 15.6 上拼音全部左贴汉字，窄容器里几乎无法阅读。
实操建议：
- 所有用到
ruby的 CSS 文件开头就加ruby { ruby-align: center; }，别依赖浏览器默认 - 补一句
ruby { -webkit-ruby-align: center; }，兼容 Safari 15.6（macOS 12.5）仍有必要 - 不要只给某个 class 设，全局重置，避免组件间样式污染
rb 元素省略后对齐彻底失效
写成 <ruby>汉<rt>hàn</rt></ruby> 看似省事，但 Safari 和旧版 Edge 中，rt 失去基线锚点，ruby-align 完全不触发，拼音可能飘在字左侧、右侧，甚至垂直偏移一整行。
立即学习“前端免费学习笔记（深入）”；
原因在于：浏览器只有在 rb 明确包裹基字后，才能计算每个 rb 的宽度和基线位置，进而把对应 rt 居中对齐。没有 rb，rt 就是“无主注音”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
- 每个汉字都必须套一层
<rb></rb>，单字也不能省 - 多字词如「苹果」，必须拆成
<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby> - 用正则或
pypinyin后处理时，在生成<rt>前，确保每个汉字字符都被<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防止自身行高干扰 - 禁用
rt的默认垂直对齐，加vertical-align: text-top更稳 - 不要给
ruby设display: inline-block——会破坏内联流布局，导致换行异常
连续多个 ruby 在 Safari 上间距异常怎么办
部分旧版 Safari（尤其是 iOS 16.4 之前）对连续多个 ruby 的字间距处理不稳定，会出现意外空隙或挤在一起。这不是 bug，而是其排版引擎对连续内联元素的 baseline 计算逻辑差异。
实操建议：
- 用
font-size: 0包一层父容器，再重设子元素字号：.ruby-group { font-size: 0; } .ruby-group ruby { font-size: 16px; } - 若需整体控制样式（如统一字号/行高），用
display: inline-flex包容器，别依赖ruby自动对齐 - 避免在
contenteditable区域直接使用ruby，iOS Safari 17.4 需加transform: translateZ(0)触发 GPU 渲染才稳定
真正麻烦的从来不是怎么写，而是写完发现拼音贴边、换行错乱、或者在某台 iPad 上突然全部平铺显示——这些细节不查 computed styles 根本看不出来。
