HTML <ruby> element

<ruby>は字や単語にルビ（ふりがな）を振るHTMLタグである。ルビの振りかたには「モノルビ」と「グループルビ」の2通りがある。

モノルビ

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

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

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

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

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

グループルビ

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

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

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

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

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

属性

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

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
HTML文書内で一意な識別子を指定する。
lang
何語で記述されているかを指定する。
lang属性
値 説明
ar アラビア語
de ドイツ語
en 英語
en-AU 英語（オーストラリア）
en-CA 英語（カナダ）
en-NZ 英語（ニュージーランド）
en-SG 英語（シンガポール）
en-UK 英語（イギリス）
en-US 英語（アメリカ）
es スペイン語
fr フランス語
fr-CA フランス語（カナダ）
fr-FR フランス語（フランス）
it イタリア語
ja 日本語
ja-JP 日本語（日本）
ko 韓国語
pt ポルトガル語
pt-BR ポルトガル語（ブラジル）
pt-PT ポルトガル語（ポルトガル）
ru ロシア語
th タイ語
th-TH タイ語（タイ）
tr トルコ語
vi ベトナム語
zh 中国語
zh-cmn-Hans 中国語・普通話・簡体字
zh-cmn-Hans-CN 中国語・普通話・簡体字（中国大陸）
zh-cmn-Hant 中国語・普通話・繁体字
zh-cmn-Hant-TW 中国語・普通話・繁体字（台湾）
zh-yue-Hant 中国語・広東語・繁体字
zh-yue-Hant-HK 中国語・広東語・繁体字（香港） 
<html lang="ja">
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

コンテンツモデル

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

内容

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

JavaScript

JavaScriptからはHTMLElementインタフェースを通じてruby要素へアクセスできる。

RT

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

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

構文

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

HTMLバージョン

HTML5以降

JavaScript

JavaScriptからはHTMLElementインタフェースを通じてruby要素へアクセスできる。

HTMLタグ

参考文献

Web Hypertext Application Technology Working Group (2021) "Text-level semantics" HTML Living Standard

株式会社平プロモート (2016) ルビにもルールがある　～文字組版の基本（後半）～