Adsum Drive Blog
Rotated custom fonts with Cufon and Raphael
I recently came across a problem while working on a client site that didn't have a quick obvious solution (at least to me). The design of the site called for their site tagline to be in a custom font (non-web-safe) and the font had to be rotated. Now normally this type of request could be done by creating a graphic and calling it a day. But, the client really wanted to be able to edit this tagline so I decided to use Cufon to do the text replacement and attempt to find a solution for the text rotation in CSS.
*** A little background here for those that don't know, Cufon is a great text replacement tool in javascript. Check it out on github.
So I started to do a little research. I came across an awesome blog post on rotating text with CSS. Check it out here at snook.ca. This was a great start, but of course the solution offered didn't work in IE. Actually.. it did work but only if you wanted to rotate at 90 degree intervals. Sadly, my design called for a -8 degree rotation so I was out of luck with this method. It's too bad too because this could have been all the code I needed
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-transform: rotate(-8deg);
AND if only this part could have worked!!!
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Posted on November 23, 2010 by Allan Mercado
Categories: Javascript