Real text rotation with CSS

Just saw a great post on Jonathan Snooks’ blog about doing text rotation with CSS and how to accomplish it in IE using IE propriety filter basic image property to rotate a text block. But there is a better way using CSS3 writing-mode property that has been in IE since version 5.5.

writing-mode which is currently in the CSS3 draft specification allows us to accomplish text rotation without using propriety properties, effectively future proofing the concept as more browsers adopt the CSS3 draft spec.

The CSS

p { writing-mode: tb-rl; }

That’s it incredibly simple CSS technique that will eventually work with all browsers as their CSS3 support gets better. This is one of the handful of CSS3 supported properties in IE. The tb-rl value tells the browser to display paragraphs with the text flowing from top to bottom, right to left. Essentially rotating the text 90 degrees clockwise and aligning to the right.

This properties true intention is for displaying other languages in their correct “writing mode” such as Japanese right to left or Arabic & Hebrew which display right to left & top to bottom (rl-tb).

Support

At the moment IE is the only browser to support it starting from IE5.5 and up, IE8 adds further values through using the -ms extension. There are 4 values available from IE5.5+ and an additional 4 values for IE8+ through the -ms extension.

  • lr-tb – This is the default value, left to right, top to bottom
  • rl-tb – This flows the text from right to left, top to bottom
  • tb-rl – Flows the text vertically from top to bottom, right to left
  • bt-rl – bottom to top, right to left
  • tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
  • bt-lr – Bottom to top, left to right
  • lr-bt – Left to right, bottom to top
  • rl-bt – Right to left, bottom to top

Rotate text in other browsers?

As stated in Snooks’ article we can do this in Webkit based browsers, Firefox 3.5+, Opera 11 and IE9 using the transform property.

-webkit-transform: rotate(90deg);	
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

For all browsers we need to use their vendor extensions -moz-, -webkit-, -o- and -ms-. As for Opera it neither yet supports transforms or writing-mode properties but I’m sure that will change with the upcoming release of version 10.

In the article example we need to position the element differently for browsers that support the transform property compared to ones that support writing-mode as the elements rotated still exist as horizontal elements where as with writing-mode the element is truly rotated, see screenshot below.

CSS writing-mode on the left and CSS transform on the right
Element that is rotated is outlined and highlighted, writing-mode on left transform on right

.datebox span:nth-child(3) {
	right: -16px;
	bottom: 24px;
	writing-mode: lr-tb; 
}

To target the browsers that potentially support the transform property we use the CSS3 nth-child() psuedo class. Since IE9 now supports both writing-mode and transforms we’ll reset the writing direction back to normal, this way IE8 and below will still work using writing mode but IE9 and up will use the better transforms.

A pretty cool alternative to an already great idea by snook.

Post filed under: css.

