概要

カテゴリー

• Flow content
• Phrasing content
• Palpable content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• 下記のセットが1個以上。
  1. 下記のいずれかが1個以上。混在も可。ルビが振られる部分となる。なお、ruby要素の入れ子は一回のみ。
     • ruby要素を子孫に持たないPhrasing content
     • ruby要素を子孫に持たないruby要素。
  2. 上記に続いて、下記のいずれかが1個以上。混在も可。ルビテキスト部分となる。
     • 1個以上のrt要素。
     • 1個のrp要素の直後に続く1個以上のrt要素。それぞれのrt要素の直後には、rp要素を伴う。

属性

• グローバル属性

HTML構文におけるタグの省略

• 省略不可。

WAI-ARIA

• すべてのroleが指定可能。

視覚系ブラウザのデフォルトとして期待されるCSS

  ruby {display: ruby;}
  

視覚系ブラウザにおいて期待されるレンダリング

• ruby要素の子要素のうち、rt要素でもrp要素でもない子要素のグループは、{display: ruby-base;}の匿名ボックスを構成する。
• ルビ注釈のレンダリングの詳細は、CSS Ruby Layout Module Level 1を参照。

意味・用法

ルビ注釈をマークアップする1個以上のPhrasing contentの範囲を与える。

これは主に東アジアの印刷慣例で発音の手引きその他の注釈として用いられるものである。

アクセシビリティ関連

• 未対応ユーザーエージェント向け代替コンテンツ：子孫要素たるrp要素によってルビ注釈未対応ブラウザでの表示を最適化。
• （特にアクセシビリティ支援技術がその読み方を把握してない可能性がある）初出の難読語・固有名詞・専門用語などには読み方をテキストで示すべきである（Techniques for WCAG 2.1 : G120, H62）。
• ユーザーエージェントは、基本的にルビ未対応ブラウザでの表示と同様の順序で文字列を解析するはずなので、マークアップの仕方によっては、日本語の漢字熟語について、文字列をページ内検索する場合、コピー＆ペースト操作をする場合、スクリーンリーダーで読み上げさせる場合、などに支障が出る可能性がある（表示確認のソース２のマークアップの仕方が該当しうる→「漢字」という熟語としてひとまとめで解析されずに、「漢」と「字」という連続していない個別バラバラの文字として解析されてしまう可能性がある）。

私見・補足

その子要素とともにルビ注釈をマークアップする。

HTML文書はテキストをタグで構造化したものなので、逆にいうと、タグを抜いたものが原文ということになる。よって、ruby要素を使うということは、注釈の対象となる語句の後に（括弧つきで）注釈が書いてある状態が原文になるということになる。

とすれば、ありとあらゆる漢字にruby要素でルビをふるというのは、注釈だらけのものが原文になるということなので、普通は考えられないだろう。論文や文学作品などをよみがな付きのフルデータで保存する趣旨のウェブサイトとか、児童・外国人など漢字の習得が不充分な者を対象としたウェブサイトとかぐらいしか考えられない。

したがって、日本語圏での用途としては、通常は、難読漢字によみがなをふるとか、当て字によみがなをふるとか、用語を説明する際によみがなも明確にしておくとか、ルビ形式による特殊な文学的表現とか、誤記載部分に〔原文ママ〕といったルビをふるといった限定的な場合に限られると思われる。

原文に手をつけてしまうことを嫌って、グローバル属性としてのruby属性を要望する意見もあるようだ。実際、XHTML1.1で、ルビを規格化しようとしたときに属性として定義しようという動きもあったようだが、未対応ブラウザで全く表示されないのは望ましくなかろうということで要素として定義された経緯があるようだ。

span要素などのtitle属性かdata-*属性の属性値にルビテキストを入れといて、スタイルシートやスクリプトを駆使してルビとして表示させることは可能と思われるので、擬似ruby属性的なことはやろうと思えばできる（サンプル）。

使い方は、下記の表示確認の最初の２パターンが基本。rb要素があれば、「<ruby><rb>漢</rb><rb>字</rb><rp>(</rp><rt>かん</rt><rt>じ</rt><rp>)</rp></ruby>」というパターンも可能だったのだが。

表示確認

ソース１：基本パターン

  <ruby style="font-size:2em">
    漢字
    <rp>(</rp>
    <rt>かんじ</rt>
    <rp>)</rp>
  </ruby>
  

表示結果１

漢字 ( かんじ )

ルビ注釈未対応ブラウザでの表示：漢字(かんじ)

ソース２：一文字ごとにルビ

  <ruby style="font-size:2em">
    漢<rp>(</rp><rt>かん</rt><rp>)</rp>
    字<rp>(</rp><rt>じ</rt><rp>)</rp>
  </ruby>
  

表示結果２

漢(かん) 字(じ)

ルビ注釈未対応ブラウザでの表示：漢(かん)字(じ)

ソース３：二重ルビ（ruby要素の入れ子）

  <ruby style="font-size:2em">
    <ruby>
      漢字
      <rp>(</rp><rt>かんじ</rt><rp>)</rp>
    </ruby>
    <rp>(</rp><rt lang="ja-Latn">kanji</rt><rp>)</rp>
  </ruby>
  

表示結果３

漢字 (かんじ) (kanji)

ルビ注釈未対応ブラウザでの表示：漢字(かんじ)(kanji)

対応しているブラウザでは、ルビが上二段に表示される場合が多いようだ。

ソース４：二重ルビ（rt要素の二重使用）

  <ruby style="font-size:2em">
    漢字
    <rp>(</rp>
      <rt>かんじ</rt>
    <rp>, </rp>
      <rt lang="ja-Latn">kanji</rt>
    <rp>)</rp>
  </ruby>
  

表示結果４

漢字 ( かんじ , kanji )

ルビ注釈未対応ブラウザでの表示：漢字(かんじ, kanji)

対応しているブラウザでは、ルビが上一段に二つ並列で表示される場合が多いようだ。