How can I draw vertical text with CSS cross-browser?

Question

I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?

Answer 1

Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.

.rotate {   -webkit-transform: rotate(-90deg);   -moz-transform: rotate(-90deg);   -ms-transform: rotate(-90deg);   -o-transform: rotate(-90deg);   transform: rotate(-90deg);    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */   -webkit-transform-origin: 50% 50%;   -moz-transform-origin: 50% 50%;   -ms-transform-origin: 50% 50%;   -o-transform-origin: 50% 50%;   transform-origin: 50% 50%;    /* Should be unset in IE9+ I think. */   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 

Old answer:

For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.

.rot-neg-90 {   /* rotate -90 deg, not sure if a negative number is supported so I used 270 */   -moz-transform: rotate(270deg);   -moz-transform-origin: 50% 50%;   -webkit-transform: rotate(270deg);   -webkit-transform-origin: 50% 50%;   /* IE support too convoluted for the time I've got on my hands... */ } 

Answer 2

I am using the following code to write vertical text in a page. Firefox 3.5+, webkit, opera 10.5+ and IE

.rot-neg-90 {     -moz-transform:rotate(-270deg);      -moz-transform-origin: bottom left;     -webkit-transform: rotate(-270deg);     -webkit-transform-origin: bottom left;     -o-transform: rotate(-270deg);     -o-transform-origin:  bottom left;     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }