标签不负责定位，仅定义注音内容；真正控制位置的是容器和浏览器排版逻辑；强行用position或top会破坏ruby布局模型，导致换行错位、缩放失准、朗读混乱；唯一合规方式是使用ruby-position和ruby-align。

标签本身不负责“定位”，它只定义注音内容；真正控制位置的是 容器和浏览器内置排版逻辑。

为什么直接给 加 position 或 top 会出问题

很多人想手动调

的上下偏移，结果发现换行错位、缩放失准、屏幕阅读器朗读混乱。这是因为 不是普通内联元素——它在渲染树中被当作 ruby 布局模型的一部分，强行用 position: absolute 或 top 会绕过该模型，导致语义断裂和流式失效。

• rt 必须嵌套在 ruby 内，单独写 <rt>hàn</rt> 无意义，样式不可控，无障碍支持丢失
• 浏览器默认将 rt 渲染在基字上方（横排）或右侧（竖排），这个行为不能靠 CSS 覆盖，只能微调
• 若用 transform: translateY(-0.3em) 替代 top，虽能临时生效，但会影响换行时的基线对齐，尤其在多字连续标注时容易堆叠或悬空

真正可控的定位方式：用 ruby-position 和 ruby-align

这两个 CSS 属性专为 设计，是唯一符合规范且跨浏览器稳定的定位控制手段。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• ruby { ruby-position: over; } —— 默认值，注音在上方；可选 under（下方）、right（右，用于竖排）
• ruby { ruby-align: center; } —— 让注音在单个基字正上方居中；默认是 start（左对齐），对中文单字影响不大，但对日文假名或混合宽度字符更关键
• 不要对 rt 单独设 display: block 或 width，这会破坏 ruby 的自动尺寸收缩逻辑（浏览器本应把 rt 缩到约 70% 字号并紧贴基字）

多音字/词组场景下， 必须一对一绑定单字

常见错误是把整词包进一个 ruby，再配一个 rt，比如 <ruby>你好<rt>nǐ hǎo</rt></ruby>。这会导致两个问题：

• 换行时，“你”和“好”可能被拆到不同行，但拼音仍整体浮在第一行上方，视觉脱节
• 语音合成引擎无法判断“nǐ”对应“你”、“hǎo”对应“好”，朗读顺序错乱
• 正确做法是每个字独立包裹：<ruby>你<rt>nǐ</rt></ruby><ruby>好<rt>hǎo</rt></ruby>

兼容旧浏览器时， 不是摆设，但别滥用

rp 的作用很明确：仅在不支持 ruby 的浏览器里显示括号。现代项目可以省略，但如果目标用户仍有 IE9–11 或老版安卓 WebView，建议保留。

• 写法必须成对：<rp>(</rp><rt>nǐ</rt><rp>)</rp>，不能只加左括号或漏掉右括号
• 不要在 rp 里塞样式或 JS 逻辑——它的内容不会被现代浏览器渲染，纯属降级占位符
• 若用构建工具自动注入 rp，注意检查是否重复包裹，否则可能生成 ( (nǐ) ) 这类双括号

实际排版中最容易被忽略的，是把 ruby 当作普通容器去 flex、grid 或 float——它有自己的布局规则，一旦混入外部布局指令，注音位置就不可预测了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！