The WebKit Open Source Project

Surfin’ Safari - Blog Archive ≫ Ruby Rendering in WebKitにおいて、WebKitで実装されているルビ機能についてと、今後の課題が簡潔に紹介されている。ルビは対象となる文字または文字列のまわりに読み方や説明を追加する表記法。日本語では漢字に対して読み方を記載する方法として活用されているほか、対象に対して別の読みを割り当てたり別の言葉をオーバーラップさせて独特の雰囲気を生み出すためのテクニックとして小説や漫画で利用されている。

ルビ機能はXHTML 1.1でモジュールとして導入されたほか、現在策定中のHTML5で要素として策定が進められている。ルビのより高度なレンダリングについてはCSS3においてCSS3 Ruby Moduleとしても策定が進められている。現段階でサポートしているのはIEと開発版のChrome、それにナイトリービルド版のWebKit (Safari)となる。XHTML 1.1ルビモジュールベースの表記であればFirefoxはエクステンションをインストールすることで対応可能。

ルビの利用例 WebKit Nightly Build / Mac OS X Snow Leopard	ルビの利用例 Firefox 3.6 / FreeBSD 9-CURRENT - ルビに対応していないためそのままテキストがレンダリングされている

ルビの利用例 WebKit Nightly Build / Mac OS X Snow Leopar

HTML5で策定が進められているルビはruby、rt、rpの3つの要素で構成されている。ruby要素で全体をまとめ、ルビテキストはrt要素で表現する。rpはルビ対応ブラウザでは表示対象からはずされるが、ルビに対応していないブラウザではそのままテキストとして表示される。ルビに対応していないブラウザでルビ部分を括弧で囲んで表記するために用いられる。

<ruby>ベーステキスト<rp> (</rp><rt>ルビ</rt><rp>) </rp></ruby>

Ruby Rendering in WebKitでは、こうした基本的な機能の実装に加え、これからは文字スペーシングとポジションという2つについて考慮していく必要があると簡単にまとめている。たとえばルビが綺麗に表示されるようにスペーシングを考慮する必要があるほか、どこにルビで表示するかというポジション指定を考慮する必要があるとしている。日本語では横書きの場合には振り仮名は上部に記述することが多いが、中国語では横書きでも縦書きのルビを振ることがある。現在のブラウザ実装は縦書きを簡単に扱うことができないが、縦書きがより柔軟に扱えるようになってくれば、ルビにおけるポジション指定もより重要になってくる。

Ruby Rendering in WebKitではHTML5とCSS3 Ruby Moduleの違いについても簡単に説明している。HTML5では複数のrt要素を指定できるが、CSS3 Ruby Moduleはそうした設計になっていない。将来、この2つの仕組みが綺麗に統合されることが望まれるという説明がある。