Welcome to WebmasterWorld Guest from 54.205.20.160

Forum Moderators: not2easy

Message Too Old, No Replies

Rotate text 90 degrees

   
3:30 am on Aug 10, 2011 (gmt 0)



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.
8:56 am on Aug 10, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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?
9:58 am on Aug 10, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
2:04 pm on Aug 10, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



(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]-->
4:34 pm on Aug 13, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.