WebKit最新開発版に見るCSS3の「縦書き」

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

 論理プロパティでの実現という課題を残しつつも、CSS3でのサポートおよびEPUB3.0でのサポートが決まった「縦書き」ですが、そろそろビューワレベルでの対応(実装)も開始されました。その先陣を切るのが、SafariやGoogle Chromeに採用されているHTMLレンダリングエンジン「WebKit」です。

 WebKitのブログ「Surfin' Safari」では特に触れられていませんが、先日公開された最新開発版(Nightly Build)から、縦書きのサポートが開始されています。まだ実装の初期段階ではありますが、EPUBの描画機能とは切っても切れないHTMLレンダリングエンジン分野における最新動向ということもあり、本連載で検証してみたいと思います。

CSS3の縦書き対応で最先端を行く「WebKit」

 最初のテストは、とにかく「横書きを縦書きで表示する」ことにしました。H1タグなど見出し部分も含めて、全文を縦書き表示することで、実装がどこまで進んでいるかを見るわけです。

 テストの素材には、青空文庫で公開中の梶井基次郎著「檸檬」を使用しました。公開されているXHTML版にスタイルシートはなく、横/縦の組方向も示されていませんが、ダウンロードしたXHTMLをテキストエディタで開き、DIVタグで「-webkit-writing-mode: vertical-lr」をスタイルとして本文全体を囲むことで、縦書き化しています。


リスト1:青空文庫から入手したXHTMLファイルの改変部分

 ・
 ・
<body>
<div style="-webkit-writing-mode: vertical-rl">
<h1 class="title">檸檬</h1>
 ・
 ・
</div>

 結果ですが、まずまず期待どおりといえるでしょう。レンダリングは高速とは言い難く、MacBook Pro 2.4GHzでファイルオープンから表示まで約4秒を要したものの(現行のSafari 5.0.2では、横書きはほぼ一瞬)、DIVタグを加えた以外はすべて元のままの状態で縦書き表示に成功しました。H1、H2やULなどのタグも正常に処理され、横書きでは水平線のHRタグも垂直線を描きます。

 問題、というよりも課題があるとすれば、表示用フォントの選択でしょうか。普段はプロポーショナルフォントに「Tokyo-P」を使用しているのですが、縦書きにすると英字と和字の間で中心線がズレてしまいました。ヒラギノ角ゴ Proではそのような現象は発生しませんでしたが、今度は横書きのページに遷移すると、使い慣れたTokyo-Pが恋しく思われます。本格的にブラウザで縦書きをサポートするのならば、縦書き時のフォントを指定するためのオプションが欲しいところです。

 文字列の範囲指定やページ内検索など、一部機能は開発途上と思われます。文字列の範囲指定は、思いどおり画面に反映されないうえ、ルビ部分のみ選択することができません。ページ内検索は、キーワードを用いた検索そのものは可能なものの、ヒットした位置とはまったく異なる部分が表示されるなど、実用になりません。

 縦書き対応電子書籍ビューワとしての機能をWebKit開発版に求めるのは誤りですが、操作性も気になりました。縦書き時にSPACEキーを押し左方向へのスクロールを期待しても、ふだんと同じく縦方向のスクロールでした。

WebKit r72146で表示した青空文庫(梶井基次郎の「檸檬」、フォントはヒラギノ角ゴ Pro) WebKit r72146で表示した青空文庫(梶井基次郎の「檸檬」、フォントはヒラギノ角ゴ Pro) ※クリックすると拡大します
ルビを選択しようとすると、意図しない範囲が選択されてしまう ルビを選択しようとすると、意図しない範囲が選択されてしまう ※クリックすると拡大します
「vertical-lr」に変更したところ、左から右への縦書きで表示された 「vertical-lr」に変更したところ、左から右への縦書きで表示された ※クリックすると拡大します

「縦中横」をテスト

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