7

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Run
  • 54,938
  • 169
  • 450
  • 748
  • It's not often wise to presume something in CSS is a bug until you first review the [spec](http://www.w3.org/TR/css3-2d-transforms/#transform-values). – BoltClock Jun 03 '11 at 13:11

2 Answers2

19

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/

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • Also, it's worth noting that the default origin of transformation is `50% 50%`, hence the behavior shown in the OP's fiddle. – BoltClock Jun 03 '11 at 13:12
  • +1. Yesterday, I was trying myself to solve this using `transform-origin`. I completely forgot you could set values like `bottom left`, and so I couldn't work it out. – thirtydot Jun 03 '11 at 13:46
  • by the way how can I make it work on IE? it doesn't seem to work on IE (just tested)... thanks! – Run Jun 03 '11 at 15:58
  • 1
    What version? Below IE9 you'd need to use http://www.useragentman.com/blog/tag/css-sandpaper/ – methodofaction Jun 03 '11 at 16:05
  • (I realize I'm a bit late to the party...) Is there any way to do this without knowing the width of `.year`? – Michael Martin-Smucker Feb 14 '13 at 13:30
  • @MichaelMartin-Smucker add `translate(-100%, 0)` to the end of the transformation. – methodofaction Feb 14 '13 at 14:07
  • @Duopixel is there any possible to rotate single characters in a ceratain speed and return it back to it same position onloading screen..? –  Sep 18 '13 at 05:30
  • @VikranthVivek yes it's possible, but open a new question as it is unrelated to the question at hand. – methodofaction Sep 18 '13 at 20:32
  • @Duopixel here the question http://stackoverflow.com/questions/18864676/is-it-possible-to-rotate-characters-of-a-word-instead-of-rotating-the-whole-word. it almost has an answer but not clear because i need single-wise character rotation instead of rotate the whole word –  Sep 19 '13 at 05:30
3

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;
Justin Niessner
  • 242,243
  • 40
  • 408
  • 536