CSS - writing-mode

概要

属性名	writing-mode
値	horizontal-tb \| vertical-rl \| vertical-lr \| sideways-rl \| sideways-lr
初期値	horizontal-tb
適用可能要素	すべての要素
継承	継承する
メディア	Visual / Writing Mode
サポート	https://caniuse.com/?search=writing-mode

説明

縦書きを指定します。tb は Top to Bottom、lr は Left to Right を意味します。

horizontal-tb: 横書き(左→右)で上(top)→下(bottom)に改行します。アラビア語などでは右→左、上→下になります。IE 以外の主要ブラウザで利用可能です。
vertical-rl: 縦書き(上→下)で右(right)→左(left)に改行します。アラビア語などでは下→上、左→右になります。IE 以外の主要ブラウザで利用可能です。
vertical-lr: 縦書き(上→下)で左(left)→右(right)に改行します。アラビア語などでは下→上、右→左になります。IE 以外の主要ブラウザで利用可能です。
sideways-rl: 縦書き(下→上)で右(right)→左(left)に改行します。アラビア語などでは上→下、左→右になります。文字は横倒しになります。Chrome 132 で利用可能となりました。(サポート状況)
sideways-lr: 縦書き(下→上)で左(left)→右(right)に改行します。アラビア語などでは上→下、右→左になります。文字は横倒しになります。Chrome 132 で利用可能となりました。(サポート状況)
lr×: 非推奨となりました。代わりに horizontal-tb を使用してください。
rl×: 非推奨となりました。代わりに horizontal-tb を使用してください。
lr-tb×: 非推奨となりました。代わりに horizontal-tb を使用してください。
rl-tb×: 非推奨となりました。代わりに horizontal-tb を使用してください。
tb×: 非推奨となりました。代わりに vertical-rl を使用してください。
tb-rl×: 非推奨となりました。代わりに vertical-rl を使用してください。
tb-lr×: 非推奨となりました。代わりに vertical-lr を使用してください。

使用例

CSS

.sample {
    margin: 1em;
    padding: 5px;
    height: 100px;
    width: 200px;
    border: 1px solid #666666;
}
.sample.horizontal-tb { writing-mode: horizontal-tb; }
.sample.vertical-rl { writing-mode: vertical-rl; }
.sample.vertical-lr { writing-mode: vertical-lr; }
.sample.sideways-rl { writing-mode: sideways-rl; }
.sample.sideways-lr { writing-mode: sideways-lr; }

HTML

<h3>horizontal-tb</h3>
<div class="sample horizontal-tb">
色は匂へど 散りぬるを 我が世誰そ 常ならむ 
有為の奥山 今日越えて 浅き夢見じ 酔ひもせず
</div>

<h3>vertical-rl</h3>
<div class="sample vertical-rl">
色は匂へど 散りぬるを 我が世誰そ 常ならむ 
有為の奥山 今日越えて 浅き夢見じ 酔ひもせず
</div>

<h3>vertical-lr</h3>
<div class="sample vertical-lr">
色は匂へど 散りぬるを 我が世誰そ 常ならむ 
有為の奥山 今日越えて 浅き夢見じ 酔ひもせず
</div>

<h3>sideways-rl</h3>
<div class="sample sideways-rl">
色は匂へど 散りぬるを 我が世誰そ 常ならむ 
有為の奥山 今日越えて 浅き夢見じ 酔ひもせず
</div>

<h3>sideways-lr</h3>
<div class="sample sideways-lr">
色は匂へど 散りぬるを 我が世誰そ 常ならむ 
有為の奥山 今日越えて 浅き夢見じ 酔ひもせず
</div>

表示

horizontal-tb