ブラウザにおける縦書き | 前編縦書き実装の今

ブラウザにおける縦書き前編縦書き実装の今

2015年11月末時点での、縦書きに関するCSSの実装状況とプロパティについてまとめました。まだ実用性は高いとはいえませんが、実験的な実装は、すでに始まっています。まずは仕様をデモを交えておさえましょう。

カテゴリー: HTML/CSS >; CSS仕様

2015年12月17日発行

著者坂巻翔大郎フロントエンド・エンジニア

ブラウザにおける縦書きシリーズの記事一覧

基本的な仕様は変わっていませんが、仕様策定が続いていますので、最新仕様については仕様書もご確認ください。（2017.06.30）

はじめに

本記事では、2015年11月末での、縦書きに関するCSSの実装状況とプロパティについて解説します。また、先日行ったCodeGridのWebアプリケーションのリニューアルでは、記事タイトルやナビゲーションなどで、一部縦書きを利用しています。

縦書きを利用した部分の実装方法と、利用する際の注意点などに関しては、実装を担当した小山田が次回解説します。

2015年は、縦書きに関する実装が各ブラウザで進み、縦書きWeb普及委員会や縦書きWebデザインアワード - 縦書きWeb普及委員会といったコンテンツが登場し、2016年はさらに興味を引くものになっていくと思われます。この縦書きに関するCSSについて、本記事を通して理解を深めていきましょう。

縦書きに関連するプロパティとその実装状況

縦書きに関するプロパティは、現在のところ3種類存在します。

writing-modeプロパティ: 書字方向（横書きや縦書き）を指定する
text-orientationプロパティ: 縦書きの際に各文字を90度回転させる・させないを指定する
text-combine-uprightプロパティ: 縦書きの文章の中で横組みをする縦中横（たてちゅうよこ）を指定する

W3Cの仕様としては、執筆現在、勧告候補（Candidate Recommendation）です*。以下に仕様の執筆時点の勧告候補を示します。

CSS Writing Modes Module Level 3 （W3C Candidate Recommendation, 20 March 2014）

*注：最新仕様

記事の配信日（2015年12月17日）直前の2015年12月15日に、勧告候補の新しいバージョンが公開されました。約1年ぶりの更新です。この最新仕様の差分内容については、次回お伝えする予定です。

これらのプロパティの実装状況（執筆現在）は、次の通りです。

各ブラウザの実装状況がかなり異なるのがわかります。条件付きではありますが、Chromeは他のブラウザに比べて実装が進んでいるようには思えます。

どのブラウザもまだ接頭辞が必要であったり、実装されていても仕様が古い段階のものであったりと、現在のところでは自由に使える仕様とは言えません。

プロパティ名	Chrome	Safari	Firefox	Edge	IE
`writing-mode`	△	△	◯	◯	△
`text-orientation`	△	×	◯	×	×
`text-combine-upright`	△	△	×	△	△

△に関しては、プリフィックスが必要であったり、そのままプロパティを指定するだけでは対応できないことを意味します。それに関しては、後述します。×は非対応を表します。

では、3種類、それぞれのプロパティについて解説していきましょう。

writing-modeプロパティ

3.1. ブロックフロー方向： writing-mode プロパティ

writing-modeプロパティは、文字表記の方向（縦横）を指定します。以下の値を指定することができます。

行やブロックが流れる方向を決めます。このプロパティによって、行は水平か垂直に、ブロックの流れる方向は、左向きか右向きになります。

値	説明
`horizontal-tb`（初期値）	横書きとなり、行は上から下へ（top to bottom）
`vertical-rl`	縦書きとなり、行は右から左へ（right to left）
`vertical-lr`	縦書きとなり、行は左から右へ（left to right）
`sideways-rl`	縦書きとなり、行は右から左へ。各行内のテキストは左に倒れる（反時計周りに90度）。
`sideways-lr`	縦書きとなり、行は左から右へ。各行内のテキストは右に倒れる（時計周りに90度）。

それぞれの値がどういう振る舞いをするか、直感的にはわかりづらいと思いますので、値と実際の文字組みの対応を図にしました。

以上を踏まえて、デモでは、テキストの表記方向が異なることを確認することができます。

実装

ブラウザの対応は次のようになっています。

プロパティ名	Chrome	Safari	Firefox	Edge	IE
`writing-mode`	△	△	◯	◯	△

Chromeはv47までは-webkit-の接頭辞が必要です。v48からは不要です。Safariは-webkit-の接頭辞が必要です。また、IEに関しては、独自の実装になっていますので、-ms-writing-mode propertyを参照してください。

実際のデモで見てみましょう。コードは次のようになっています。

/* 縦書きとなり、行は右から左へ */
.vrl {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/* 縦書きとなり、行は左から右へ */
.vlr {
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}
/* 縦書きとなり、行は右から左へ。各行内のテキストは左に倒れる（反時計周りに90度） */
.srl {
  writing-mode: sideways-rl;
}
/* 縦書きとなり、行は左から右へ。各行内のテキストは右に倒れる（時計周りに90度） */
.slr {
  writing-mode: sideways-lr;
}

<div class="vrl">
  <strong>writing-mode: vertical-rl;</strong><br>
  <b>1.The quick brown fox jumps over the lazy dog.</b><br>
  この文章はDummyテキストです。
</div>
<div class="vlr">
  <strong>writing-mode: vertical-lr;</strong><br>
  <b>2.The quick brown fox jumps over the lazy dog.</b><br>
  この文章はDummyテキストです。
</div>
<div class="srl">
  <strong>writing-mode: sideways-rl;</strong><br>
  <b>3.The quick brown fox jumps over the lazy dog.</b><br>
  この文章はDummyテキストです。
</div>
<div class="slr">
  <strong>writing-mode: sideways-lr;</strong><br>
  <b>4.The quick brown fox jumps over the lazy dog.</b><br>
  この文章はDummyテキストです。
</div>

デモを確認しましょう。

Chrome、Safari、Firefoxの安定版では、sideways-rlとsideways-lrが効きません。

Firefox Nightly 45.0a1 (2015-12-06)では、次のように書字方向が指定した通りになっていることが確認できます。

また、table要素に対して、縦書きの指定を行った場合、その表組みの方向も変化します。

<table class="vrl">
  <thead>
    <tr>
      <th>プロパティ</th>
      <th>値</th>
      <th>メモ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>writing-mode</td>
      <td>vertical-rl</td>
      <td>日本語（Japanese）です。</td>
    </tr>
  </tbody>
</table>

<table class="vlr">
  <thead>
    <tr>
      <th>プロパティ</th>
      <th>値</th>
      <th>メモ</th>
    </tr>
<!-- 以下、省略... -->

こちらも同様にChrome、Safari、Firefoxの安定版では、sideways-rlとsideways-lrが効きません。

ただし、筆者がChrome Canary v49で確認したところ、td要素（display:table-cell;）に、writing-mode: vertical-lr;を指定した場合、表示が崩れることがありました。接頭辞が必要なくなり、仕様通りに使えるように思えるときでも注意する必要があります。

text-orientationプロパティ

5.1. テキストの方位法： text-orientation プロパティ

text-orientationプロパティは、縦書き時の文字の向きを指定します。writing-modeプロパティの値がhorizontal-tbの場合、この指定は無視されます。

値	説明
`mixed`（初期値）	縦書きの際に、日本語は正立、英字は横倒し、記号はそれぞれの適切な向きとなり、自動的に配置される*
`upright`	縦書きの際に、すべてのテキストを正立に配置する
`sideways`	縦書きの際に、すべてのテキストを横倒しに配置する

*注：適切な向き

各文字の方向については、UTR #50: Unicode Vertical Text Layoutが参考にされています。フォントに縦書きのグリフがあればそれを使用し、なければ90度回転することもあります。

実装

プロパティ名	Chrome	Safari	Firefox	Edge	IE
`text-orientation`	△	×	◯	×	×

Chromeはv47までは-webkit-の接頭辞が必要です。v48からは不要です。Firefoxは対応していますが、sidewaysはFirefox v44からのサポートです。

では、デモで確認してみましょう。コードは次のようになっています。すべてのテキストにwriting-mode: vertical-rl;が適用され、縦書きになっています。そして各テキスト（div要素）にtext-orientationのそれぞれの値を指定しています。

.to-mixed,.to-upright,.to-sideways {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/* テキストに応じて自動判断 */
.to-mixed {
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
}
/* すべてのテキストを正立 */
.to-upright {
  -webkit-text-orientation: upright;
  text-orientation: upright;
}
/* すべてのテキストを横倒し*/
.to-sideways {
  -webkit-text-orientation: sideways;
  text-orientation: sideways;
}

<div class="to-mixed">
  <strong>text-orientation: mixed;</strong><br>
  <b>1.The quick brown fox jumps over the lazy dog.</b><br>
  「“この文章は”Dummyテキストです。」
</div>
<div class="to-upright">
  <strong>text-orientation: upright;</strong><br>
  <b>2.The quick brown fox jumps over the lazy dog.</b><br>
  「“この文章は”Dummyテキストです。」
</div>
<div class="to-sideways">
  <strong>text-orientation: sideways;</strong><br>
  <b>3.The quick brown fox jumps over the lazy dog.</b><br>
  「“この文章は”Dummyテキストです。」
</div>

結果を確認しましょう。

Firefox Nightly 45.0a1 (2015-12-06)では、次のように文字の向きが指定した通りになっていることが確認できます。

text-combine-uprightプロパティ

9.1. 縦書き内の横書きの字組み： text-combine-upright プロパティ

text-combine-uprightプロパティは、縦書き文書内の数字、記号、漢字などを縦書き中で横組みにするかどうかを指定します。これを縦中横（たてちゅうよこ）と言います。日本語の紙媒体の文字組みには頻繁に見られるものです。

writing-modeプロパティの値がhorizontal-tbの場合、この指定は無視されます。

値	説明
`none`（初期値）	特別な処理は行わない
`all`	縦中横で配置する
`digits <integer>?`	digitsのみの場合は2桁に、digitsのあとに2〜4の整数値が指定された場合は、その桁数以下の数値を縦中横にする。範囲外の場合は無効

実装

プロパティ名	Chrome	Safari	Firefox	Edge	IE
`text-combine-upright`	△	△	×	△	△

Chrome v48以降では、text-combine-uprightがサポートされますが、プロパティ値digitsには非対応のままでした。Safariは、古い仕様である-webkit-text-combineとして実装、プロパティ値digitsには非対応でした。EdgeとIE11に関しては、-ms-text-combine-horizontalを使用します。

デモのコードは次のようになっています。

.vrl {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/* 縦中横に配置する */
.test {
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}
/* 桁数無指定（2桁以下）の数値を縦中横 */
.test2 {
  -ms-text-combine-horizontal: digits;
  text-combine-upright: digits;
}
/* 3桁以下の数値を縦中横 */
.test3 {
  -ms-text-combine-horizontal: digits 3;
  text-combine-upright: digits 3;
}
/* 4桁以下の数値を縦中横 */
.test4 {
  -ms-text-combine-horizontal: digits 4;
  text-combine-upright: digits 4;
}
/* 無効になる */
.test5 {
  -ms-text-combine-horizontal: digits 5;
  text-combine-upright: digits 5;
}

<div class="vrl">
  <strong>text-combine-upright: all;</strong><br>
  <span class="test">1985</span>年<span class="test">12</span>月<span class="test">7</span>日
</div>
<div class="vrl test2">
  <strong>text-combine-upright: digits;</strong><br>
  1985年12月7日「“この文章は”Dummyテキストです。」
</div>
<div class="vrl test3">
  <strong>text-combine-upright: digits 3;</strong><br>
  1985年12月7日「“この文章は”Dummyテキストです。」
</div>
<div class="vrl test4">
  <strong>text-combine-upright: digits 4;</strong><br>
  1985年12月7日「“この文章は”Dummyテキストです。」
</div>
<div class="vrl test5">
  <strong>text-combine-upright: digits 5;（無効）</strong><br>
  1985年12月7日「“この文章は”Dummyテキストです。」
</div>

text-combine-upright: all;が指定された.test内のテキストは、縦中横になり、1文字分の幅に縮められます。

また、.test2のように、プロパティ値にdigitsを利用すれば、文章中に登場する数値をまとめて縦中横にすることができます。

text-combine-uprightのプロパティ値にdigitsのみを指定した場合は2桁以下の数値を縦中横に配置します。digits 3のようにdigitsのあとに2〜4の数値を指定した場合は、指定した桁以下の数値を縦中横に配置します。4よりも大きい値を指定した場合は、その指定が無効になります。

Edge、IE11では、数値が縦中横になっていることを確認できます。

実装はブラウザによって差があります。ですが、それぞれのプロパティがどういった動作をするのかは確認できたかと思います。

まとめ

今回は縦書きに関するプロパティの仕様を、デモを交えて確認してみました。次回は、CodeGridのWebアプリケーションのナビゲーションとして縦書きを実装したケースを小山田が解説します。

また併せて、最新の仕様である2015年12月15日付けの勧告候補についても、今回解説した仕様との差分を中心に触れたいと思います。