ruby在vertical-rl竖排下默认将rt置于基字右侧而非上方；强行用writing-mode: horizontal-tb覆盖会导致方向错乱、间距异常和可访问性问题；应保持默认逻辑，必要时用white-space: nowrap防断列，并以固定像素设置rt字号确保稳定。
ruby 在 vertical-rl 竖排下默认注音位置是右方，不是上方
很多人以为 ruby 总是把 rt 放在基字“上方”，其实这是横排（writing-mode: horizontal-tb）下的行为。一旦父容器设了 writing-mode: vertical-rl，浏览器会自动把 rt 移到基字**右侧**（即顺时针旋转 90° 后的“上方”方向），这是符合中文竖排出版规范的——注音应紧邻汉字右侧，而非顶部。
常见错误是强行用 rt { writing-mode: horizontal-tb; } 把拼音拉回横排，结果导致：拼音方向与基字不一致、字符间距错乱、屏幕阅读器读序异常。
- 不要覆盖默认逻辑：竖排时让
rt自然出现在右侧，语义和可访问性都更稳 - 若真需拼音始终横排（如教学场景），应在
rt内部包裹一层<span style="writing-mode: horizontal-tb"></span>，而非直接设在rt上 -
ruby-position: over在竖排中无效——它只对horizontal-tb生效；竖排下等效控制是ruby-position: right（但目前仅 Firefox 支持，Chrome/Safari 忽略）
竖排时 rp 括号 fallback 会翻转方向，但括号字符本身不会自动镜像
当页面整体为 vertical-rl，且用户浏览器不支持 ruby（如旧版安卓 WebView），rp 的内容（如 ( 和 )）会原样显示，但它们的位置关系会随文字流改变：原本「汉(hàn)」在横排中是左括号在前，竖排降级后可能变成「汉」上接「)」、下接「(」，视觉上成了「汉\n)\n(」——这不是 bug，而是老浏览器按竖排流渲染纯文本的结果。
解决办法不是换括号，而是控制 rp 的显隐逻辑：
立即学习“前端免费学习笔记（深入）”；
- 必须成对使用：
<rp>( </rp><rt>hàn</rt><rp>)</rp>，不能只写一个rp - 避免用中文全角括号（如「（」、「）」），它们在竖排中可能被字体引擎当作普通汉字处理，不参与翻转逻辑
- 如果项目必须兼容 IE10 或 Android 4.4 以下，建议用
【】替代()，因为「【」在竖排中天然位于上方、「】」位于下方，视觉连贯性更好
多字 ruby 块在竖排中容易因 white-space 导致断列错位
横排时 <ruby>北<rt>běi</rt></ruby><ruby>京<rt>jīng</rt></ruby> 是安全的，每个字+注音占一个内联盒。但切到 vertical-rl 后，white-space: normal（默认）会让空格、换行符触发“换列”，导致「北」和「京」被分到不同列，中间插入多余空白甚至换行。
真实项目里最稳妥的做法是显式锁定：
- 给所有
ruby父容器加white-space: nowrap，防止意外断列 - 禁用
line-break: strict——它在竖排中会强制按字断列，反而放大间隙 - 若需段落级竖排换行（如古籍每列 12 字），应由外层容器控制（如
div设height: 12em），而不是依赖ruby内部换行 - 绝对不要在
ruby内部插入<br>或块级标签，这会破坏内联流，竖排下直接崩布局
font-size 缩放失效 + line-height 错位是竖排 ruby 最隐蔽的坑
横排时设 rt { font-size: 70%; } 多半能工作，但竖排下这个百分比会基于“列宽”而非“行高”计算，Chrome 和 Safari 表现不一致：一个可能缩得太小看不见，另一个可能撑破容器。更麻烦的是 line-height ——竖排中它控制的是字与字之间的**垂直间距**（即列内上下距离），设 line-height: 1.5 容易让拼音和基字重叠或拉开过大。
可靠方案只有两个：
- 对
rt使用固定像素字号：rt { font-size: 12px; }，再配合line-height: 1消除上下留白 - 用
ruby { line-height: 2.2em; }统一控制整列高度（2.2 是经验值，适配多数中文字体 x-height） - 千万别给
ruby设display: inline-block——竖排下它会让每个 ruby 块独占一列，彻底打乱连续文本流
竖排 ruby 不是横排的简单旋转，它的排版逻辑根植于东亚出版流，任何试图“微调位置”的 CSS 覆盖，都可能在某个浏览器或字体下突然失效。真正稳定的做法，是接受浏览器默认行为，只做最小必要干预。
