HTML中ruby标签在横排和竖排切换中的表现-html教程-PHP中文网

ruby在vertical-rl竖排下默认将rt置于基字右侧而非上方；强行用writing-mode: horizontal-tb覆盖会导致方向错乱、间距异常和可访问性问题；应保持默认逻辑，必要时用white-space: nowrap防断列，并以固定像素设置rt字号确保稳定。

html中ruby标签在横排和竖排切换中的表现

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（默认）会让空格、换行符触发“换列”，导致「北」和「京」被分到不同列，中间插入多余空白甚至换行。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

真实项目里最稳妥的做法是显式锁定：

给所有 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 容易让拼音和基字重叠或拉开过大。

可靠方案只有两个：