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 and Firefox 3.5+ using the transform property.

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

For both we need to use the vendor extensions -moz & -webkit. 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.

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

.datebox span:nth-child(3)
{
	right: 0px;
	top: 0px;
}

To target the browsers that potentially support the transform property we use the CSS3 nth-child() psuedo class.

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

Post filed under: css.

Skip to comment form.

Comments

1. 

   Opera 10.01 – not working…:(

   sinzoo, October 31st, 2009
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.

   The Css Ninja, November 2nd, 2009
3. 

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

   David, December 15th, 2009
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.

   Zach Leatherman, February 10th, 2010
5. 

   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?

   Bruce Bell-Myers, February 12th, 2010
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.

   The Css Ninja, February 13th, 2010
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???

   Mahaveer Singh, March 4th, 2010
8. 

   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…

   wtrmute, March 4th, 2010
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.

   The Css Ninja, March 4th, 2010

Trackbacks

1. [...] reading an interesting article on using the writing-mode CSS property to display vertical text (I’m always interested in how to abuse what browsers currently [...]

   CSS 3 Text: A Tale of writing-mode Woe, February 13th, 2010

2. [...] informacji na temat obracania tekstu wpadłem na ciekawe rozwiązanie opisane przez thecssninja.com. Cała sztuczka polega na zastosowaniu właściwości writing-mode do zmiany kierunku pisania [...]

   Obracanie tekstu przy pomocy CSS i JQuery « CssTips, March 7th, 2010