CSS - writing-mode

• トップ
• CSSリファレンス
• writing-mode

概要

説明

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

horizontal-tb

横書き(左→右)で上→下に改行します。アラビア語などでは右→左、上→下になります。

vertical-rl

縦書き(上→下)で右→左に改行します。アラビア語などでは下→上、左→右になります。

vertical-lr

縦書き(上→下)で左→右に改行します。アラビア語などでは下→上、右→左になります。

sideways-rl

縦書き(下→上)で右→左に改行します。アラビア語などでは上→下、左→右になります。文字は横倒しになります。

sideways-lr

縦書き(下→上)で左→右に改行します。アラビア語などでは上→下、右→左になります。文字は横倒しになります。

lr-tb

横書き(左→右)で上→下に改行します。非推奨となりました。

tb-rl

縦書き(上→下)で右→左に改行します。非推奨となりました。

使用例

.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; }

<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>