Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease.

Right to Left Vertical Text

Right to Left

Vertical Text

HTML

<div class="v-rl">
  <p>Right to Left</p>
  <p>Vertical Text</p>
</div>

CSS

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

Left to Right Vertical Text

Left to Right

Vertical Text

HTML

<div class="v-lr">
  <p>Left to Right</p>
  <p>Vertical Text</p>
</div>

CSS

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

All Characters Upright

All Characters

Upright

Ultraman ウルトラマン

HTML

<div class="t-upright">
  <p>All Characters</p>
  <p>Upright</p>
  <p>Ultraman ウルトラマン</p>
</div>

CSS

.t-upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

All Characters Sideways

All Characters

Sideways

Ultraman ウルトラマン

HTML

<div class="t-sideways">
  <p>All Characters</p>
  <p>Sideways</p>
  <p>Ultraman ウルトラマン</p>
</div>

CSS

.t-sideways {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

All Characters Mixed

All Characters

Mixed

Ultraman ウルトラマン

HTML

<div class="t-mixed">
  <p>All Characters</p>
  <p>Mixed</p>
  <p>Ultraman ウルトラマン</p>
</div>

CSS

.t-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}