序論
CSS Writing Modes Level 3 は、多文化対応の筆記様式をサポートするための CSS の機能を定義します。この様式とは、左から右（例えば Latin、Indic）、右から左（例えば Hebrew、Arabic）、両方向（例えば Latin と Arabic の混合）、縦書き（例えば Asian）といったものです。この記事では CSS の writing-mode プロパティを扱います。
CSS における 記述様式 (writing mode) は、writing-mode、direction、text-orientation プロパティで決められます。記述様式が用いられるのは <text> 要素だけで、<tspan>、<tref>、<altGlyph>、<textPath> などのサブ要素では無視されます（インラインの進行方向は、Unicode の bidirectional アルゴリズムとプロパティ direction や unicode-bidi によって 1 つの <text> 要素内でも変えられることに注意してください）。記述様式は主に、そのインライン基本方向 (inline base direction) とブロックの流れの方向 (block flow direction) に基いて決められます。
インライン基本方向はインラインレベルのコンテンツが並ぶ順番で、行のどちら側が起点で、どちら側が終点と考えられるのかを決めます。direction プロパティは、要素のインライン基本方向を定義し、（unicode-bidi プロパティやテキストコンテンツ自身の持つ方向と共同して）インラインレベルのコンテンツの並び順を決めます。
ブロックの流れの方向は、ブロックレベルのコンテナがスタックされていく方向で、インラインレベルのコンテンツがブロックコンテナに流れこむ方向です。したがって writing-mode プロパティはブロックレベルのコンテンツの並び順も決めます。
一般的に、横向きの記述様式は横向きのテキストと、上向きまたは下向きのブロックの流れを持っています。縦向きの記述様式は縦向きのテキストと、左向きまたは右向きのブロックの流れを持っています。
値
writing-modes プロパティは以下の値をとります。
| 値 | 効果 | 例 |
|---|---|---|
horizontal-tb |
デフォルトです。コンテンツは横方向には左から右に、縦方向には上から下に流れます。次の横方向の行は前の行より下に置かれます。horizontal-tb はほとんどの筆記システムで使われているため、デフォルトになっています。SVG1 文書でのみ、非推奨値 lr、rl、lr-tb を使ってください |
<div style="writing-mode:horizontal-tb">...</div> |
rl-tb |
コンテンツは横方向には右から左に、縦方向には上から下に流れます。次の横方向の行は前の行の下に置かれます | <div style="writing-mode:rl-tb">...</div> |
vertical-lr |
コンテンツは縦方向には上から下に、横方向には左から右に流れます。次の縦方向の行は前の行の右に置かれます。SVG1 文書でのみ、非推奨値 tb-lr を使ってください |
<div style="writing-mode:vertical-lr">...</div> |
vertical-rl |
コンテンツは縦方向には上から下に、横方向には右から左に流れます。次の縦方向の行は前の行の左に置かれます。SVG1 文書でのみ、非推奨値 tb や tb-rl を使ってください |
<div style="writing-mode:vertical-rl">...</div> |
bt-rl |
コンテンツは縦方向には下から上に、横方向には右から左に流れます。次の縦方向の行は前の行の左に置かれます | <div style="writing-mode:bt-rl">...</div> |
bt-lr |
コンテンツは縦方向には下から上に、横方向には左から右に流れます。次の縦方向の行は前の行の右に置かれます | <div style="writing-mode:bt-lr">...</div> |
lr-bt |
コンテンツは横方向には左から右に、縦方向には下から上に流れます。次の横方向の行は前の行の上に置かれます | <div style="writing-mode:lr-bt">...</div> |
rl-bt |
コンテンツは横方向には右から左に、縦方向には下から上に流れます。次の横方向の行は前の行の上に置かれます | <div style="writing-mode:rl-bt">...</div> |
lr |
SVG1 文書以外では非推奨です。CSS 用には horizontal-tb （デフォルト）を使ってください |
<div style="writing-mode:horizontal-tb">...</div> |
lr-tb |
SVG1 文書以外では非推奨です。CSS 用には horizontal-tb（デフォルト）を使ってください |
<div style="writing-mode:horizontal-tb">...</div> |
rl |
SVG1 文書以外では非推奨です。CSS 用には horizontal-tb（デフォルト）を使ってください |
<div style="writing-mode:horizontal-tb">...</div> |
tb |
SVG1 文書以外では非推奨です。CSS 用には vertical-rl を使ってください |
<div style="writing-mode:vertical-rl">...</div> |
tb-lr |
SVG1 文書以外では非推奨です。CSS 用には vertical-lr を使ってください |
<div style="writing-mode:vertical-lr">...</div> |
tb-rl |
SVG1 文書以外では非推奨です。CSS 用には vertical-rl を使ってください |
<div style="writing-mode:vertical-rl">...</div> |
関連情報
プレゼンテーション属性として、writing-mode を CSS スタイルシートのプロパティのように使えます。さらなる情報は、MDN の 記事 writing-mode と、W3C の Writing Modes specification をご覧ください。