<ruby>

<ruby>は字や単語にルビ（ふりがな）を振るHTMLタグである。

モノルビ

ひとつひとつの漢字にルビ（ふりがな）を振る。振り仮名は各々の文字に対して振られる。

<ruby>
  親字<rt>ふりがな</rt>
</ruby>

モノルビはそれぞれの漢字の読み方がわかるが、親字の間隔が均等ではなくなる。

<ruby>
  臥<rt>が</rt>
  薪<rt>しん</rt>
  嘗<rt>しょう</rt>
  胆<rt>たん</rt>
</ruby>

臥が 薪しん 嘗しょう 胆たん

グループルビ

単語全体にルビ（ふりがな）を振る。振り仮名は単語全体に対して均等に振られる。

<ruby>単語<RT>ふりがな</ruby>

グループルビは親字の間隔が均等になるが、それぞれの漢字の読み方がわからない。

<ruby>臥薪嘗胆<rt>がしんしょうたん</ruby>

臥薪嘗胆がしんしょうたん

属性

ruby要素には次に示す属性を指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

コンテンツモデル

ruby要素は次に示すカテゴリに属する。

内容

ruby要素の内容にはフローコンテンツを含めることができる。具体的には次の要素である。

RB

RBは、ルビを振る対象となる親文字(ruby base)を包含するHTML要素である。<RUBY>と<RUBY>の間に記述します。振り仮名は<RT>タグで指定できます。

構文

<RUBY>
<RB>ルビを振る文字列</RB>
<RT>ふりがな</RT>
</RUBY>

HTMLバージョン

HTML5以降

RT

ルビのふりがなを指定します。<RUBY>と<RUBY>の間に記述します。振り仮名をふる単語は<RB>タグで指定できます。

活字組版のルビには拗音（小書き）が無かったが、コンピュータ組版になって使用できるようになった。

構文

<RUBY>
<RB>ルビを振る文字列</RB>
<RT>ふりがな</RT>
</RUBY>

HTMLバージョン

HTML5以降

HTMLタグ

参考文献

WHATWG (2021) "The ruby element" HTML Living Standard