Vertical Text with CSS

5th July, 2019 - 1 min. read - in Tutorials - Go to Index

[Hold on] I've made a tool to help people building presentations the modern way.
If you are curious, here the starting point. [/Hold on]

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.


Spotted a typo or (likely) a grammar error? Send a pull request.