HTML 的 ＜rp＞ 元素

1. 什么是 <rp> 元素

<rp> 是 HTML 中的 Ruby Fallback Parenthesis 元素，全称为 Ruby Parenthesis。它专门配合 <ruby> 注音结构使用，用来提供一组降级显示的圆括号。

它的核心作用是：

• 在支持 Ruby 注音的浏览器中，<rp> 的内容会被自动隐藏。
• 在不支持 Ruby 注音的旧浏览器中，<rp> 的内容会原样显示，通常是一对小括号，把注音文字包起来，让内容仍然可读。

简单来说，<rp> 解决的是「不支持注音的浏览器如何展示注音文字」的问题。

2. 基本语法

<rp> 是一个行内元素，没有专属属性，也没有结束标签可省略的写法，必须成对使用。

最基础的 Ruby 结构如下：

<ruby>
  漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp>
</ruby>

要点：

• 开始标签 <rp>（</rp> 放在 <rt> 之前。
• 结束标签 <rp>）</rp> 放在 <rt> 之后。
• 括号内容可以是全角 （ ）、半角 ( )，也可以使用方括号、空格等其他视觉分隔符。

3. 为什么需要 <rp>

浏览器对 Ruby 注音的支持程度并不完全一致。对于支持 <ruby> 和 <rt> 的现代浏览器，会渲染成「上方有小字注音」的效果；而对于不支持的老旧浏览器或某些文本环境，<rt> 的内容可能会直接紧跟在主体文字后面展示。

如果没有 <rp>，可能出现类似下面的阅读混淆：

漢字かんじ

阅读者很难判断「かんじ」是注音还是正文的一部分。加入 <rp> 后，在不支持 Ruby 的环境中会显示为：

漢字（かんじ）

而在支持 Ruby 的环境中，括号被隐藏，仍然显示为干净的注音排版：

漢字
かんじ

4. 完整示例：日语振假名

日语中常使用振假名（furigana）标注汉字的读音，这是 <rp> 最典型的应用场景。

<p>
  <ruby>
    東<rp>（</rp><rt>とう</rt><rp>）</rp>
    京<rp>（</rp><rt>きょう</rt><rp>）</rp>
  </ruby>
</p>

在不支持 Ruby 的浏览器中，这段内容会退化为：

東（とう）京（きょう）

在现代浏览器中，则会把「とう」「きょう」作为注音显示在对应汉字上方，不会出现括号。

5. 完整示例：中文拼音与注音

<rp> 同样适用于中文拼音标注和注音符号标注。

5.1 拼音标注

<ruby>
  博客<rp>（</rp><rt>bó kè</rt><rp>）</rp>
</ruby>

降级显示为：

博客（bó kè）

5.2 注音符号标注

<ruby>
  學習<rp>（</rp><rt>ㄒㄩㄝˊ ㄒㄧˊ</rt><rp>）</rp>
</ruby>

降级显示为：

學習（ㄒㄩㄝˊ ㄒㄧˊ）

6. 相关元素

<rp> 不能单独使用，必须放在 Ruby 结构内。一个完整的 Ruby 结构通常包含以下元素：

6.1 使用 <rb> 的完整结构

<ruby>
  <rb>漢</rb><rp>（</rp><rt>かん</rt><rp>）</rp>
  <rb>字</rb><rp>（</rp><rt>じ</rt><rp>）</rp>
</ruby>

当没有显式书写 <rb> 时，浏览器会自动识别 <rt> 前面的文本作为基础文字。显式使用 <rb> 可以让结构更清晰，也便于脚本和样式操作。

6.2 使用 <rtc> 的双注音结构

<ruby>
  東京
  <rtc>
    <rp>（</rp><rt>とうきょう</rt><rp>）</rp>
  </rtc>
  <rtc>
    <rp>（</rp><rt>Tokyo</rt><rp>）</rp>
  </rtc>
</ruby>

这样可以同时为一段文字提供日语读音和英文读音两组注音。

7. 浏览器兼容性

<rp> 元素得到了现代主流浏览器的广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• 移动端 Chrome / Safari

其中 HTML Ruby 相关元素的支持情况总体较好，但不同浏览器在默认排版样式上可能存在细微差异。<rtc> 和 <rb> 等较新的扩展元素支持度略低于 <ruby>、<rt>、<rp> 这组基础元素。

如果网站需要兼容非常老旧或特殊环境的浏览器，建议在关键注音内容中始终保留 <rp> 降级括号。

8. 无障碍与可访问性

<rp> 对屏幕阅读器等辅助技术也有实际意义。

• 支持 Ruby 的辅助技术会读取基础文字和注音内容，并跳过 <rp> 中的括号。
• 在降级场景下，括号的存在让明眼用户能区分正文与注音，内容可读性更强。
• 建议不要使用空 <rp></rp>，因为那样在不支持 Ruby 的环境中无法提供视觉分隔。

如果注音只是为了装饰性排版，也可以考虑使用 aria-hidden="true" 隐藏注音层；如果注音对理解内容很重要，则应保留完整的 Ruby 结构。

9. 常见误区

9.1 直接写字而不写括号

<!-- 不推荐 -->
<ruby>漢字<rp></rp><rt>かんじ</rt><rp></rp></ruby>

虽然写法合法，但降级后没有任何视觉分隔，违背了 <rp> 的设计初衷。

9.2 用 <span> 模拟括号

<!-- 不推荐 -->
<ruby>漢字<span>（</span><rt>かんじ</rt><span>）</span></ruby>

<span> 在支持 Ruby 的浏览器中不会被自动隐藏，会在注音排版中多出一对括号，影响视觉效果。

9.3 认为必须使用 <rp>

如果只面向现代浏览器，并且可以接受不支持 Ruby 环境下的显示效果，<rp> 并非强制要求。但从健壮性角度考虑，使用 <rp> 几乎没有额外成本，建议保留。

9.4 混淆 <rp> 与 <rt>

• <rp>：降级括号，支持注音时隐藏。
• <rt>：真正的注音文本，会显示在基础文字上方。

两者职责不同，不能互相替代。

10. 总结

<rp> 是 Ruby 注音结构中一个重要但容易被忽略的细节元素。它通过一对降级括号，让使用 Ruby 注音的页面在不支持该特性的环境中依然保持可读性。

使用时的核心原则：

• 将 <rp> 与 <rt> 配合使用，括号放在注音内容前后。
• 支持注音的浏览器自动隐藏 <rp>，不支持的环境则显示括号。
• 日语振假名、中文拼音、中文注音等东亚语言场景是它的主要用途。
• 配合 <ruby>、<rb>、<rtc> 可以构建更复杂的注音结构。

掌握 <rp> 的用法，是深入理解 HTML Ruby 注音体系和国际化排版的重要一步。