Welcome to WebmasterWorld Guest from 54.198.46.95

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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month