To Rotate Text by CSS3

Posted: November 11, 2010 in CSS, HTML
Tags: ,

Within the article I linked to, the example uses an image sprite and a sprinkle of CSS to get things positioned right. Well, maybe not so much a sprinkle. It’s like the top fell off the pepper shaker and you’ve suddenly got a large pile of pepper on your food. It makes me want to sneeze.

Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask? Okay, let’s look at the HTML.

<div>
  <span>31</span>
  <span>July</span>
  <span>2009</span>
</div>

Nice and clean without too many extras. I conscientiously chose the date order I did to avoid having to use a comma. Otherwise, an extra span would be required to remove the comma from our final design.

The Magical CSS
For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. Each browser requires its property prefix for now.

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

In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.

When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I’d say) in using filters. Although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.

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

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

The BasicImage filter has other properties that can be set such as mirroring, masking, greyscale and others. Alternatively, you can take advantage of the Matrix filter but the coordinates still don’t make any sense to me.

In Action

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. The differences in text rendering make it more difficult to create “pixel perfect” layout.

Here’s hoping the article has offered up a little inspiration and shown that even IE has a few tricks up its sleeve, allowing us to pull off some layout fun.

Advertisements
Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s