Safariの振り仮名実装

    後藤大地  [2010/01/25]

    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つの仕組みが綺麗に統合されることが望まれるという説明がある。

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン