目次に戻る

ruby要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  • 下記のセットが1個以上。
    1. 下記のいずれかが1個以上。混在も可。ルビが振られる部分となる。なお、ruby要素の入れ子は一回のみ。
      • ruby要素を子孫に持たないPhrasing content
      • ruby要素を子孫に持たないruby要素。
    2. 上記に続いて、下記のいずれかが1個以上。混在も可。ルビテキスト部分となる。
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのroleが指定可能。
視覚系ブラウザのデフォルトとして期待されるCSS

  ruby {display: ruby;}
視覚系ブラウザにおいて期待されるレンダリング
  • ruby要素の子要素のうち、rt要素でもrp要素でもない子要素のグループは、{display: ruby-base;}の匿名ボックスを構成する。
  • ルビ注釈のレンダリングの詳細は、CSS Ruby Layout Module Level 1を参照。
意味・用法

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

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

アクセシビリティ関連

私見・補足

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

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)

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