この記事の要点

<rtc> = Ruby Text Container。複数のルビアノテーションをグループ化する要素 ルビ族: <ruby> / <rb> / <rt> / <rp> / <rtc> 主用途: 日本語フリガナと意味注釈のような二重ルビ ブラウザ対応: Firefox のみ完全対応。Chrome/Edge/Safari は限定的 CSS: ruby-position (over/under/inter-character) / ruby-align

rtc 要素とは

<rtc> (Ruby Text Container) は、HTML のルビ機能で複数のルビアノテーションをまとめるためのコンテナ要素です。日本語のフリガナや、中国語の拼音、さらに各文字に対する意味解説など、ベース文字に複数の注釈を重ねたいときに使います。

ルビ関連要素一覧

要素	正式名	役割
<ruby>	Ruby	ルビ全体のルート
<rb>	Ruby Base	ルビが振られる側 (ベーステキスト)
<rt>	Ruby Text	ルビ本文 (注釈側)
<rp>	Ruby Parenthesis	ルビ非対応ブラウザ用の括弧 (フォールバック)
<rtc>	Ruby Text Container	複数の <rt> をグループ化

基本のルビ (rtc なし)

<!-- 標準的なフリガナ -->
<ruby>
  漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>

<!-- 表示: 漢字(かんじ) -->
<!-- ルビ対応ブラウザ: "漢字" の上に小さく "かんじ" -->
<!-- 非対応ブラウザ: 漢字(かんじ) -->

<!-- 1 文字ずつ振る場合 -->
<ruby>
  日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt>
</ruby>

rtc を使った複数アノテーション

1 つのベース文字に対し、2 種類以上の注釈を付けたい場合に <rtc> を使います:

<!-- 例: 上にフリガナ、下に英訳 -->
<ruby>
  <rb>東</rb><rb>京</rb>
  <rtc><rt>とう</rt><rt>きょう</rt></rtc>  <!-- フリガナ (上) -->
  <rtc><rt>Tokyo</rt></rtc>                <!-- 英訳 (下) -->
</ruby>

<!-- 例: 拼音と意味 (中国語) -->
<ruby>
  <rb>北</rb><rb>京</rb>
  <rtc><rt>běi</rt><rt>jīng</rt></rtc>
  <rtc><rt>Beijing (capital)</rt></rtc>
</ruby>

CSS によるルビ制御

ruby {
  ruby-position: over;        /* ベースの上 (デフォルト) */
  ruby-position: under;       /* ベースの下 */
  ruby-position: inter-character; /* 文字間 (縦書き中国語向け) */

  ruby-align: start;          /* 左寄せ (LTR) */
  ruby-align: center;         /* 中央 */
  ruby-align: space-between;  /* 均等割付 */
  ruby-align: space-around;   /* 均等割付 + 両端余白 */
}

rt {
  font-size: 0.5em;           /* ルビ文字サイズ */
  color: #666;
}

/* 2 番目の rtc を下に配置 */
rtc:nth-of-type(2) {
  ruby-position: under;
}

ブラウザ対応状況

ブラウザ	<ruby> <rt>	<rtc>	ruby-position
Chrome / Edge	○	×	over / under
Firefox	○	○	over / under / inter-character
Safari	○	△ (部分)	over / under
IE 11	○ (古い仕様)	×	×

<rtc> は Firefox のみ完全対応です。Chrome/Edge では仕様上は認識されますが、レイアウトが期待通りにならないことがあります。書籍など複数ルビを正確に表示したい場合は、CSS で位置調整するか、画像化が現実的。

HTML 仕様の変遷

• HTML 5.1 / 5.2: <rb> と <rtc> が「複雑なルビ」用に正式定義
• HTML Living Standard (WHATWG): <rb> は廃止勧告、<rtc> は非推奨に分類
• 現在の推奨: 基本ルビは <ruby><rt><rp> のみで構成し、複雑な多重ルビは CSS / SVG で代替

つまり <rtc> は仕様としては存在するが、将来的に削除される可能性のある実験的要素と認識しておくのが安全。

代替パターン

パターン 1: 2 段の ruby を入れ子

<!-- フリガナのみ -->
<ruby>東京<rt>とうきょう</rt></ruby>

<!-- フリガナ + 注釈を別行に -->
<span class="annotation">
  <ruby>東京<rt>とうきょう</rt></ruby>
  <span class="meaning">(Tokyo, Japan capital)</span>
</span>

パターン 2: CSS Grid で擬似ルビ

<span class="multi-ruby">
  <span class="top">とうきょう</span>
  <span class="base">東京</span>
  <span class="bottom">Tokyo</span>
</span>

<style>
.multi-ruby {
  display: inline-grid;
  grid-template-rows: auto auto auto;
  text-align: center;
  vertical-align: middle;
}
.multi-ruby .top, .multi-ruby .bottom { font-size: 0.5em; color: #666; }
</style>

用途例

• 国語辞典・歴史書: 「平城京」に「へいじょうきょう」+ 「奈良時代の都」
• 中国語学習教材: 漢字に拼音 + ピンイン声調 + 日本語訳
• 古文・漢文: 訓読み + 送りがな + 現代語訳
• EPUB 電子書籍: 一部リーダーが rtc に対応 (Apple Books など)

FAQ

Q: スマホで小さくて読めない
A: rt のフォントサイズは親の 50% がデフォルト。rt { font-size: 0.6em; } や line-height 調整で改善。

Q: 印刷用 PDF にしたい
A: ブラウザ印刷では崩れることが多いので、業務用はInDesign の縦中横機能やEPUB ビューアを使うのが確実。

Q: ルビ非対応ブラウザでも見たい
A: <rp> で括弧表示。「東京(とうきょう)」のようにフォールバック表示されます。