Welcome to WebmasterWorld Guest from 107.20.37.212

Forum Moderators: not2easy

Message Too Old, No Replies

Rotate text 90 degrees

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

New User

joined:Aug 10, 2011
posts: 2
votes: 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)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


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

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members