ruby竖排需用writing-mode: vertical-rl配合标准结构字音，省略rb或仅设rt样式会导致错位；safari 16.4前支持差，需降级处理。
ruby 标签默认不支持竖排，必须配合 writing-mode
HTML 的 ruby 本身只定义语义（注音关系），不控制排版方向。想竖排，得靠 CSS 的 writing-mode 切换文字流向。常见错误是只写 ruby 和 rt，结果注音还是横在字上方。
关键点：竖排时，writing-mode: vertical-rl 让文字从上到下、从右到左排列，此时 rb（基文）和 rt（注音）会自动按垂直方向对齐——但前提是结构正确。
实操建议：
- 必须用标准结构：
<ruby><rb>漢</rb><rt>かん</rt></ruby>，不能省略rb标签（部分浏览器对隐式基文支持不稳定） - 给
ruby元素设style="writing-mode: vertical-rl;"，不要只设在rt上——否则基文和注音流向不一致，会错位 - 注意字体支持：中文字体通常没问题，但日文假名或韩文注音若字体缺失，可能 fallback 成横排方块字，建议显式指定
font-family
vertical-rl 下 rt 位置偏移，需用 text-combine-upright 或 line-height 微调
竖排时，rt 默认比 rb 稍窄，且浏览器渲染中常出现上下不对齐、挤在一起或间距过大。这不是 bug，而是 rt 的行高和字宽在垂直流中计算方式不同。
常见现象：rt 文字被压缩成一列、看不见，或浮在基文字右侧而非正上方（实际是“正右方”，因 vertical-rl 中“上方”对应逻辑上的“左方”）。
解决方法：
- 优先尝试
text-combine-upright: all（仅适用于单个rt包含 1–2 个字符，如「かん」会强制并排显示为紧凑竖列） - 更通用的做法：给
rt设line-height: 1+font-size: 0.7em，避免行高撑开导致错位 - 若仍偏移，可对
ruby加display: inline-block后用vertical-align: middle对齐父容器基线
兼容性陷阱：Safari 对 ruby + vertical-rl 支持滞后
Safari 16.4 之前，ruby 在 writing-mode: vertical-rl 下完全不渲染 rt，或把 rt 当普通内联文本处理——这是已知限制，不是你代码写错。
判断是否生效最简单的方法：打开 Safari 开发者工具，选中 rt 元素，看 computed styles 里 display 是否为 ruby-text；如果是 inline，说明未启用 ruby 渲染引擎。
临时应对方案：
- 加降级样式：
rt { display: inline; font-size: 0.6em; letter-spacing: 0.1em; }，至少保证注音可见 - 避免在 Safari 主要场景（如 iOS Web App）依赖纯
ruby竖排，必要时改用绝对定位模拟（position: relativeonrb,position: absoluteonrt） - 检查 Can I Use 数据：目前（2024）Chrome/Firefox/Edge 均已稳定支持，Safari 仅在 macOS 13.3+/iOS 16.4+ 完整支持
多音字或长注音时，rb 和 rt 必须严格一一对应
竖排 Ruby 容易忽略的细节：当一个汉字对应多个假名（如「行」读作「ぎょう」）、或需要标注词性符号（如「〜」、「・」）时，rb 和 rt 的包裹粒度决定渲染结果。
错误写法：<ruby>行<rt>ぎょう</rt></ruby> —— 这里 rb 缺失，浏览器可能将「行」当作匿名 rb，但在 vertical-rl 下容易丢失语义绑定
正确做法：
- 每个注音单元独立套
ruby：<ruby><rb>行</rb><rt>ぎょう</rt></ruby> - 连词注音（如「日本語」注「にほんご」）必须整体包裹：
<ruby><rb>日本語</rb><rt>にほんご</rt></ruby>，不可拆成三个单独ruby，否则竖排后注音会分散在三列 - 若需空格或标点参与注音（如「日本・中国」注「にほん・ちゅうごく」），标点应放在
rb和rt内对应位置，不能只放外面
竖排 Ruby 的真正难点不在写法，而在验证——它既依赖浏览器对 writing-mode 的底层实现，又受字体度量影响。哪怕结构全对，换一个系统字体就可能错位一像素。上线前务必在目标设备真机测试，别信桌面模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
