One of my favorite things to write about is new gadgets. I’ve made posts in the past about having gadgetitis, and I have to admit that as soon as my eyes get glued on all the fun things at ThinkGeek.com, it’s really hard to peel them away and get back to the more important things in life (like work!).
When it comes to the web, the best acquisition of “new gadgets” is whenever I discover that a browser has implemented something from CSS3 that I can put into use now. Lucky for me, webkit browsers (Safari and Chrome) and Firefox move up to speed. Internet Explorer is often behind a bit, but I’ll survive that because of an awesome thing called filters.
Recently, on a site I was working on, I decided to take a piece of the design that requires text to fall at a slanted level, and use text-rotation on it. It was miserable to implement, but when it was completed, I felt very successful. And so, that’s why I want to talk about it as my most recent gadget! Let’s look at a few things:
How to Implement Text Rotation in MOSe
The fun thing about text rotation is that it doesn’t function the same in every browser (hello, duh! What CSS does?), so in this case – designing means that you will have be more flexible. Safari, Chrome, and Mozilla support rotating text at any degrees, however, IE only supports rotating in 90 degree intervals, and Opera doesn’t support it at all (My professional opinion in regards to this is a rude comment towards Opera).
To add text rotation, you’ll of course have to set up your HTML with the appropriate ids/classes for targeting. Make a note that if you rotate a parent (<ul>) and rotate the child (<li>) then both rotations will affect the child element.
Once the HTML has been created, here is where you add your CSS. At Mindfly, we have a separate sheet for all these fun CSS3 trinkets so that our other CSS will validate. I would do something like this:
#menu li
{
-webkit-transform : rotate(-70deg);
-moz-transform : rotate(-70deg);
}
Easy enough, right? The problem here, of course, is that IE only accepts things in a 90 degree radius. Also, if you want your items to stand next to each other, you have to do some funky absolute positioning to get it to work. I’ve set up an example to see here (in which I used a lot of fun absolute positioning to get things to sit next to each other correctly, yay!).
And Getting the Stupid Thing to Run in IE
Once you’ve got your rotation set up, it’s time to fix it in IE… ah, doesn’t that sound like the way things usually go? Of course, there are multiple browsers of IE to consider. Luckily for us, most filters work all the way back to 5.5. In this case, we’ll be using the deceptively named BasicImage filter.
Now, this has to be implemented differently for IE8 as it does for IE7 due to the fact that when our wonderful Microsoft developers made IE8, they made it right. To be CSS 2.1 compliant, there has to be browser-specific prefix syntax (as we see above with -moz- and -webkit-). The same is required for -ms- filters in IE8 – but not for IE7 or below.
When you’re setting up your IE specific stylesheet, you will want to use something like the following:
#menu li
{
-ms-filter :"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter : progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Note that the -ms- version has to come before the other, or IE8 will not render it correctly. Also, if you used fun funky absolute positioning like I did, then you’re going to need to fix your list items so that they line up correctly.
You can view the same example page in IE all the way down to 6 and it should render at least close in each one.
What About Opera?
As a designer, we often get tired of inconsistencies among browsers. Usually I’m saying things like “Forget IE”, but in this case I say “Forget Opera”. Or, at least – style for Opera first and then override it with your funky stuff. At least IE has conditional comments that will allow you to adjust for its inconsistencies.
