Vertical Text with CSS

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

• using writing-mode CSS property
• rotate the text with transform

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.