CSS 3: text rotation bug?

Question

I don't understand how text rotation works in CSS3.

For instance, you can see it here, the rotated text is never on the right location as you want it,

right: 0;
bottom: 0;

it will always have the gap/ margin to the right. and always overrun at the bottom of the box that contain it.

How can I fix this?

Can I use jquery to fix it or any reliable jquery plugin for text rotation out there ?

Thanks.

Answer 1

Positioning the text is not very difficult when you realize you can control the rotation point through...

transform-origin: 0 0 || top left

In your specific case, it works out like this:

.year
{
    display: block;
    writing-mode: tb-rl;
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: bottom left;   
    -moz-transform: rotate(270deg);
    -moz-transform-origin: bottom left; 
    -o-transform: rotate(270deg);
    -o-transform-origin: bottom left; 
    -ms-transform: rotate(270deg);
    -ms-transform-origin: bottom left; 
    transform: rotate(270deg);
    transform-origin: bottom left;  
    font-size: 24px; 
    position: absolute;
    right: -50px; /*.year width*/
    bottom: 0;
    border: 1px solid #000000; 
}

If you take out the transformation, you will notice that .year is positioned right next to it's parent box, bottom aligned. Then you specify the bottom left corner to be the "rotation point" and voila! Absolute control over your text positioning.

http://jsfiddle.net/PQ3Ga/

Answer 2

Positioning rotated text in CSS is very difficult. You have to remember that the position takes effect BEFORE the text is rotated. If you remove the rotation in your example, you will see that the unrotated text is correctly positioned.

To correctly position rotated text, you have to calculate how the rotation will affect the position...and then correct that position in the stylesheet.

In your case, you need:

position: absolute;
right: -11px;
bottom: 9px;