HTML中ruby标签的底部对齐与顶部对齐设置-html教程-PHP中文网

ruby-align: bottom/top 非默认行为，必须显式声明；rb 元素不可省略，否则失去锚点；font-size 与 line-height 需协同设置，否则对齐失效；ios contenteditable 中需加 transform: translatez(0) 触发 gpu 渲染。

html中ruby标签的底部对齐与顶部对齐设置

ruby-align: bottom 和 top 不是默认行为，必须显式声明

很多人写 ruby 时只加 <rt></rt>，以为浏览器会自动按汉字底部或顶部对齐拼音，结果在 Safari 或旧版 Chrome 中拼音飘在字侧边、上下错位。根本原因是：ruby-align 默认值在各浏览器中不一致，且未声明时容易被 text-align 或 RTL 环境覆盖。Safari 16 及更早版本压根不实现 ruby-align: center 的默认逻辑，会退回到 start（即左对齐），更别说 bottom 或 top —— 它们从来就不是默认值。

实操建议：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

所有用到 ruby 的 CSS 文件开头必须加 ruby { ruby-align: bottom; } 或 ruby { ruby-align: top; }，不能依赖继承或浏览器猜测
若需兼容 iOS Safari 15.6（macOS 12.5），补上 ruby { -webkit-ruby-align: bottom; }
避免在父级设 text-align: right 后还指望 ruby-align: bottom 生效——它会被覆盖，必须在 ruby 元素自身上重申

rb 元素缺失会导致 ruby-align 完全失效

ruby-align: bottom 看似只控制水平位置，但它实际依赖浏览器对每个基字（base character）的宽度和基线位置的精确计算。而这个计算的前提是：每个汉字必须被 <rb></rb> 显式包裹。写成 <ruby>汉<rt>hàn</rt></ruby> 在 Safari 和 Edge 中，<rt></rt> 会失去锚点，ruby-align 形同虚设，拼音可能垂直偏移一整行。

实操建议：

单字也必须套 <rb></rb>：<ruby><rb>汉</rb><rt>hàn</rt></ruby>
多字词必须逐字拆分：<ruby><rb>苹</rb><rt>píng</rt><rb>果</rb><rt>guǒ</rt></ruby>
用正则或 pypinyin 生成拼音时，别用字符串替换偷懒；先遍历每个 Unicode 字符，再为每个字符生成一对 <rb>...</rb><rt>...</rt>

font-size 和 line-height 不匹配会让 ruby-align 失效

ruby-align: bottom 控制的是 <rt></rt> 相对于 <rb></rb> 底部边缘的水平对齐，但它的视觉呈现严重依赖 line-height 和 font-size 的协同。比如只设 rt { font-size: 0.5em; }，而父 ruby 的 line-height: 1.8，拼音就会被上下挤压，底部对齐变成“底部被截断”，甚至整个 <rt></rt> 被挤出可视区。

实操建议：