CSS: writing-mode

by bc_rikko

HTML

<section class="horizontal-tb">
  <h1>horizontal-tb</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <p>吾輩わがはいは猫である。名前はまだ無い。</p>
</section>

<section class="vertical-rl">
  <h1>vertical-rl</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <p>吾輩わがはいは猫である。名前はまだ無い。</p>
</section>

<section class="vertical-lr">
  <h1>vertical-lr</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <p>吾輩わがはいは猫である。名前はまだ無い。</p>
</section>

<section class="sideways-rl">
  <h1>sideways-rl</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <p>吾輩わがはいは猫である。名前はまだ無い。</p>
</section>

<section class="sideways-lr">
  <h1>sideways-lr</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  <p>吾輩わがはいは猫である。名前はまだ無い。</p>
</section>

CSS

section {
  max-height: 200px;
  margin: 10px;
  border: 1px solid #666;
  padding: 10px;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

.sideways-rl {
  writing-mode: sideways-rl;
}

.sideways-lr {
  writing-mode: sideways-lr;
}

body {
  background-color: white;
}