<rp></rp>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 ruby要素の子要素として(rt要素の直前または直後に配置)
内容 テキスト

rp要素は、ルビテキストを囲む括弧を表します。この要素は、ruby要素の子要素として使用します(rt要素の直前または直後に配置)。


<ruby>
漢<rp></rp><rt>かん</rt><rp></rp><rp></rp><rt>じ</rt><rp></rp>
</ruby>

rp要素の内容(括弧)は、ルビに対応していないブラウザで表示されることになります。ルビに対応しているブラウザでは、この要素の内容は無視されます。

  • これは、ルビに対応していないブラウザ向けに、ルビの範囲を伝えやすくするためのものです。一般的に、それは括弧記号で表されますが、必要であれば括弧以外の内容を入れることもできます。

次の例では、亜米利加というテキストにアメリカというルビを振っています。

<ruby>亜米利加<rt>アメリカ</rt></ruby>

上記のように記述した場合、未対応ブラウザでは亜米利加アメリカが連続して表示されてしまい、分かりにくいテキストになってしまいます。

表示例:亜米利加アメリカ


未対応ブラウザでも分かりやすくしたい場合は、次のようにrt要素(ルビテキスト)の前後にrp要素を配置します。

<ruby>亜米利加<rp></rp><rt>アメリカ</rt><rp></rp></ruby>

上記のように記述することで、ルビテキストの前後に括弧が表示されるようになります。

表示例:亜米利加(アメリカ)


必要であれば、次のように別の括弧記号を使用することもできます。

<ruby>亜米利加<rp></rp><rt>アメリカ</rt><rp></rp></ruby>
旧HTMLからの変更点

使用例

  • 以下の未対応ブラウザの表示例は、未対応ブラウザにおける表示内容を擬似的に再現したものです。
モノルビで使用した例

<p><ruby>
漢<rp></rp><rt>かん</rt><rp></rp><rp></rp><rt>じ</rt><rp></rp>
</ruby></p>

表示例

かん

  • 未対応ブラウザの表示例: 漢(かん) 字(じ)
グループルビで使用した例

<p><ruby>
今日<rp></rp><rt>きょう</rt><rp></rp>
</ruby></p>

表示例

今日きょう

  • 未対応ブラウザの表示例: 今日(きょう)
両側ルビで使用した例

<p><ruby>
<ruby>辞<rp></rp><rt>じ</rt><rp></rp><rp></rp><rt>しょ</rt><rp></rp></ruby>
<rp></rp><rt lang="en">dictionary</rt><rp></rp>
</ruby></p>

表示例

しょ dictionary

  • 未対応ブラウザの表示例: 辞(じ)書(しょ)[dictionary]