IE8が対応したCSS 3の機能:ボックスサイズの算出とルビ関連の機能

エ・ビスコム・テック・ラボ
2009-06-19 14:11:01
  • このエントリーをはてなブックマークに追加

ルビに関する機能

 IE8はCSS 3のルビ(ふりがな)に関する以下のプロパティをサポートしている。これらはIEがバージョン5の時代からサポートしていたものだ。元々はIEの独自拡張だったが、現在はCSS 3の勧告候補(Candidate Recommendation)「Ruby Module」に採用されていることから、IE8においても「-ms-」をつけずに利用する。

IE8が対応しているCSS 3のルビに関する機能
プロパティ昨日
ruby-alignルビとルビをつけたテキストの揃え方を指定する
ruby-positionルビの表示位置を指定する
ruby-overhangテキストからはみ出したルビの表示方法を指定する

 ただし、ruby-positionとruby-overhangプロパティについては、CSS 3の勧告候補で定義された値とIEがサポートしている値が異なっており、規格に従って利用することができない状態となっている。

 ruby-alignプロパティについては、IEがサポートした値がCSS 3の勧告候補にも採用されており、次のように指定することが可能だ。サンプル2では、左のテキストのルビは中央揃えで、右のテキストのルビは均等割りで揃えるように指定している。

サンプル2 サンプル2
#text01{
ruby-align: center;
}

#text02{
ruby-align: distribute-space;
}

百舌
もず



百舌
もず

ブラウザで表示を確認する

 次回は、IE8が対応しているCSS 3の改行や行揃え、オーバーフローに関する機能を紹介する。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]