Comments on: Real text rotation with CSS

By: Famiso

Famiso — Thu, 19 Jan 2012 18:00:34 +0000

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);

By: Thiyagarajan Veluchamy

Thiyagarajan Veluchamy — Wed, 09 Nov 2011 08:27:30 +0000

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.

By: David

David — Tue, 01 Nov 2011 13:20:49 +0000

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.

By: RJ

RJ — Tue, 01 Nov 2011 06:30:46 +0000

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.

By: Ryan Seddon

Ryan Seddon — Sun, 02 Oct 2011 23:41:36 +0000

@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.

By: Brenda

Brenda — Sun, 02 Oct 2011 17:42:46 +0000

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.

By: sdtacoma

sdtacoma — Tue, 20 Sep 2011 22:54:03 +0000

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

By: Jake Pucan

Jake Pucan — Wed, 14 Sep 2011 05:03:15 +0000

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

By: Phil Ellis

Phil Ellis — Wed, 07 Sep 2011 17:53:14 +0000

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!

By: Text um 90 Grad drehen « F-LOG-GE

Text um 90 Grad drehen « F-LOG-GE — Tue, 30 Aug 2011 13:41:50 +0000

[...] 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, [...]