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.