CSS3とHTML5でどう違う?  WebKit最新開発版で試す「ルビ」

海上忍
2010-11-29 19:27:20
  • このエントリーをはてなブックマークに追加

HTML5のルビとXHTML 1.1のルビ

 本連載のテーマであるEPUBは、規格の成立経緯と仕様の両面において、ウェブと切り離しては考えにくい性質を持っています。基本的にはXHTMLとCSSでコンテンツを記述するため、iOSに搭載のEPUBビューワ「iBooks」のように、エンジン部分をウェブブラウザと共有している例も少なくありません。ウェブの仕様およびその実装であるウェブブラウザとEPUBは不可分の関係、ということもできるでしょう。

 そしてウェブの仕様は、現在「HTML5」へと歩を進めつつあります。正式な規格化(W3Cによる勧告)は2012年頃と先の話ではありますが、すでに最終草案(ラストコール)への工程表が提出されていますから、仕様としてはほぼ固まっていると見ることができます。その流れを見越し、主要なウェブブラウザがHTML5の実装を開始していることは、ご存じと思います。

 振り仮名として使う「ルビ」も、HTML5で規定されています。現段階では範囲を指定するrubyと、rt(ルビテキスト)、rp(ルビ括弧)という3つの要素を利用し、簡潔にルビを振ることができます。以下の記述例をSafari 5(iOS 4.2に収録のSafari(モバイルSafari)は、rubyの実装に問題があるWebKitが使用されているようで、iPhone、iPadとも意図したデザインでは表示されません)で見れば、「焦燥」の「焦」のうえに「しょう」、「燥」のうえに「そう」とルビが振られるはずです。


リスト1:HTML5のルビ記述例

<ruby>
焦<rt>しょう</rt>
躁<rt>そう</rt>
<ruby>

 一方、XHTMLのモジュールとして定義された「Ruby Annotation」が存在します。XHTML 1.1では、ルビが振られる側のテキスト(ベーステキスト、rbタグ)とルビ(ルビテキスト、rtタグ)が明示され、それぞれ専用のコンテナ(rbcとrtc)でくくられるという、対応関係の明示があります。これを言い換えれば、HTML5にはrbc、rtcタグに相当する定義がないため、XHTML 1.1ほど細かくはベーステキストとルビテキストの関連付けを行えない、ということになります。


リスト2:XHTML 1.1のルビ記述例

<ruby>
<rbc>
<rb>焦</rb>
<rb>躁</rb>
</rbc>
<rtc>
<rt>しょう</rt>
<rt>そう</rt>
</rtc>
</ruby>
最新版のWebKit Nightly Build(CSS3の縦書き対応)で表示したHTML5のルビ 最新版のWebKit Nightly Build(CSS3の縦書き対応)で表示したHTML5のルビ

HTML5のルビは単純明快

  • 新着記事
  • 特集
  • ブログ