homepage Welcome to WebmasterWorld Guest from 54.145.183.190
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Rotate text 90 degrees
shahzad80



 
Msg#: 4349800 posted 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.

 

penders

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



 
Msg#: 4349800 posted 8:56 am on Aug 10, 2011 (gmt 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?

penders

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



 
Msg#: 4349800 posted 9:58 am on Aug 10, 2011 (gmt 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.

penders

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



 
Msg#: 4349800 posted 2:04 pm on Aug 10, 2011 (gmt 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]-->

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4349800 posted 4:34 pm on Aug 13, 2011 (gmt 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.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved