目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル
  • 下記のセットが1個以上。
    1. 下記のいずれかが1個以上。混在も可。ルビが振られる部分となる。なお、ruby要素の入れ子は一回のみ。
      • ruby要素を子孫に持たないPhrasing content
      • ruby要素を子孫に持たないruby要素。
    2. 上記に続いて、下記のいずれかが1個以上。混在も可。ルビテキスト部分となる。

W3C : HTML5.3ルビが振られる部分を明示するrb要素複雑ルビのために用いるrtc要素が存在しており、それらを子要素として複雑なルビを構成することが可能であった。

属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのroleが指定可能。
視覚系ブラウザデフォルトとして期待されるCSS

  ruby {
    display: ruby;
  }
  
意味・用法

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

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

アクセシビリティ関連

私見・補足

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

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

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

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

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

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

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

表示確認

ソース1:基本パターン

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

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

ソース2:一文字ごとにルビ、かつ、ルビ未対応ブラウザでも一文字ごとにルビ

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

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

ソース3:二重ルビ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>
  
表示結果3
漢字 (かんじ) (kanji)

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

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

IE6表示のスクリーンショット(表示結果3)
IE6表示:一番目のルビテキストはルビが振られる文字の上方に表示、二番目のルビテキストはルビが振られる文字の後方に括弧書で表示

IE7からIE9も同様。

IE11表示のスクリーンショット(表示結果3)
IE11表示:一番目のルビテキストはルビが振られる文字の後方に表示、二番目のルビテキストはルビが振られる文字の上方に表示

IE10も同様。

ソース4:二重ルビrt要素の二重使用)

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

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

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

二つ目のルビの表示がうまくいかないブラウザも多い。