Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能 デスクトップ モバイル
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+対応 (バージョン) 未対応 注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 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>

ライブデモ

character. furigana

Ruby / rt element in character to furigana shake.

プレビュー全画面表示

Rb and rp. Usage

non-supportbrowser for. providepattern. with rp

プレビュー全画面表示

language. pronouncenotation

Ruby English or Chinese. pronouncenotation to usage.

プレビュー全画面表示

実務での使いどころ

  • <ruby> の活用

    <ruby> は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。