この記事の要点

(Ruby Parenthesis) はルビ非対応ブラウザ用のフォールバック括弧 <ruby> + <rt> と必ずセットで使う。単独使用は無意味 対応ブラウザでは <rp> の中身は display:none 相当で非表示 非対応ブラウザでは「漢字(かんじ)」のように普通のテキストとして括弧表示される 主要ブラウザはほぼルビ対応済 (Chrome / Firefox / Safari / Edge) → 実用的にはレガシー互換用

とは

<rp> (Ruby Parenthesis) は、ルビ機能に対応していないブラウザでルビが読みやすく表示されるよう、フォールバック用の括弧を提供する HTML5 要素です。

<ruby>
  漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

対応/非対応ブラウザでの見え方

ブラウザ	表示	の扱い
ルビ対応（Chrome / Firefox / Safari / Edge / Opera）	漢字の上に小さく「かんじ」	非表示 (display:none 相当)
ルビ非対応（古い IE / 一部組込ブラウザ / テキストブラウザ）	漢字(かんじ)	テキストとして括弧表示
スクリーンリーダー	「かんじ」と読み上げ（実装依存）	無視 or 読み上げ対象外

内の要素関係

<ruby>
  ベーステキスト<rp>(</rp><rt>ふりがな</rt><rp>)</rp>
</ruby>

要素	意味	必須
<ruby>	ルビ全体のコンテナ	必須
<rt>	Ruby Text - ふりがな本体	必須
<rp>	Ruby Parenthesis - フォールバック括弧	任意（推奨）
<rb>	Ruby Base - ベーステキスト (W3C は推奨せず)	非推奨
<rtc>	Ruby Text Container - 複数のふりがなまとめ	任意

実用例: 日本語フリガナ

<!-- 1文字ずつ独立したルビ -->
<p>
  <ruby>東<rp>(</rp><rt>とう</rt><rp>)</rp></ruby>
  <ruby>京<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>
  <ruby>都<rp>(</rp><rt>と</rt><rp>)</rp></ruby>
</p>

<!-- 単語まとめてのルビ -->
<p>
  <ruby>東京都<rp>(</rp><rt>とうきょうと</rt><rp>)</rp></ruby>
</p>

<!-- 名前 -->
<p>
  著者:
  <ruby>山田<rp>(</rp><rt>やまだ</rt><rp>)</rp></ruby>
  <ruby>太郎<rp>(</rp><rt>たろう</rt><rp>)</rp></ruby>
</p>

中国語の拼音 (Pinyin)

<p>
  <ruby>
    北<rp>(</rp><rt>běi</rt><rp>)</rp>
    京<rp>(</rp><rt>jīng</rt><rp>)</rp>
  </ruby>
</p>

韓国語のハングル

<p>
  <ruby>
    韓国<rp>(</rp><rt>한국</rt><rp>)</rp>
  </ruby>
</p>

を省略した場合

対応ブラウザでは問題なく表示されますが、非対応環境では「漢字かんじ」のように括弧無しでふりがなが本文と混ざって読めなくなるため、書籍や公的文書ではフォールバック必須です。

<!-- ❌ rp なし: 非対応環境で「漢字かんじ」と表示される -->
<ruby>漢字<rt>かんじ</rt></ruby>

<!-- ✅ rp あり: 非対応環境で「漢字(かんじ)」と表示される -->
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>

CSS で表示制御

/* ルビ位置を下にする */
ruby {
  ruby-position: under;  /* over (デフォルト) / under */
}

/* ふりがなのサイズ */
rt {
  font-size: 0.5em;
  color: #666;
}

/* rp は通常 display:none だが、明示的に表示するには */
rp {
  display: inline;       /* デバッグ時に括弧を可視化 */
  color: #ccc;
}

JavaScript で動的に追加

function addRuby(base, reading) {
  const ruby = document.createElement('ruby');
  ruby.appendChild(document.createTextNode(base));

  const rp1 = document.createElement('rp');
  rp1.textContent = '(';
  ruby.appendChild(rp1);

  const rt = document.createElement('rt');
  rt.textContent = reading;
  ruby.appendChild(rt);

  const rp2 = document.createElement('rp');
  rp2.textContent = ')';
  ruby.appendChild(rp2);

  return ruby;
}

document.body.appendChild(addRuby('漢字', 'かんじ'));

サポート状況

ブラウザ	ルビ対応	rp サポート
Chrome (5+)	○	○
Firefox (38+)	○	○
Safari (5+)	○	○
Edge	○	○
IE 5+	△ (基本対応)	○
Lynx / w3m	×	テキスト表示

FAQ

Q: 現代のブラウザがほぼ対応してるなら 不要？
A: モダンブラウザ専用ならほぼ不要ですが、RSS リーダー / メーラー / 古い組込端末 / テキストブラウザでは今でもフォールバックが活きます。公的文書では推奨。

Q: 括弧以外の文字を入れてもいい？
A: 仕様上は任意の文字列を入れられます。「【」「<」など好みの記号を使えます。

Q: スクリーンリーダーは rp を読む？
A: 多くの実装で読まれません。読み上げ用の本文には別途 aria-label を併用します。