| 属性名 | 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 を使用してください。horizontal-tb を使用してください。horizontal-tb を使用してください。horizontal-tb を使用してください。vertical-rl を使用してください。vertical-rl を使用してください。vertical-lr を使用してください。
.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; }
<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>