DEV Community

Cover image for How to correctly position rotated text using CSS
Temani Afif
Temani Afif

Posted on • Updated on

How to correctly position rotated text using CSS

It's always a hassle to correctly position a rotated text. Especially to position such text in the corner or the sides of another element.

No need to bother yourself with such a task. Find below all the common cases. It's responsive and no hardcoded width or height is needed (hover to change the text direction)

The corners

The sides

Here are a few notes to easily remember the different cases:

  • There is always a relation between transform-origin and top/left/bottom/right. If you will use top and left then you will need transform-origin:top left and so on.
  • We always rotate then translate (never the opposite)
  • The rotation is 90deg for a text orientation to the bottom and -90deg to the top.
  • The translation is +/-100% for the corners and +/-50% for the sides. No need to remember them all, a quick trial & error can give you the correct value.

The above is the most supported way to achieve what we want but we can do easier using writing-mode

The corners

The sides

Nothing to remember here 😉


More common positions (that we can easily find from the above)


You want to support me?

buy me a coffee

OR

Become a patron

Top comments (1)

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for wonderful tips. You saved my day :)