<ruby>

対応ブラウザ	Internet Explorer 5.0 / Chrome 5.0 / Safari 4.1
タグの分類	フロー・コンテンツフレージング・コンテンツパルパブル・コンテンツ	含められるもの	本文参照
使える場所	フレージング・コンテンツを使える場所
用例	<ruby>文<rp>（</rp><rt>も</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>

<ruby>とは

「RUBY」とは、文字にルビをふる際に使用するタグです。<ruby>～</ruby>内へまずルビをふる対象となる文字（親文字）を、続いてルビの内容となるテキスト（ルビ文字）を<rt>で指定します。また、ルビの内容を囲む記号を<rp>で指定します。

<rp>タグで指定されたテキストは、<ruby>タグに対応しているブラウザでは表示されず、対応していないブラウザの場合のみ表示されます。ルビの内容を囲むかっこなどの記号を入れておき、<ruby>要素に対応していないブラウザで見た時に、どこからどこまでがルビ文字かはっきり分かるようにします。

たとえば、

<ruby>文<rt>も</rt>字<rt>じ</rt></ruby>にルビを<ruby>振<rt>ふ</rt></ruby>る<ruby>際<rt>さい</rt></ruby>に<ruby>使<rt>し<</rt>用<rt>よう</rt></ruby>するタグ

をルビに対応していないブラウザで表示すると、

文も字じにルビを振ふる際さいに使し用ようするタグ

となり、ふりがなが地の文と区別なく表示されるため、文が崩れてしまいます。

<ruby>文<rp>（</rp><rt>も</rt><rp>）</rp>字<rp>（</rp><rt>じ</rt><rp>）</rp></ruby>にルビを<ruby>振<rp>（</rp><rt>ふ</rt><rp>）</rp></ruby>る<ruby>際<rp>（</rp><rt>さい</rt><rp>）</rp></ruby>に<ruby>使<rp>（</rp><rt>し</rt><rp>）</rp>用<rp>（</rp><rt>よう</rt><rp>）</rp></ruby>するタグ

のように各<rt>の前へ<rp>で区切り文字を入れると、<rp>に対応していないブラウザでは

文（も）字（じ）にルビを振（ふ）る際（さい）に使（し）用（よう）するタグ

となります。

ルビの振り方には、大きく分けてモノルビとグループルビというものがあります。
簡単に言えばモノルビは親文字の1文字ずつにルビを振るやり方で、グループルビは2文字以上の単語全体へまとめてルビを振るやり方となります。グループルビでは単語の途中での折り返しが行われません。

モノルビ
<ruby>昨<rp>（</rp><rt>さく</rt><rp>）</rp>日<rp>（</rp><rt>じつ</rt><rp>）</rp></ruby>
グループルビ
<ruby>昨<rp>（</rp><rt>きのう</rt><rp>）</rp></ruby>

グループルビでルビの幅が親文字の幅を上回った場合、ブラウザによっては親文字列の字間を広げる調整がされます。
ルビの表示を詳細に設定する方法については、現在CSS3で仕様を策定中です。

サンプルデモ

	<ruby>
		薔薇
		<rp>（</rp>
		<rt>バラ</rt>
		<rp>）</rp>
	</ruby>

Internet Explorer 10での表示

Google Chromeでの表示

Firefox（非対応）での表示

ブラウザのサポートと現在の仕様について

現時点（2014年11月1日時点）で、主要なブラウザではIEとWebkit/Blink系が<ruby>をサポートしています。
上で説明した以外の複雑なルビの使い方をする場合、IEとそれ以外での実装は少しずつ異なるため、十分に各ブラウザでの検証を行うようにしましょう。

以下の情報は勧告済の仕様に関するものですが、現時点でここに書かれた挙動をサポートしているブラウザは存在しません。

