<ruby>
<ruby> は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。
ルビという言葉は写植者が使用した長さの単位に由来しており、読みやすさ保ったままテキストを新聞用紙に印刷できる最小のサイズを表します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 5 | 12 | 38 | 5 | 18 | 4.2 | |
| その他 | ||||||
| は HTML の要素で、ruby 要素によるルビの表示に対応していないブラウザー向けの代替表示用の括弧を提供するために使用します。それぞれ 1 つの 要素で、注釈の文字列を含む rt 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。 | 5 | 12 | 38 | 5 | 18 | 4.2 |
| は HTML の要素で、ルビによる注釈(振り仮名)のルビテキストの部分を指定します。東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。 要素は常に ruby 要素の中で使用されます。 | 5 | 12 | 38 | 5 | 18 | 4.2 |
注釈 1件
実装メモ
- 入れ子になった `<rt>` 要素が `display: ruby-text` スタイリングの欠落により正しくレンダリングされない。バグ 347597919 を参照してください。
注釈 1件
実装メモ
- 入れ子になった `<rt>` 要素が `display: ruby-text` スタイリングの欠落により正しくレンダリングされない。バグ 265316 を参照してください。
注釈 1件
実装メモ
- 入れ子になった `<rt>` 要素が `display: ruby-text` スタイリングの欠落により正しくレンダリングされない。バグ 347597919 を参照してください。
注釈 1件
実装メモ
- 入れ子になった `<rt>` 要素が `display: ruby-text` スタイリングの欠落により正しくレンダリングされない。バグ 265316 を参照してください。
基本構文
HTML
<ruby><rt>Kanji</rt></ruby>
<ruby>Tokyo</ruby> ライブデモ
実務での使いどころ
-
<ruby> の活用
<ruby> は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。