ruby要素

ruby要素はテキストにルビやフリガナを指定できる要素です。

フリガナをつけたい要素をruby要素で包み、rt要素を利用してルビをつけます。

<ruby>東京都<rt>とうきょうと</rt></ruby>

このようにマークアップを行うと対応ブラウザでは以下のように表示されます。

東京都とうきょうと

これは2014年2月4日の仕様よりrb要素を用いて以下のように記述することも可能です。

<ruby><rb>東京都</rb><rt>とうきょうと</rt></ruby>

また、次のように1文字づつフリガナを付けることもできますが、フリガナの長さによりテキストのジャンプ率が変わり読みにくくなったり、スクリーンリーダーによってはテキストとフリガナを両方読み上げるのでアクセシビリティ上好ましくないでしょう(ルビの内容のみを読み上げるスクリーンリーダーも存在します)。

<ruby>東<rt>とう</rt>京<rt>きょう</rt>都<rt>と</rt></ruby>

このようにマークアップを行うと対応ブラウザでは以下のように表示されます。

東とう京きょう都と

2014年2月4日の仕様よりrb要素を利用して以下のように指定することも可能になりました。(対応ブラウザは要調査)

<ruby><rb>東</rb><rb>京</rb><rb>都</rb><rt>とう</rt><rt>きょう</rt><rt>と</rt></ruby>

また、rp要素を用いてruby要素に非対応のデバイス向けの記述が可能です。

<ruby>東京都<rp>(</rp><rt>とうきょうと</rt><rp>)</rp></ruby>

上記のようにマークアップを行うと非対応のデバイスでは以下のように表示されます。

東京都(とうきょうと)

2014年2月4日の仕様よりrtc要素で複数のrt要素をグルーピングすることができるようになりました。

たとえば次のように指定した場合、rb要素で指定された『東京』には通常はrt要素で指定した『とうきょう』がルビとして振られますが、英語環境ではrtc要素で指定した『Tokyo』がルビとして出力されます。

<ruby>
	<rb>東京都</rb>
	<rt>とうきょうと</rt>
	<rtc lang="en">
		<rt>Tokyo</rt>
	<rtc>
</ruby>

登録日 : 2013年10月31日最終更新日 : 2014年5月28日

HTMLリファレンス