Sideway text is getting out of the container
This code shows my problem https://codepen.io/ksblupzi-the-solid/pen/vENppgK
I don't know why the text is out of the box or how to get rid of the white area above the text.
10 Replies
Hi, if you just wanna rotate the text in the box div, I recommend use writing-mode: vertical-rl in the box class style, not using transfrom rotate.
The rotation I want is achieved using
writing-mode: sideways-lr, but it's not supported in my browser.@سمية have you tried using
writing-mode: vertical-rl and then transform: scale(-1)?
vertical-rl has way more browser support than sideways-lr because it's from an older spec I believeIt worked. Thank you.
But why does the
rotate make this white space? Is this the original width of the text?I have made a quick animation to demonstrate why it is creating the white space.
Based on you 90deg rotation and transform-origin. It is pivoting from the bottom right-hand corner.
If you have to use this method you will probably need to combine it with a
translate to position it where you actually want it to compensate for the rotation.that's a great educational video!
I still havent ever figured out how to properly compensate to reposition when rotating. Like what the formula is to put jt where i need it. Especially if combined w other transforms... forget it! End up using magic numbers to translate it back.
why would you rotate if you can use
text-direction?Referring to struggling with
rotating in general, not this specific exampleah gotcha!