CSS3 rotate alternative?

Question

I am using the CSS3 rule "rotate" to rotate a div containing text. You can see the page here: http://vitaminjdesign.com/v2/socialmedia.html. I am looking for cross-browser support for rotating the div; however, this CSS3 rule won't work on IE. Is there a jQuery option or another JavaScript solution that will yield the same result, with cross-browser compatibility?

Solution 1

Using Sandpaper, you can use this CSS rule:

-sand-transform: rotate(90deg);

And it'll work in every browser - even in IE.

Solution 2

If you want css rotations compatible with old versions of IE, there's a filter progid:DXImageTransform.Microsoft.Matrix for that but it can be applied only once and many calculations are involved when you calculate the final matrix out.

Solution 3

I'd use Raphael and Cufon for this sort of thing, although you have to roll your own word-wrapping when you rotate because you'll have to use Raphael's print instead of Cufon's replace. That way the fonts are vectors and the rotations are handled in a purely geometric way.

Current problems with css-rotate go beyond cross-browser compatibility, though--in the browsers that do support it, the results often look like crap. Your site in my Firefox 3.6 looks like an aliased mishmash on uneven baselines. I know you asked a specific question, which I did my best to answer, but my advice to you is to ditch the overhead of js libraries for what you are trying to accomplish here, and just go with a high quality image. You've already invested bandwidth in the "hanging tags" backdrop image, so the cost of adding text to that image is minimal, while the cost of whole new js libraries to handle the issue of text rotation for you properly will be quite high. Not the most cutting-edge solution, I'll grant you... but that's where we are today.

Comments

[JCHASE11]

I completely agree...but for SEO purposes (from a web design company) that is not an option.

[JCHASE11]

just like css3, the rendering of the text isnt smooth. This is my best option, but its not a GREAT option.

[Douwe Maan]

Well, it's CSS3 for browsers that support it, and it uses IE's fugly proprietary CSS for IE-like browsers, so it's about the best you'll get using code...

[JCHASE11]

It isn't any better than standard CSS3. The text is still jumbled in some browsers...The only benefit is that it supports IE....