Text Rotation With CSS

Thankfully Many of the browsers support HTML ability to rotate elements. Even better we make it work in Internet Explorer (Even IE 5.5).

I used bit of HTML with sprinkle of CSS, its nice and clean without any extras. So lets make a Today's date in nice compact form so you can able to use it in a small space in your website

HTML

 
                                    

                                        29
                                        March
                                        2011
                                    
                                  
                                

Webkit and Firefox support transform property to handle the rotation. Note that if you are not using <span> than you mush use css property display: block; in order to transform an object.

CSS

1). For Webkit and Firefox

                                    -webkit-transform: rotate(-90deg); 
                                    -moz-transform: rotate(-90deg);	
                                

But for Internet Explorer you use following filter. The rotation property of the filter BasicImage can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

2). For IE

                                    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
                                

Here is a running example

What does this look like in action? Take a look at this page in Safari, Firefox or Internet Explorer and you should see something that looks like the following image. Probably the biggest downfall is the lack of consistency in text rendering. Internet Explorer will drop ClearType on any text that has a filter applied to it. You can also see the spacing between the day and the year is different between Safari and Firefox.