"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

CSS3: Rotating Text

CSS3 brings a lot of neat elements. Unfortunately, some elements are not fully supported, or just difficult to figure out how to use. This entry goes over how to rotate text that works in all browsers.

If you look at my home page, or on the Articles page, you'll see that the dates are rotated. How do we do that? Well, with a little bit of simple CSS styling, it's quite easy! The hard part is working with positioning... But, we'll try to go over that here!

The CSS Code

In case you're just here to see the CSS code, it's just below. Under it, I've got a very simple tutorial on how to use it.


-moz-transform:rotate(270deg);
-webkit-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

This code creates the rotation used on my site for the date elements. It rotates the text so the bottom is facing to the right.

Breakdown...

The first element, -moz-transform... handles rotation in Firefox (details). The second one, -webkit... handles rotation in Safari and Google Chrome (details). The final one handles rotation in none else but Internet Explorer (details). Surprisingly, IE has supported this since IE5.5! Weird!

Simple Usage...

First, we're going to make a simple paragraph. In that paragraph, I'm going to have a <span> element with the date in it. I'll give this span a class of "rotateText". So... here we go.


<p class="relative"><span class="rotateText">January 1, 2000</span>This date marks the start of the new millennium! What things will come to us in the next thousand years? I'm not really quite sure, but I'm sure there will be some advancements in technology. Perhaps, the internet will get much faster, smarter, and cleaner. I bet there will be some advancements in using CMS's to help make publishing content a lot easier. What do you think?</p>

Ok... now that we have our simple paragraph, we need to style it up.
Here's some simple CSS styling...


.rotateText {
-moz-transform:rotate(270deg);
-webkit-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
background:#474747 none repeat scroll 0 0;
color:#ECECEC;
position:absolute;
left:-65px;
top:78px;
font-weight:bold;
padding:2px 4px;
font-family: arial;
}
.relative { position: relative; }

You probably noticed that I added some additional styling to it. That's ok though. It's just to style and move the element to where it needs to be. To place the date where I want, I made it an absolute position. But, for this to work, I need to make the paragraph a relative position. This makes the absolute positioning relative to the paragraph, not the whole page.

On my site, I had to make a conditional stylesheet for IE to fix the positioning. I won't include that code here, but I'm just telling you as a heads up... you may want to check that.

And...that's all there is to it! An example can be found on the home page, or on any of the Articles pages.