HTML `<ruby>` ルビ注釈要素

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

<ruby> は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。

ルビという言葉は写植者が使用した長さの単位に由来しており、読みやすさ保ったままテキストを新聞用紙に印刷できる最小のサイズを表します。

試してみましょう

<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>

ruby {
  font-size: 2em;
}

この要素にはグローバル属性のみがあります。

html

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

html

<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>

コンテンツカテゴリー	フローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容	1 つ以上のグループで、それぞれが 2 つの部分から構成されています。ベーステキスト。次のどちらかです。記述コンテンツ。ただし `<ruby>` 要素がなく、子孫にも `<ruby>` 要素がないこと。単一の `<ruby>` 要素で、子孫に `<ruby>` 要素がないもの。ベーステキストの注釈で、次のどちらかです。 1 つ以上の `<rt>` 要素 `<rp>` 要素に続いて 1 つ以上の `<rt>` 要素。それ自体に `<rp>` 要素が続く（つまり、`rp, rt, rp, rt, ..., rp`）
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール	対応するロールなし
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLElement`