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

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

「縦中横」をテスト

 WebKitはオープンソースプロジェクトですので、開発状況は基本的に外部にも公開されています。Appleから提供されるコードがソースリポジトリに反映されるタイミングは、必ずしもジャストインタイムではない(Safariが公開されるタイミングに影響される)ものの、前回お伝えした「CSS Writing Modes Module Level 3」にある縦書き関連の実装は、さきほどのテストでも明らかなように、随時反映されています。

 こちらのタイムラインを見てみると、縦書き関連の実装はかなりの勢いで進められていることがわかります。縦書きで使用するライティング・モードや、欧文など文字の向きに関する実装は、ひと通り手がつけられていると見ていいでしょう。

 過去にさかのぼって調べたところ、「text-combine」プロパティのWebKitでの実装として、「-webkit-text-combine」が用意されていることがわかりました。

 「CSS Writing Modes Module Level 3」のEditor's Draftによれば、text-combineプロパティで「upright」を指定すると、縦組みの文書の中で横組みする「縦中横(たてちゅうよこ)」を実現できるようですが……まだ機能が有効ではないのか、変化はありませんでした(リスト3)。なお、利用したWebKitのリビジョンは「r72487」で、11月24日時点の最新版です。

 今回はかなりの駆け足でしたが、引き続きWebKitの最新動向をウォッチしていこうと思います。ご期待ください。


リスト2:text-combineを使わない「縦中横」

<html>
<style>
html { -webkit-writing-mode: vertical-rl;
}
span.tcy {
  -webkit-writing-mode: horizontal-tb;
  display: inline-block;
  line-height: 1em;
  text-align: center;
  text-indent: 0;
}
</style>
<body>
「22」と「24」の部分を縦中横に<br>
しています(「11」は全角でそのまま)。
<h1>
平成22年11月24日<br/>
平成<span class="tcy">22</span>年11月<span class="tcy">24</span>日
</h1>
</body>
</html>


リスト3:リスト2の改変部分

span.tcy {
  -webkit-text-combine: upright;
  ・
  ・

青空文庫のときと同じ「-webkit-writing-mode」を使う方法では、意図どおり縦中横を表示できました 青空文庫のときと同じ「-webkit-writing-mode」を使う方法では、意図どおり縦中横を表示できました
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]