CSS3

プロパティ

writing-mode

→●、mdn

ブロック フロー方向（¶縦書き／横書き）。

このプロパティは、一連のテキスト行を［⇔横書き／↑↓縦書き］のいずれにレイアウトするか、および、ブロックの進行方向を指定する。

horizontal-tb

ブロック フロー方向は「↓」（上から下）になる。

書字モード、タイポ グラフィック モードは、いずれも「⇔」横書きになる。

開始<DIV style="border:1px solid red; width:100px; font-size:20px;
 writing-mode:horizontal-tb;
">あいう かきく<BR>abc def ghi</DIV>終了

vertical-rl

ブロック フロー方向は「←」（右から左）になる。

書字モード、タイポ グラフィック モードは、いずれも「↑↓」縦書きになる。

開始<DIV style="border:1px solid red; height:100px; font-size:20px;
 writing-mode:vertical-rl;
">あいう かきく<BR>abc def ghi</DIV>終了

vertical-lr

ブロック フロー方向は「→」（左から右）になる。

書字モード、タイポ グラフィック モードは、いずれも「↑↓」縦書きになる。

開始<DIV style="border:1px solid red; height:100px; font-size:20px;
 writing-mode:vertical-lr;
">あいう かきく<BR>abc def ghi</DIV>終了

writing-mode プロパティは、ブロック フロー方向 ─ 行ボックスが堆積されていく方向 ─ を指定する。それは、一連の［［ブロック整形文脈におけるブロック レベルのボックス］／［行内を包含するブロック コンテナにおける、行ボックス］／［table 内の row］］、等々の順序付け方向を決定する。したがって、このプロパティは、行ボックスの方位が（したがって書字モードについても）「⇔」横書きか「↑↓」縦書きのいずれになるかも 決定することになる。しかる後、text-orientation プロパティが、行ボックスの中でテキストがレイアウトされる方法を決定する。

置換される要素の内容は、書字モードに因り回転されることはない： 例えば画像や iframe の内容は、正立のままにされ、既定のオブジェクトサイズ 300px×150px の方位が改められることもない。しかしながら、テキストをはらんでいる埋め込まれた置換内容（MathML による内容や form 要素など）は、ユーザー エージェントがその置換内容に対し、その種の「↑↓」縦組みをサポートするならば、置換される要素の書字モードと行方位に合致するべきである。

¶例省く

¶説明省く

関連

テスト