Rotate text 90 degrees

[shahzad80]

Hi, How I can rotate my text in vertical format without using webkit property in CSS webkit because IE doesn't support webkit property, please help me out how i can write vertical format text.

[penders]

You'll need to use the vender specific (CSS 3) properties (including -webkit) to get a cross browser effect in IE9, Chrome, Safari, Firefox and Opera. If you just want vertical text (ie. 90 deg rotation) then there is the BasicImage filter in IE6-8 that allows you to do this (I don't think you can do per degree rotation in earlier versions of IE?)

So, you need to combine all these...

/* IE6-8 Values: 0, 1, 2, 3 for 0, 90, 180 or 270 degress respectively */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
-ms-transform: rotate(90deg);  /* Microsoft - Internet Explorer 9 */ 
-moz-transform: rotate(90deg);  /* Mozilla - Firefox 3.5+ */ 
-o-transform: rotate(90deg);  /* Opera 10.5+ */ 
-webkit-transform: rotate(90deg); /* Chrome, Safari */ 
transform: rotate(90deg);   /* W3C - not really reqd yet */

Your element will need to be block-level (and hasLayout for IE).

AFAIK no browser currently supports the W3C "transform" property?

[penders]

CORRECTION:

Remove (or comment out) the -ms-transform (IE9) vender specific property above as this combines with the filter, resulting in 180deg text in IE9!

I think it would be better to move the filter to an IE-only stylesheet and serve this with a conditional comment just to "IE lte 8" (IE <= 8). And keep the -ms-transform for IE9.

[penders]

(I don't think you can do per degree rotation in earlier versions of IE?)

Actually, you can using the Matrix Filter [msdn.microsoft.com]. Although it's not quite so straight forward since you need to apply a transformation matrix.

...serve this with a conditional comment just to "IE lte 8" (IE <= 8).

Which should be written as:

<!--[if lte IE 8]> 
<link rel="stylesheet" href="css_ieonly.css" type="text/css"> 
<![endif]-->

[alt131]

Hi shahzad80 and welcome to WebmasterWorld :)

As penders has said, you can use the matrix filter. Another option (depending on exactly how you want the text to look) might be to use word-wrap plus flip for ie. Something like:

writing-mode: tb-rl;
filter: flipv fliph;

@penders

Which should be written as:

<!--[if lte IE 8]>
<link rel="stylesheet" href="css_ieonly.css" type="text/css">
<![endif]-->

Just recalling that all other downloads will be delayed until the sheet arrives. Depending on the situation, for only a few lines of code, it may be more efficient (and save hits) to just include the code rather than link out to an external style sheet.