ルビを振るには・続篇。～よりスマートなマークアップで～

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

以下は対応しているブラウザが限られております。特にインターネットエクスプローラでは現在のところ対応する事は不可能です。

XHTML 1.1以前の仕様にはルビ系要素は定義されておらず、従ってこれらの文書型の元で文書を作成する場合には擬似的な方法でルビを実現する事になるでしょう。

今日では、<ruby>要素が使えるHTML 5も勧告に向けて策定が進んでおります。HTML 5は今後仕様の変更の恐れもありますが、それを承知した上で自己責任で利用するのであれば使っても良いでしょう。

ですが、その方法は余りにも面倒な代物であり、マークアップ後も大変読み難いものとなってしまいます。

実は、最新のCSS仕様に従ったブラウザであれば、もっとスマートな記述でルビを振る事も可能です。

この記述は正規の<ruby>要素より遙かにスマートなものとなりますが、残念な事に最もシェアの高いインターネットエクスプローラがそれを実現出来ず、結局絵に描いた餅に近い状況となっております。

ですが、将来対応するブラウザが増えて行く事でしょうから参考までに書いておきたいと思います。

ルビは属性で記述する
実際のHTMLでのマークアップ
CSSでのスタイル定義
実際にやってみると
やってみた感想
参考

ルビは属性で記述する。

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

<ruby>要素の内容モデルをご覧になるとお分かりいただけると思いますが、かなり複雑です。

これはルビを通常のテキストと一緒に内容モデルに組込んでいる事に依るものでしょう。

そもそもルビは通常のテキストと重複するものですので(意図的にそうでない表現のために用いられる事もありますが)、内容として記述するのは実は好ましくないのかも知れません。

つまり、ルビは要素内容ではなく属性で記述するのがスマートな方法と言えるかも知れません。

最も、ルビを記述する属性と言うのは存在しませんので、補助的な情報を記述する属性であるtitle属性辺りを便宜上使う事になるでしょう。

あとは、その属性値をレンダリング出来るようにすれば良いのです。

インターネットエクスプローラでは現時点では無理ですが、ファイヤーフォックス 3以降, オペラ 7.5以降或いは最新のサファリでは display: inline-block プロパティが使えますので、これを用いる事でtitle属性で記述したルビをテキストの上か下に表示させる事が可能になります。

インターネットエクスプローラではルビ無しのテキストとして表示されるようで、悪影響は無いようです。
ファイヤーフォックス 2では display: inline-block プロパティをインラインと認識するようです。

シェアとしては過半数にも満たないのですが、将来は対応出来るブラウザも増えて行く事でしょうから、ここで紹介したいと思います。

display: inline-block プロパティはCSS第二水準第一改訂版(CSS 2.1)にて新規に追加されるもので、従って旧式のブラウザではサポートは期待出来ません。但し、オペラでは7.5の頃には既にサポートされており、だからこそ第一改訂版から追加される事になったのかも知れません。

実際のHTMLでのマークアップ。

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

まず、HTMLで以下のようにマークアップします。

<abbr class="withRuby" title="ほりきたまき">堀北真希</abbr>は<abbr class="withRuby" title="きよせし">清瀬市</abbr>出身のアイドル女優である。

ルビ付きテキストのクラスとして withRuby クラス名を与え、title属性で振るべきルビを記述します。

クラス名に関しては、もっと別のものでも良いかも知れません。
今回要素としては、略語と見なして<abbr>要素としておりますが、他の意味を持ったインライン要素(<cite>要素など)にルビを振りたい場合にはわざわざ新たに<abbr class="withRuby">要素とせず、当該要素のclass属性値に withRuby を追加し、ルビをtitle属性で追加すれば良いでしょう(既にtitle属性を用いている場合のみ改めて内容を<abbr class="withRuby">とすれば良いでしょう)。

CSSでのスタイル定義。

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

続いて、CSSでは以下のようにします。

.withRuby {
    display: inline-block;
    position: relative;
    top: -1em;
    left: 0;
    margin: 0;
    padding: 0;
    border: none;
    white-space: nowrap;
    text-indent: 0;
    line-height: 100%;
    vertical-align: text-bottom;
    text-align: center;
    text-decoration: none;
    }

.withRuby:after {
    display: block;
    margin: -3em 0 0;
    padding: 0;
    border: none;
    white-space: nowrap;
    font: inherit;
    font-size: 50%;
    line-height: 100%;
    text-decoration: none;
    text-align: center;
    content: attr(title);
    }

つまり、ルビを振られるべき要素内容の直後にルビを記述するようにしていると言う訳です。

実は直前でも良いのですが、インラインブロックをサポートしていないファイヤーフォックス 2以前ではインライン要素風に表示されるので後ろにルビが小さく並ぶ方が自然かと思われます。
ここではインラインテーブルは使えません。インラインテーブルにする場合、全体に対してdisplay: inline-table プロパティを与えますが、ルビを振る対象となるテキストに対してそれが適用されてしまうからです(ルビを振る対象となるテキストに対してはdisplay: table-row プロパティを与える必要がある)。

勿論、実際にはmarginプロパティで上にずらして表示させますが、そのために.withRuby:after擬似要素セレクタにはdisplay: block プロパティを与えてやります(インライン表示形式では上下のマージンを変更出来ないため)。

尚、上マージンは三文字分としておりますが、これはルビの大きさを通常の文字の50%つまり、半文字分とした事で、上の適正な位置に表示させるには通常の文字の大きさなら一文字半分、すなわちルビの文字の大きさでは三文字分となるのです。

一方、インラインボックスの表示ですが、ルビの影響で下に伸びてしまうので、ポジショニングで要素全体を一文字分上に引っ張り上げます。

実際にやってみると。

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

これらの結果、実際に対応した環境で表示させると、以下のようになるでしょう(ファイヤーフォックス 3の場合)。

やってみた感想。

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

<ruby>要素或いはそれに見立てたマークアップだとタグが幾つも付くのでマークアップは面倒で間違え易いわ、後で読み難いわと余り良い感じではないのですが、今回解説した方法だと単純に二つの属性を追記するだけですので、記述も<ruby>要素より遙かに単純ですし、文書作成後も大変読み易いのでメンテナンス性が大幅に高まります。

それこそ、下手に<ruby>要素としてマークアップするよりもスマートな方法かも知れません。

ですが、インターネットエクスプローラなどが対応出来ないのが難点でしょう。