DEV Community

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

Posted on • Edited on

30 6

How to correctly position rotated text using CSS

Find out more CSS tricks at css-tip.com

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)


buy me a coffee

OR

Become a patron

Top comments (2)

Collapse
 
mahfujseopage1 profile image
mahfujseopage1

You saved my day :)

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for wonderful tips. You saved my day :)

Auth0

Easy to implement, endless possibilities

With a few lines of code, you can have Auth0 by Okta integrated in any app written in any language and any framework. 🚀 Start building for free today.

Sign up now

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay