writing-mode

作成:
更新:

縦書きに関して、CSS仕様策定の初期段階ではCSS3 Textの一部として議論されていたが、紆余曲折を経てCSS Writing Modes Module Level 3で単独の仕様として作成されることになった。IEが5.5から先行実装されていたものの、標準仕様がなかなか固まらないためにFirefoxが実装できない状況だったが、Firefox41でついに安定版で使用できるようになった。末時点で、Windows 10上で動作する主要ブラウザーは、単純に上から下にテキストフローを変化させるという基本的なサポートを完了している状況にある。

仕様の概況

SVG 1.1において、当時のwriting-modeプロパティを取り込む形で値が存在する(旧プロパティ)が、CSS3 Writing Modesでは値が変更され(新プロパティ)、SVG 1.1文書を例外として古いプロパティ値を非推奨としている。

property IE Edge Firefox Blink WebKit
writing-mode △(*1)(*2)△(*1)
text-orientation ××(*3)△(*1)
text-combine-upright: all; △(*4)△(*1)(*5)
text-combine-upright: digit; △(*4)×(*6)××

縦書きの簡単な例

「新しい朝が来た 希望の朝だ。ABC!?」(defg,123456!?).

対応状況を鑑みて、次のようなコードとした。

<style>
.vertical {
    font-family: "游明朝", "MS 明朝", serif; /* Windows環境しか考えていない */
    height: 16em;
    margin-left: 2em;
    -ms-writing-mode: tb-rl; /* for MS IE11 */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
</style>

<p class="vertical">「新しい朝が来た 希望の朝だ。!?」(abcdefg,123456!?).</p>

縦書きにおける文字の向き

次に、テキストの方向を指定するプロパティtext-orientationについて。これは縦書きにしたときに、文字を立たせる(upright)か、横倒し(sideways)にするのかが選択できる。デフォルトでは混在(mixed)となっているが、既定でどの文字のグリフを立たせ、どの文字を横倒しにするのかはUnicode規格であるUAX #50で定められている(かつてはUTR #50として定められ、"informative"な文書であったが、現在はUnicode規格の一部を形成する文書である。UAXとUTRの違いに関する正確な解説は、About Unicode Technical Reportsを参照)。

「新しい朝が来た 希望の朝だ。ABC!?」(defg,123456!?).

「新しい朝が来た 希望の朝だ。ABC!?」(defg,123456!?).

「新しい朝が来た 希望の朝だ。ABC!?」(defg,123456!?).

「新しい朝が来た 希望の朝だ。ABC!?」(defg,123456!?).

右(ソースでは上)から、mixed, upright, sideways, sideways-rightを指定している。技術的に正確なところは仕様の5.1節を参照してもらうとして、ここではわかりやすさを優先して説明すると、

mixed(混在)
和文は"立たせ"、英文は"横倒し"にする混在モード。
upright(正立)
和文も英文も"立たせ"るモード。
sideways(側転)
和文も英文も"横倒し"にするモード。
sideways-right(右側転)
古い仕様草案との互換性のために、sidewaysと同一に算出される値。

となる。すなわち、2015年12月のCRが互換性のために言及のあるsideways-rightを除けば、実質的にプロパティ値は3つとなる(以前のCR仕様と比べて値が減っている)。

余談だが、EPUB 3.0仕様は付けの仕様を参照してEPUB3プロファイルとしていた。EPUB Content Documents 3.0(日本語訳版)- 3.3.6 CSS Writing Modesを参照。後続仕様であるEPUB 3.1の4.4 プリフィックス付きプロパティも参照のこと。

縦横中

古いプロパティであったり、実装が完全ではなかったりという状況である。なお、プロパティ値digitは現在、Writing Modes Level 4で定義されている。

平成28420日(digit

平成28420日(all

検証に使用したブラウザー

Internet Explorer
Trident/7.0; rv:11.0 バージョン 11.0.22(リリース版)
Edge
Edge/16.16299(リリース版)
Firefox
Firefox/58.0.1(リリース版)
Blink (Vivaldi)
Chrome/64.0.3282.121 Vivaldi/1.95.1077.39 (Developer Build)
WebKit (Otter)
AppleWebKit/602.1 (KHTML, like Gecko) Otter/0.9.94
WebKit (Epiphany)
Safari/604.1 Debian/buildd-unstable (3.24.3-1) Epiphany/3.24.3

仕様書とリファレンス

CSS Writing Modes Level 3 (Editor's Draft) 3.1. Block Flow Direction: the ‘writing-mode’ property
https://drafts.csswg.org/css-writing-modes-3/#block-flow
CSS Writing Modes Level 4 日本語訳(編集者草案)9.1. 縦書き内の横書きの字組み: text-combine-upright プロパティ
https://triple-underscore.github.io/css-writing-modes-ja.html#text-combine-upright
SVG 1.1(第2版)(REC ) 10.7.2 行内進行方向の設定
https://triple-underscore.github.io/SVG11/text.html#SettingInlineProgressionDirection
SVG 2 (Editor's Draft)10.10.1.4. The ‘writing-mode’ property
https://svgwg.org/svg2-draft/text.html#WritingModeProperty
writing-mode - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
text-orientation - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation
text-combine-upright - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/text-combine-upright
Can I use writing-mode ?
http://caniuse.com/#search=writing-mode
Can I use text-orientation ?
https://caniuse.com/#search=text-orientation