writing-mode

作成:
更新:

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

仕様の概況

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

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

縦書きの簡単な例

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

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

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

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

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

次に、テキストの方向を指定するプロパティtext-orientationについて。これは縦書きにしたときに、文字を立たせる(upright)か、横倒し(sideways)にするのかが選択できる。デフォルトでは混在(mixed)となっているが、既定でどの文字のグリフを立たせ、どの文字を横倒しにするのかはUnicode規格の付属文書UTR #50で定められている(UTRは"informative"な文書であることに注意)。

「新しい朝が来た 希望の朝だ。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仕様は付けの仕様を参照してEPUB3プロファイルとしている。EPUB Content Documents 3.0(日本語訳版)- 3.3.6 CSS Writing Modes

縦横中

古いプロパティであったり、実装が完全ではなかったりという状況である。なお、プロパティ値digitは2015年12月のCRではat-risk扱いである。

平成28420日(digit

平成28420日(all

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

Internet Explorer
Trident/7.0; rv:11.0 バージョン 11.0.22(リリース版)
Edge
Edge/13.10586(リリース版)
Firefox
Firefox/46.0(リリース版)
Firefox/49.0(Nightly 版)
Blink (Vivaldi)
Chrome/50.0.2661.89 Safari/537.36 Vivaldi/1.1.453.45 (Developer Build)
WebKit (Epiphany)
Debian/buildd-unstable (3.18.5-1) Epiphany/3.18.3

仕様書とリファレンス

CSS Writing Modes Module 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 3 日本語訳(編集者草案)3.1. ブロックフロー方向: writing-mode プロパティ
http://www.hcn.zaq.ne.jp/___/WEB/css-writing-modes-ja.html#block-flow
SVG 1.1(第2版)(REC ) 10.7.2 行内進行方向の設定
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/text.html#SettingInlineProgressionDirection
SVG 2 (Editor's Draft)10.10.1.4. The ‘writing-mode’ property
https://svgwg.org/svg2-draft/text.html#WritingModeProperty
-ms-writing-mode property
http://msdn.microsoft.com/en-us/library/windows/apps/hh997001.aspx
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
Firefox 41 for developers - Mozilla | MDN
https://developer.mozilla.org/ja/Firefox/Releases/41
Can I use writing-mode ?
http://caniuse.com/#search=writing-mode