HTML里的ruby标签与CSS垂直排版的结合-html教程-PHP中文网

ruby标签本身不触发css vertical-rl排版，其内部rb与rt仍保持水平相对位置；竖排需手动用position: absolute或transform重置rt定位，或改用svg模拟以实现精确控制。

html里的ruby标签与css垂直排版的结合

ruby标签本身不触发CSS vertical-rl排版

HTML ruby 是语义化注音标签，用于标注汉字读音（如日文假名、拼音），它生成的是「基础文本流中的内联注解结构」，不是独立排版容器。即使给 ruby 元素设 writing-mode: vertical-rl，浏览器仍按默认横向流解析其内部结构：即 rb（基文）和 rt（注音）仍保持水平相对位置，不会自动转为竖排对齐。常见错误现象是：注音挤在字右侧、换行错乱、rt 被截断或重叠——根本原因是 ruby 的布局逻辑与 writing-mode 不正交。

vertical-rl + ruby 需手动重置 rt 的定位

要让 ruby 在竖排上下文中正确显示（例如古籍中汉字右旁加竖排假名），必须放弃默认渲染，用 CSS 强制干预 rt 的位置：

父容器设 writing-mode: vertical-rl，同时确保 font-variant-east-asian: ruby 已启用（部分字体需此才能正确识别注音宽度）
rt 必须脱离文档流：position: absolute 或 transform: translateX()，否则它会跟随 rb 一起被 vertical-rl 拉长，导致高度失控
竖排时注音应出现在汉字「上方」而非右侧，所以 rt 的 top 或 transform 偏移值需基于 line-height 和字体实际 ascent 计算，不能硬写 top: -1em
避免用 display: block 改 rt，它会破坏 ruby 的内联语义，导致屏幕阅读器跳过注音

text-combine-upright 对 ruby 内容无效

text-combine-upright: all 只作用于连续的窄字符（如 ASCII 数字、拉丁字母），而 ruby 中的 rb 通常是汉字，rt 是假名或拼音，均不满足“可合并”的字符集条件。开发者工具里看到 text-combine-upright 显示为 none（即使写了），就是因为浏览器判定当前节点内无匹配字符。此时强行包裹 rb 或 rt 并设该属性，只会被忽略——不是 bug，是规范行为。