rp标签不提供括号，仅作为条件显示的钩子；括号由其内部纯文本（如“（”“）”）实现，必须成对紧邻rt、嵌套于ruby内，且不可被css/js控制显隐。

rp 标签不“提供括号”，它只是让括号有条件地显示

rp 标签本身不生成任何可见内容，也不自动插入括号；它只是个“钩子”——浏览器根据是否支持 ruby 渲染机制，决定是否隐藏它。真正起降级作用的是你写在 rp 里的文本（比如 ( 和 )），而不是标签本身。

rp 必须成对紧邻 rt，且嵌套在 ruby 内部

常见错误是把 rp 当普通容器用，或者单独写一个。正确结构必须是：

html-deploy

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

下载

<ruby><rb>汉</rb><rp>(</rp><rt>hàn</rt><rp>)</rp></ruby>

• rp 必须和 rt 同级、紧邻，不能嵌套在 rt 里，也不能放在 rb 外面
• 必须成对出现：一个在 rt 前，一个在 rt 后，否则降级效果断裂
• 如果漏掉 rb 或顺序错乱（比如 rt 在 rb 前），整个 ruby 结构可能被忽略或错位

rp 的显隐不由 CSS 或 JS 控制

你不能用 style="display:block" 强制显示 rp，也不能用 JS 操作它的 visibility——这会破坏浏览器原生的降级逻辑。它的显示/隐藏完全由浏览器内置规则决定：

• 支持 ruby 的现代浏览器（Chrome 117+、Firefox 119+、Safari 17.4+）会隐式设 rp { display: none }
• 旧版 WebView 或禁用 ruby 支持的环境（如 IE、部分 Android 系统）会把它当普通行内标签，直接渲染其文本
• 某些 Android WebView（尤其 2022 年前版本）会既不隐藏也不显示 rp，导致括号丢失——这不是语法问题，而是引擎缺陷

rp 内容必须是纯文本，且 rt 不能为空

哪怕只多一个空格或换行符，都可能触发解析异常。更隐蔽的问题是：

• rp 里只能放纯文本，禁止嵌套标签（包括 <span></span>、  等）、样式属性或脚本
• 如果 rt 为空（比如 <rt></rt>），Safari 可能连带跳过 rp 渲染，导致降级失效
• 不要依赖 rp 实现语义化括号——它本质是样式兼容钩子，不是结构标记。真要保底，得靠服务端或构建时 fallback 逻辑

实际写的时候，最易被忽略的是 rb/rt 数量严格一一对应，以及 rp 必须紧贴 rt 两侧——差一个空格，旧浏览器就可能把括号甩到行首或吞掉。

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