Rotating text with CSS and IE

Question

I need to rotate text with CSS. I have the following style rules but they do not appear to work in Internet Explorer.

.footer #descr span {
    -moz-transfo         


        

Answer 1

IE doesn't support some features of CSS3.The solution: let it degrade gracefully in IE and let people with a modern browser enjoy modern websites.

Answer 2

Older versions of IE ( 8 and below ) do not support CSS3

Answer 3

This works for IE:

-ms-transform: rotate(-20deg);

Answer 4

To get this working in IE < 9 you would need to use CSS Sand paper, which is a polyfill for CSS transformations: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 5

Below IE9, Internet Explorer has effectively zero inbuilt support for CSS3 or any other standard web technologies such as SVG that would allow you to rotate text cross platform as you wish. Microsoft have included two ways of rotating elements (eg text) since IE6, however the more simple method only works in increments on 90 degrees, like so:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */

If you really need to attain that 340/-20 degrees you included in your example then you will need to try your hand at something more difficult, documented here: MSDN Matrix Filter. Given how unnecessarily complex that looks, a quick Google search revealed a nice calculator that will generate an -ms-filter CSS rule for you: Matrix Calculator.

Bear in mind that both of these features are meant to be deprecated in IE9 which I believe supports -ms-transform instead. Depending on whether Microsoft defines deprecated as removed or advised against you may want to check that IE9 isn't rotating your text twice.

.footer #descr span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
    -ms-transform: rotate(-20deg); /* IE9+ */
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari & Chrome */
    transform: rotate(-20deg);
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

To be perfectly honest though, if you are intending to make use of HTML5 and/or CSS3 then I would agree with Duopixel's answer that including a CSS3 library via javascript would be sensible. Given users of Windows XP cannot upgrade past IE8 then it is a good idea for any commercial site to support it.

Answer 6

The only thing that worked for my situation was to use CSS Sandpaper - once I had that integrated, I tried the following CSS code...

#vertbar p.name {
    -sand-transform: rotate(180deg);
}

and voila! IE rotated the text vertically, reading from bottom-to-top. However, in all other browsers, this orientation is considered 270 degrees.

I now had other browsers rotating the text at a different angle to IE, as if the IE coordinate system is back-to-front (I wouldn't be surprised...)

I thought I'd try a conditional comment to serve the -sand-transform rule to IE browsers only. For whatever reason, IE ignored this and so the rotation wasn't even applied (does IE10 ignore conditional comments?)

So now I had the problem of getting all browsers to do it the same. Rearranging the order of the rules and setting 180 degrees for IE and 270 degrees for the others, I finally had a CSS rule that worked to rotate the text vertically, reading bottom-to-top, in Firefox, Chrome, Safari and IE!

#vertbar p.name {
    -sand-transform: rotate(180deg);
    -webkit-transform: rotate(270deg) !important;
    -moz-transform: rotate(270deg) !important;
    -o-transform: rotate(270deg) !important;

    font-size: 14px;
    text-transform: capitalize;
    display: block;
    white-space: nowrap;
    height: 330px;
    text-align: left;
    color: #FFF;
    line-height: 40px;
    margin-top: 0px;
}

Hurray! Hopefully this is of help to someone, I wasted over 2 hours trying to get this sorted. :P

Update: Just wanted to make a correction - 270 degrees is 270 degrees in all browsers. I discovered that I had another rule with a rotation of 90 degrees, which was being added to a second rule of 180 degrees, to give a total of 270. So it was interesting to note the rotation value is relative (additional?) rather than absolute.