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.
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.
Comments
Trackbacks
-
[...] 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 [...]
-
[...] 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 [...]
-
[...] The CSS Ninja Explains [...]
-
[...] http://www.thecssninja.com/css/real-text-rotation-with-css [...]
-
[...] della lista (con il corretto z-index), con gli pseudo-elementi :after e :before. Essi vengono poi ruotati con la proprietà transform:rotate, e deformati con la proprietà skew, che applica una [...]
-
[...] [...]
-
[...] 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 [...]
-
[...] text via CSS is now relatively easy. There is a few of good tutorials and demos out there. But they lack one thing – they don’t explain how to rotate text in [...]
-
[...] ich klasse. Sehr interessant finde ich auch, dass es für den IE schon seit der Version 5.5 ein paar Möglichkeiten zur Textrotation gibt. Diese Erkenntnis habe ich nur dank eines Kommentars von Lea Verou. Das zeigt doch mal wieder, [...]
Opera 10.01 – not working…:(
sinzoo, October 31st, 2009@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, 2009Nice post! Works perfectly in IE7. Thank you. Saved me a lot of time.
David, December 15th, 2009Nice 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, 2010IE 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@Bruce – Unfortunately that is a limitation of using
The Css Ninja, February 13th, 2010writing-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.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, 2010Strictly, 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@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, 2010vry nice
shanavas, April 15th, 2010Extremely 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.
Sachin Tehare, April 27th, 2010nice……………….!!!!!!!!!!!!
ghjgh, June 10th, 2010Nice 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.
sathya, June 30th, 2010The 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.
Darryl Snow, July 10th, 2010Really great and cool tip, I save my time and got appreciation from my client. :)
Rajnikant, July 30th, 2010Opera 10.61: -o-transform: rotate(90deg);
leonwolf, September 16th, 2010Thanks 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.
Weeklylisting, November 5th, 2010Nice clear explanation, thanks a lot.
Kaya Basharan, November 24th, 2010Thanks leonwolf for the Opera code.
Works perfectly, but prints backward on some printers, or not at all on others
Lisa, December 9th, 2010is’s 3am now, man … tb-rl saved my life!
teka, December 17th, 2010Really helpful, thanks! :)
Silas, December 28th, 2010To 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).
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!
Chris M, January 25th, 2011How cool! Thanks so much for the CSS!
Adam, March 28th, 2011Not working on ie9 without compatibilty mode disabled.
Mustafa, April 4th, 2011@Mustafa –
Hmm that behaviour is very odd in IE9, luckily we can fix it by resetting the
The Css Ninja, April 21st, 2011writing-modeand relying onms-transformto rotate the text rather thanwriting-mode. I’ve updated the article and demo files.Good but not compatible wit all browsers :)
anas khan, May 30th, 2011Interesting, 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.
Scott, July 13th, 2011firefox 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
andy, July 15th, 2011transform won’t work for CJK ideographs as in writing-mode: tb-rl, CJK ideographs change only the direction.
Roy, July 31st, 2011Great 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!
Phil Ellis, September 8th, 2011Nice…but for me i’m still using the old way, creating in jpg or png…to lessen my bug…Thanks anyway for sharing=)
Jake Pucan, September 14th, 20112 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
sdtacoma, September 21st, 2011E
R
T
I
C
A
L
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.
Brenda, October 3rd, 2011@sdtacoma –
Table cells and text rotation/transforms are quite inconsistent and I would avoid doing it.
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
Ryan Seddon, October 3rd, 2011word-wrap. Theletter-spacingproperty is also set as some letters are smaller than others e.g. the I would be on the same line as the T.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.
RJ, November 1st, 2011Looks 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.
David, November 1st, 2011use,
its working well on all browsers.
Thiyagarajan Veluchamy, November 9th, 2011Since IE9 is better to use _ hack, because IE9 support both methods.
_writing-mode: tb-rl;
Famiso, January 20th, 2012-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);