ルビを振るには。

CSSの小技として、CSSを用いてルビを振る方法です。

平成20年 4月11日、全面改訂しました。

XHTML 1.1(HTMLの最新の公式規格ですが、現行推奨規格にはなっておりません)にはルビ系要素が追加され、文書中にルビ付きのフレーズを表示させる事が出来るようになりました。

しかし、インターネットエクスプローラ以外ではルビの表示を実装しておらず、わざわざスタイルシートを用いて表示スタイルを指定しなければなりません。

一方、現行推奨規格であるXHTML 1.0以前にはルビ系要素はありませんが、こちらもスタイルシートを活用して擬似的にルビを表示させる事は可能です。

勿論、実際にルビをつけるには、XHTML 1.1文書型を撰んでルビ系要素を用いるのが最も真っ当なやり方である事は言うまでもありません。

ここでは、その方法を解説します。

実際にルビを付ける方法
- 1. HTML側で、ルビをマークアップする
  - XHTML 1.1のルビ系要素を用いる場合
  - XHTML 1.1以外の文書型を用いる場合(擬似的にルビをマークアップする方法)
- 2. CSS側で、ルビをルビらしく表示するスタイルを当てる
  - ポジショニングを用いてルビを表示させる方法
  - インラインテーブルを用いた方法
実際にはどちらの方法が良いのか？

実際にルビを付ける方法。

1. HTML側で、ルビをマークアップする。

XHTML 1.1のルビ系要素を用いる場合。

▲記事先頭
△前項目
▽次項目

ルビを振りたいのであれば、XHTML 1.1文書型または現在策定中のHTML 5を撰んでルビ系要素としてマークアップするのが、当たり前ですが唯一真っ当なやり方です。

具体例として、XHTML 1.1で堀北(ほりきた)真希の「堀北」に平仮名で「ほりきた」と言うルビを振る場合には、以下のようにマークアップします。

XHTML 1.1でのルビ系要素マークアップ例を読み飛ばす

<ruby><rb>堀北</rb><rp>(</rp><rt>ほりきた</rt><rp>)</rp></ruby>真希

XHTML 1.1でのルビ系要素マークアップ例はここまで

つまり、

ルビを振りたいテキストを<rb>要素としてマークアップし、
ルビに対応出来ない環境で、ルビの代わりに使う括弧(二箇所)を<rp>要素としてマークアップし、
ルビを<rt>要素としてマークアップし、
最後に関連するテキスト全体を<ruby>要素としてマークアップします。

現在策定中のHTML 5では、ルビの対象テキストを<rb>要素としない事としております。

XHTML 1.1以外の文書型を用いる場合(擬似的にルビをマークアップする方法)。

▲記事先頭
△前項目
▽次項目

XHTML 1.1以外の文書型の場合、ルビ系要素は定義されておらず、従って擬似的にマークアップする必要があります。

そこまでしてルビを付ける必要があるのかと言う議論はここでは致しません。

この場合、適切な要素がそもそも存在しないので、要素などを多用する事となるでしょう。

例えば、堀北(ほりきた)真希の「堀北」に平仮名で「ほりきた」と言うルビを振る場合には、以下のようにマークアップします。

擬似的なルビのマークアップ例を読み飛ばす

<span class="ruby"><span class="rb">堀北</span><small class="rp">(</small><small class="rt">ほりきた</small><small class="rp">)</small></span>真希

ここでは、ルビテキストとルビに対応していない環境で代わりに用いる括弧を要素としてマークアップしております。

擬似的なルビのマークアップ例はここまで

ルビを振りたいテキストを要素としてマークアップし、
ルビに対応出来ない環境で、ルビの代わりに使う括弧(二箇所)を要素としてマークアップし、
ルビを要素としてマークアップし、
最後に関連するテキスト全体を要素としてマークアップします。

実は最新のCSS仕様に従ったブラウザなら、もっとスマートなマークアップでもルビを実現出来るのですが、生憎インターネットエクスプローラを含めた大半のブラウザが未対応となっております。これについては別文書に書いておきましたのでご覧下さい。

2. CSS側で、ルビをルビらしく表示するスタイルを当てる。

▲記事先頭
△前項目
▽次項目

ここではポジショニングを用いた方法と、インラインテーブルを用いた方法を解説します。

ユーザエージェントのCSSサポート状況を考えると、インラインテーブルの方が良いと思われます。但し、XHTML 1.1文書型が使えないなどの理由で擬似的にマークアップした場合にはポジショニングの方がルビ表示出来る環境が増えて良いと思われます。
また、現在ではインラインテーブルを用いた方法も考えられますが、ファイヤーフォックス 2まででのサポートはありません。

ポジショニングを用いてルビを表示させる方法。

▲記事先頭
△前項目
▽次項目

ポジショニングを用いてルビを振る場合、実はルビを振りたいテキストには特にスタイルを指定する必要はありません。

ですから、擬似的にマークアップした場合には要素としてのマークアップは要らなくなります(XHTML 1.1のルビ系要素では文法上<rb>要素は必須なので省略出来ません)。

また、この方法は、オペラ 6.x～7.xでもそれなりに表示されると言う利点もあります。

特に擬似的にマークアップした場合、インターネットエクスプローラでもルビ表示したいのであればこちらの方法しか使えません。

但し、ルビが短すぎる場合にはルビが左に偏ってしまったり、ルビが長過ぎる場合にはルビを振る対象テキストよりはみ出してしまうなど、表示が余り綺麗でないと言う問題もあります。

また、オペラでは最新の9.xでさえ、バグでルビが正しく表示されない場合があります。

ですので、インラインテーブルに対応しているユーザエージェントが増えている今日では、XHTML 1.1が使えない場合以外では余り好ましくはないかも知れません。

具体的には以下のようになるでしょう。

XHTML 1.1以外でルビ系要素を用いていない場合(擬似的にマークアップした場合)には、各要素セレクタの前に「.」を付けて下さい(例：「ruby」を「.ruby」に変更)。

ポジショニングを用いてルビを実現するCSS記述例を読み飛ばす

ruby {
    display: inline;
    position: relative;
    top: 0;
    bottom: 0;
    padding: 0;
    line-height: 1em;
    }

rp {
    display: none;
    }

rt {
    display: inline;
    position: absolute;
    top: -1em;
    left: 0;
    font-size: 50%;
    line-height: 1em;
    white-space: nowrap;
    text-indent: 0;
    }

a:link rt,
a:visited rt {
    text-decoration: none;
    }

ポジショニングを用いてルビを実現するCSSの記述例はここまで

原理としては、ルビとなる文字列がルビが掛かる文字列の真上に配置されるようにするだけです。

これを実現するには、最上位となる<ruby>要素の左上をポジショニングの基準点とする事で実現させます。

つまり、<ruby>要素に「position: relative;」プロパティを用いて、下位要素のポジショニングの基準点を要素の左上に移してしまいます。

後は、以下のように設定して行きます。

ルビの掛かる文字列(<ruby>要素直下の文字列)

特に改めてスタイルを当てる必要は無いでしょう。

ルビとなる文字列(<rt>要素)

表示位置を、基準点(<ruby>要素左上端)から見て少し上に設定します。
文字の大きさを50%くらいに小さくします。
行端に来ても折返しません。折返すと、ルビが掛かるテキスト行に重なってしまうからです(もっと巧い対策があればいいのですが…)。
親要素のtext-indentは継承しません。

また、<a>要素の内容となっている文字列にルビが付いている場合、このままではルビにもアンカーの下線が引かれるので、これを消してしまいます。

ルビ非対応環境向けの囲み記号(<rp>要素)

非表示にします。

インラインテーブルを用いた方法。

▲記事先頭
△前項目
▽次項目

インラインテーブルは現在のところ、ファイヤーフォックスなどのもじら系ブラウザ, オペラ 8.x以降及びサファリなどで対応しております。

この方法だとかなり綺麗に表示されます。

また、XHTML 1.1を撰んでルビ関連のテキストをルビ系要素としてマークアップしている場合、インターネットエクスプローラウィンドウズ版5.5以降ではCSSのプロパティは対応していないものの、ルビ系要素のサポートに依り問題なくルビが表示されます。

XHTML 1.1を撰ばずに擬似的にマークアップした場合、インターネットエクスプローラウィンドウズ版5.5以降ではルビなしの表示となります。

但し、もじら系ブラウザではルビを振った箇所が他の箇所より上に僅かにずれて表示される事があります。

また、オペラでは 8.x以降で対応しているとは言え、8.xでは表示が崩れる事があるようです。

それでも、XHTML 1.1を撰んでいるのであれば、こちらの方が宜しいかと思われます。

具体的には以下のようになるでしょう。

XHTML 1.1以外でルビ系要素を用いていない場合(擬似的にマークアップした場合)には、各要素セレクタの前に「.」を付けて下さい(例：「ruby」を「.ruby」に変更)。

インラインテーブルを用いてルビを実現するCSS記述例を読み飛ばす

ruby {
    display: inline-table;
    margin: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
    text-indent: 0;
    vertical-align: text-bottom;
    }

rb {
    display: table-row;
    margin: 0;
    padding: 0;
    border: none;
    line-height: 100%;
    text-align: center;
    }

rt, a:link rt, a:visited rt {
    display: table-header-group;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    font-size: 50%;
    line-height: 100%;
    text-decoration: none;
    text-align: center;
    }

rp {
    display: none;
    }