CSS - writing-mode

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

概要

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

説明

縦書きを指定します。Internet Explorer 5 で実装されたものを CSS3 でも採用が検討されていますが、値の名称が変更される可能性があります。

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

使用例

CSS
.sample {
    margin: 1em;
    padding: 5px;
    height: 100px;
    width: 150px;
    border: 1px solid #666666;
}
.sample.sample-lr-tb { writing-mode: lr-tb; }
.sample.sample-tb-rl { writing-mode: tb-rl; }
.sample.sample-horizontal-tb { writing-mode: horizontal-tb; }
.sample.sample-vertical-rl { writing-mode: vertical-rl; }
.sample.sample-vertical-lr { writing-mode: vertical-lr; }
HTML
<h5>lr-tb</h5>
<div class="sample sample-lr-tb">
色は匂へど 散りぬるを 我が世誰そ 常ならむ 
有為の奥山 今日越えて 浅き夢見じ 酔ひもせず
</div>

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

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

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

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

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
http://www.tohoho-web.com/css/prop/writing-mode.htm