Cross Browser Text Rotation just with CSS Transforms & HTML


I keep getting frequent emails and questions regarding CSS and JavaScript hacks. This time, one of the developer wanted to know how to rotate text in CSS. So, this post is all about rotating text with CSS & HTML. I have not used JavaScript for doing it and it is not necessary too.

The first rule to know!  :
There is no single universal property in CSS to rotate text which works on all the versions of all the browsers.

So, it is obvious that we need to write CSS for all the browsers. Now, assuming that the output we are expecting is something like below,


the very first thing we need to know is the angle at which we need to rotate the text. It is very easy if you know basic math. For example, The above text is rotated to 300 Degrees. Let us first write some code to see how we can rotate text.

Now, the CSS Class for rotation would be
.box_rotate
  {
    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
    M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
   }
Not simple?

OK. Let me make it clear. There are 4 parameters in above code. M11, M12, M21 & M22. They mean nothing but the angle of rotation.

Assuming THETA is the angle of Rotation,

M11 = COS THETA,
M12 = -SIN THETA,
M21 = SIN THETA,
M22 = COS THETA

So, if you want to rotate text to 300 degrees,

M11 = COS 300,
M12 = -SIN 300,
M21 = SIN 300,
M22 = COS 300,

So, use a Scientific Calculator to calculate the above and the output will be

M11=0.50000000
M12=0.86602540
M21=-0.86602540
M22=0.50000000

And exactly, this is what i have specified in the above CSS class!
Now simple? Yes it is.

Hold on. You see a weird comment which says /* IE6–IE8 */ in the above code. It exactly means what it says. It is for Older IE browsers. Let us go a step further to make it compliant with modern browsers. So, the modified CSS becomes
.box_rotate
        {
            -moz-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
                     M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
        }

The good thing is that, Mozilla and Webkit based browsers already have support and you can specify the rotation angle as a parameter directly. However, even older IE browsers has some support but you need to mention something like 1,2,3,4 to rotate and you cannot provide rotation angle of your choice like 110, 221 etc. So, the above code is good enuf and rotation works best with Matrix values even for older IE browsers.

Well, I did not try this with IE10 yet but hope it works as I have provided the -ms-transform for IE 9 +. And if you don't want to do COS SIN Bla bla bla then here is a link which can give you the calculations if you just enter the rotation angle in degrees.

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

You can also specify an optional writing mode as a css property to indicate how text is written, for example

.box_rotate
        {
            -moz-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
                     M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
    writing-mode: tb-rl; 
        }

The below list can make you to understand the writing mode and flow.

    lr-tb – This is the default value, left to right, top to bottom
    rl-tb – This flows the text from right to left, top to bottom
    tb-rl – Flows the text vertically from top to bottom, right to left
    bt-rl – bottom to top, right to left
    tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
    bt-lr – Bottom to top, left to right
    lr-bt – Left to right, bottom to top
    rl-bt – Right to left, bottom to top

Try out the above writing modes and Have fun. And Here is the complete listing

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .box_rotate
        {
            -moz-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            -ms-transform: rotate(300deg); /*Internet Explorer 9 + */
            filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE8 */
                     M11=0.50000000, M12=0.86602540, M21=-0.86602540, M22=0.50000000, sizingMethod='auto expand');
        }
    </style>
</head>
<body>
    <br />
    <table>
        <tr>
            <td>
                <div class="box_rotate">
                    Rotated 1</div>
            </td>
            <td>
                <div class="box_rotate">
                    Rotated 2</div>
            </td>
            <td>
                <div class="box_rotate">
                    Rotated 3</div>
            </td>
        </tr>
    </table>
</body>
</html>
More details can be found at http://www.css3files.com/transform/

Details related to Browser support for CSS Transforms: http://caniuse.com/transforms2d

Remember, CSS Transforms are not just meant for rotating the text. They can do a lot more like 2D and 3D !
The above code can be used even for images!

Lets do programming together. You can follow me on twitter @MSGuyTweets or find me on Facebook at Facebook.com/MysoreGuy

Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Real time Push Notifications with SignalR & PNotify (Pines Notify)

What's new and expected in .NET Framework 4.5