過去バージョン

とは

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

  漢字(かんじ)

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

内の要素関係

  ベーステキスト(ふりがな)

実用例: 日本語フリガナ

  東(とう)
  京(きょう)
  都(と)




  東京都(とうきょうと)




  著者:
  山田(やまだ)
  太郎(たろう)

中国語の拼音 (Pinyin)

  
    北(běi)
    京(jīng)
  

韓国語のハングル

  
    韓国(한국)
  

を省略した場合

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

漢字かんじ


漢字(かんじ)

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('漢字', 'かんじ'));

サポート状況

FAQ

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

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

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