Skip to comment form.

  1. sinzoo says:

    Opera 10.01 – not working…:(

  2. @sinzoo – Unfortunately Opera is yet to support writing-mode or CSS transforms. The good news is in Presto 2.3, Opera’s rendering engine, (v10 runs presto 2.2) they have added a huge amount of CSS3 support so the transform technique will work from this tutorial when Presto 2.3 is released, just not sure when that is.

  3. David says:

    Nice post! Works perfectly in IE7. Thank you. Saved me a lot of time.

  4. Nice work, but this approach is limited, in that the text can only be rotated 90 degrees, instead of Snook’s approach which allows 90, 180, and 270 degrees.

    Snook’s text-rotation is using the 270 degree angle.

  5. Bruce Bell-Myers says:

    IE seems only allow text to flow top to bottom, as the “2009″ does in your example. I have tried the other settings, none seem to make the text rotated 180 degrees from that, or reading from bottom to top?

  6. @Bruce – Unfortunately that is a limitation of using writing-mode, it’s intention is for non-english languages like japanese and arabic and since their is no written script that flows from bottom to top you can’t actually do that. I would recommend Snook’s solution if you need to do that.

  7. Its really a useful post, thanks buddy. But i have a question. Is there any solution for rotating any block content in IE to a particular angle(say 10 degree) as is done in mozilla through the code

    “-moz-transform: rotate(10deg);”

    is this possible in IE friends???

  8. wtrmute says:

    Strictly, Ogham (an old Irish alphabet) can be written bottom-to-top and left-to-right. Of course, I doubt that W3C will add another writing mode just to support an obscure script. Otherwise they’d have to add boustrophedon and runic/Iberian spiral writing…

  9. @Mahaveer – There is a Matrix filter in IE, like all IE propriety properties has highly convoluted and confusing syntax, which could potentially be used to do a 10 degree rotation. Have a read of this blog post to help you get your head around it.

    @wtrmute – Haha, yeah I don’t see writing-mode catering for those crazy obscure scripts, but spiral writing would be pointlessly awesome.

  10. shanavas says:

    vry nice

  11. Extremely nice one!

    But I have one issue. I want to use vertical text as table head. When I use the above script it comes out of header container, td or th what ever you use.

    Can anybody help me out in this.

  12. ghjgh says:

    nice……………….!!!!!!!!!!!!

  13. sathya says:

    Nice work, but this approach is limited, in that the text can only be rotated 90 degrees, instead of Snook’s approach which allows 90, 180, and 270 degrees.

  14. Darryl Snow says:

    The main problem is… and I feel very dirty saying this… IE is still the only browser that let’s you display those asian writing systems correctly… using rotate(90deg) rotates the characters rather than displaying them vertically.

    I think the guys behind all these standards are woefully neglectful of the non-english web sometimes… we’re just left with things like flash when it comes to typography.

  15. Rajnikant says:

    Really great and cool tip, I save my time and got appreciation from my client. :)

  16. leonwolf says:

    Opera 10.61: -o-transform: rotate(90deg);

  17. Thanks for sharing.

    WRITING-MODE: tb-rl, didn’t work for me in IE, but in chrome it worked.

    I liked the trick but I wouldn’t use it. For my use, the text is static so I can live with images.

    I just wish IE supported this flawlessly.

  18. Nice clear explanation, thanks a lot.
    Thanks leonwolf for the Opera code.

  19. Lisa says:

    Works perfectly, but prints backward on some printers, or not at all on others

  20. teka says:

    is’s 3am now, man … tb-rl saved my life!

  21. Silas says:

    Really helpful, thanks! :)
    To get my text reading upwards in IE on a site I’m working on I had to combine writing-mode: tb-lr and filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    (just in case anyone else finds that useful).

  22. Chris M says:

    I have been having the same issue as Sachin above. I am using this for table headers (th). The text does not push the height of the th to accommodate. The text simply overflows out of the th, overlapping anything above or below depending on how the vertical-align is set. I know this is relevant to the positioning issue with the transform. I have tried various positioning, margin and padding tactics to no avail.

    If anyone has some insight, I would appreciate their comments!

    Thanks!

  23. Adam says:

    How cool! Thanks so much for the CSS!

  24. Mustafa says:

    Not working on ie9 without compatibilty mode disabled.

  25. @Mustafa

    Hmm that behaviour is very odd in IE9, luckily we can fix it by resetting the writing-mode and relying on ms-transform to rotate the text rather than writing-mode. I’ve updated the article and demo files.

  26. anas khan says:

    Good but not compatible wit all browsers :)

  27. Scott says:

    Interesting, but as others have pointed out, doesn’t work for table headers. In fact, doesn’t seem to work in general when the rotated string should establish the layout height. The datebox example works only because the year string is shorter than the height established by the day. If you substitute an arbitrary longer string for the year text, the layout is botched.

  28. andy says:

    firefox work fine preview and printing

    ie9 work just preview, not working for printing
    is there some code i should add for printing?

    i try @media print for ie9 still does not working for printing

  29. Roy says:

    transform won’t work for CJK ideographs as in writing-mode: tb-rl, CJK ideographs change only the direction.

  30. Phil Ellis says:

    Great Tip. Simple. Only problem I have is simply that DWCS4 doesn’t see the rotation and so I’m slightly flying blind. Guess that means it’s time to go to CS5. Thanks for the lesson!

  31. Jake Pucan says:

    Nice…but for me i’m still using the old way, creating in jpg or png…to lessen my bug…Thanks anyway for sharing=)

  32. sdtacoma says:

    2 questions….

    1) When I use this method for a table header cell, the cell’s width does not adjust to the width of the rotated text. Any idea why the cell isn’t resizing?

    2) Is there a way with CSS to have text display like this…

    V
    E
    R
    T
    I
    C
    A
    L

  33. Brenda says:

    This was a nice article, but the issue I had with this one and all of the others that describe this technique is that the snippets shown do not work as expected when the text you want to rotate is on a page with other text. I had to download the code to figure out how to do that.

    This article would have been more complete and easier to work with if that part had been included.

  34. Ryan Seddon says:

    @sdtacoma

    When I use this method for a table header cell, the cell’s width does not adjust to the width of the rotated text. Any idea why the cell isn’t resizing?

    Table cells and text rotation/transforms are quite inconsistent and I would avoid doing it.

    Is there a way with CSS to have text display like this…

    Yes there is! Take a look at this little demo, basically it forces each character to it’s own line by setting a width and forcing the word to break to a newline using word-wrap. The letter-spacing property is also set as some letters are smaller than others e.g. the I would be on the same line as the T.

  35. RJ says:

    Sweet I got this working on IE9 at -10deg, honestly I designed my page to be Alright without the rotation, you just get the extra fun in the page if you keep your browser up to date. They should force everyone in the world to upgrade to CSS3 compatible browsers, discontinue IE8 and below.

  36. David says:

    Looks like the support for this cross browser is finally getting some headway. Just got to ask all my clients to shift over to modern browsers now!

    Anyway, for those who like this sort of thing “copy and paste” http://www.cssrotate.com is one of those sites that’ll generate the CSS code for you.

  37. use,

    display:block;
    writing-mode: tb-rl;
    -webkit-transform: rotate(90deg);	
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

    its working well on all browsers.

  38. Famiso says:

    Since IE9 is better to use _ hack, because IE9 support both methods.

    _writing-mode: tb-rl;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

  39. siddu says:

    Hello friends

    I want to display my text like two rainbows which overlaps adjacent. it dont supports rotation property. is their any property to display like this in css3 or javascript

    please solve me my problem friends.
    —siddu

  40. Shayan says:

    Hi all,
    In agreement with SiIas,I also think if you want it work for IE7 or lower, you should add this line too:
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);