Vertical Text with CSS

Posted on July 5, 2019 in
2 min read

If you need to put a text vertical (meaning rotated) the usual solutions are basically two:

Both solutions work well but the direction of the text is always the same, the text starts from top to bottom.

If you want to have more control defining more precisely the direction and other position contraints, here a quick solution using an outer wrapper and an inner text container.

The markup is something like:

<div class="outer">
  <div class="inner">A vertical text</div>
</div>

and here the minimal CSS:

.outer{
  writing-mode: tb-rl;
  display:flex;
  align-items:center;
  justify-content: flex-end;
}
.inner{
  transform: rotate(180deg);
  transition: transform 1s ease-in-out;
}

It's based on the combination of flex properties in the outer wrapper and the transform property in the inner one.

You can check a working example here and if you want to explore the different possibilities, here a little toy to pay with:

See the Pen rotated vertical text interactive by Fabio Franchino (@abusedmedia) on CodePen.