HTML 5に於けるルビテスト。

その前に…。

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

その前に、スタイルシートをどのようにするかを決めておきます。

現在、CSSでルビを実現するには、

• ポジショニングを用いた方法
• インラインテーブルを用いた方法
• インラインブロックを用いた方法

の三つが考えられます。

HTML 5の仕様を考慮すると、ポジショニングを用いるかインラインブロックを用いると無駄なマークアップが不要となり簡単ですので、今回はポジショニングを採用したいと思います。

• ただし、ポジショニングに依る方法はルビやルビ対象テキストが長くなり過ぎると読み難くなる事やオペラではバグのため表示位置がずれる場合がある事と言った欠点があります。
• 尚、インラインブロックはファイヤーフォックス 2までではサポートがないため、今回は見送りたいと思います。

HTMLでのマークアップ。

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

HTML 5に於ける<ruby>要素は以下のようになります。

<ruby>要素

以下の組が一組以上

1. ルビ対象となるフレーズ内容
2. ルビテキストである<rt>要素

または

1. ルビ対象となるフレーズ内容
2. ルビ非対応環境向けの区切り符号である<rp>要素
3. ルビテキストである<rt>要素
4. ルビ非対応環境向けの区切り符号である<rp>要素

ここで、フレーズ内容と言う耳慣れない言葉が出てきましたが、これはHTML 4.01及びXHTMLに於けるインライン要素に近いものと思えば良いでしょう。いわゆるCDATAなどと違い、フレーズ内容と見なされる従来のインライン要素としてマークアップする事が許されていると考えられます。

現在のところ、HTML 5に於いては<ruby>要素にはルビ対象となる<rb>要素は定義されておりませんが、その代わりルビ対象テキストとしてフレーズ内容を入れる事が出来ます。

つまり、以下のようにします。

• <ruby>堀北真希<rp>(</rp><rt>ほりきた まき</rt><rp>)</rp></ruby>は清瀬市出身のアイドル女優である。

• 埼玉県比企郡<ruby>滑川町<rp>(</rp><rt>なめがわまち</rt><rp>)</rp></ruby>は「なめりかわ」とは読まない。

CSSでのスタイル定義。

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

一方、スタイルシートについては、以下のルビ専用スタイルシートcss_1_ruby.cssに於いて、定義しておき、それをメインのスタイルシートの冒頭から @import "css_1_ruby.css" screen, projection; でインポートしておきます。

• 何故わざわざメインのスタイルシートからインポートするのかと言うと、インターネットエクスプローラでのルビ処理に於いて悪影響が予想されるからです。インターネットエクスプローラではメディア型を複数持つ@import規則を正常に取扱えないので、インポートされずに済むと言う訳です。

• 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記述例はここまで

実際に表示させてみると。

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