CSS - writing-mode - とほほのWWW入門

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

縦書きを指定します。

値	説明
lr-tb	横書き(左→右)で上→下に改行します。left to right, top to bottom。(e5/Ch/Fx/Ed/Op/Sa)
tb-rl	縦書き(上→下)で右→左に改行します。top to bottom, right to left。(e5/Ch/Fx/Ed/Op/Sa)
horizontal-tb	横書きで上→下に改行します。(C3/Ch/Fx/Ed/Op/Sa)
vertical-rl	縦書きで右→左に改行します。(C3/Ch/Fx/Ed/Op/Sa)
vertical-lr	縦書きで左→右に改行します。(C3/Ch/Fx/Ed/Op/Sa)

CSS

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

HTML

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

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

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

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

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

表示