現在HTML5と呼ばれているものには、大きく分けてWHATWG版とW3C版の2つの仕様があります。
大まかに言うと、WHATWGはW3Cに先行して新機能の追加や仕様の曖昧な点の明確化といった仕様の改修を積極的に行い、W3CはWHATWGの変更内容を適宜に取り込み「HTML5」や「HTML5.1」といったある時点でのスナップショットを公開する、というのがこの2つの基本的な関係です。
2つの仕様はかなりの部分で同一の内容を保っていますが、一部の改修がWHATWGを通さずW3C版へ直接取り入れられたため、幾つかの部分で隔たりが生じています。

W3C版では2014年2月4日付けの勧告候補において、上述の内容に加えて親文字の範囲を表す<rb>と、複雑なルビを表現するための<rtc>が追加されました。その後2014年10月28日に勧告されたHTML5の仕様においても<rb>、及び<rtc>は残っています。
これらの新ルビ仕様はW3C版のみに独自に導入され、現在のところ、WHATWG版ではこの新しいW3C版の仕様を取り入れていません。

ブラウザがどちらの仕様にもとづいてルビのサポートを進めるのかは現時点で明らかではありませんが、W3C版の<rb>と<rtc>、WHATWG版での複雑なルビの表現方法を参考情報として記載します。

W3C版の<rb>は親文字の範囲を明示的に指定するもので、たとえば熟語ルビやインラインルビを表すのに使うことができます。

熟語ルビは親文字それぞれへのルビの対応付けと単語全体のまとまりの2つを考慮した、モノルビともグループルビとも異なるルビの振り方で、以下のように表すことができます。

このようにマークアップされた場合、ブラウザはモノルビと同様「凝」と「視」の間で折り返し表示をすることができますが、折り返しが起きず一行に表示される場合は、グループルビのように熟語全体へルビを均等配置したり、ルビ文字列が長い場合は熟語全体の字間を広げるといったように、1つの単語として読みやすくなるような表示を行うこともできます。

また、ルビを実装していないブラウザでは、この例は凝視（ぎょうし）と表示されます。モノルビで振ると

とするしかなく、ルビを実装していないブラウザでは凝（ぎょう）視（し）となり、単語としてのまとまりが失われて読み辛くなってしまいます。

ルビを実装しているブラウザであっても、親文字の表示サイズが小さい場合など、場合によっては肩付きではなく地の文と同じ大きさで、括弧を付けるなどしてルビを表示してほしい場合があるかもしれません。この地の文へインライン化されたルビをインラインルビと呼び、CSS3で策定中のruby-position:inlineを使うことで実現できるようになる予定です。
ルビを実装していないブラウザやインラインルビが使われる場合、熟語を適切にまとまりとしてマークアップしているかどうかで、文の読みやすさは変わってくることになります。

<rtc>はXHTML 1.1のRuby Annotationの仕様を取り込んだもので、両側ルビのような複雑なルビの表現に使えます。
XHTML 1.1のRuby Annotationが2001年に勧告されて以来10年以上が経ちますが、<rtc>をはじめ複雑な形式のルビを実装したブラウザは存在しません。

<rtc>を使うことで、たとえば

のように、「上手」という親文字の左右または上下へ、（じょう/ず）、（jou/zu）という2つのルビを付けることができます。

一方WHATWG版の仕様では<rtc>と<rb>は存在せず、かわりに<ruby>タグを1段階まで入れ子にして書くことができ、両側ルビの表現に使えるとされています。たとえば

藤原<ruby><ruby>定家<rt>さだいえ</rt></ruby><rt>ていか</rt></ruby>

のように<ruby>を入れ子にすることで、1つの親文字の両側へルビをつける両側ルビを表現できるとされています。
この方法には幾つか欠点があり、外側の<ruby>の<rt>は、内側の<ruby>全体としか対応付けられません。

<ruby><ruby>上<rt>じょう</rt>手<rt>ず</rt></ruby><rt>jouzu</rt></ruby>

かな表記の方は「上（じょう）手（ず）」とモノルビでふれるのに対し、ローマ字表記の方は「上手（jouzu）」とグループルビでしかルビをふれないということです。

WHATWG版では、熟語ルビを実現する方法はありません。

一覧に戻る