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

Image upload using JQuery + Uploadify + ASP.Net Custom Handler

Image
Recently, I worked on a small POC to upload image files to web server and without a visible postback. There are many solutions to upload a file to server and among many of them, one of the interesting solution is to use a jquery plugin called Uploadify . Well, the advantages of Uploadify are You can upload one or more files  It is a Jquery implementation. Works on multiple browsers. Many options to try (Set file size limit, File type filter, Callback after upload etc) You can bend it based on  your needs. Look and feel is customizable.
Read more

Generating reports with Templater, MS Word & C#

Image
Whenever developers think of report design or development, they actually think of SSRS or other report designers/engines. But many times it happens like just for the sake of few basic reports, customers will not be ready to buy those expensive reporting tools and also it is obvious that using such tools are meaningless for a small requirement. You can create reports with MS Word and MS Excel easily, it was not so easy to push data into it programmatically. In this post, let us look into a small reporting library known as " Templater " to push data into reports. Well ,
Read more

Creating a cool Microsoft Word Report for listing Scientists with Templater and C# Generic List

Image
Some time back, I had written a post on Templater Library for creating a simple "Prize Winner Notification" e-mailer template using MS Word & Templater. It was a simple one. If you have not read it yet, please have a look at this Post . In this post, let us create a Microsoft Word Report which lists few great scientists across the world. Also, let us see how the Templater supports Generic List as a data source for the report.
Read more