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);
So that blog post led me to another possible method that actually covered all of the major browsers, it involved the matrix transform, a whole lotta math and some very interesting calculations. Luckily, the folks over at boogdesign.com took the time to figure all of this out and created a nice online calculator for figuring out what numbers to stick in your CSS. Check that out here. I plugged in my -8 degree rotation and this is the CSS that popped out
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.99026807, M12=0.13917310, M21=-0.13917310, M22=0.99026807,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99026807, M12=0.13917310, M21=-0.13917310, M22=0.99026807,sizingMethod='auto expand');
-moz-transform: matrix(0.99026807, -0.13917310, 0.13917310, 0.99026807, 0, 0);
-webkit-transform: matrix(0.99026807, -0.13917310, 0.13917310, 0.99026807, 0, 0);
-o-transform: matrix(0.99026807, -0.13917310, 0.13917310, 0.99026807, 0, 0);
So.. this should work right? Well it almost did. Except of course, with our old friend IE - the rotation didn't work if the text replacement was in place. So I was back to the drawing board.
Luckily then I changed my google search and I stumbled upon the Raphael javascript library. Raphael is a small library for placing vector graphics on the web. It also has integration with Cufon! Score :) So after reading up a bit on the Raphael site and this blog post about using Cufon with Raphael I gave it a shot.
A few things jumped out right away - first the Raphael docs don't have a ton of examples so its a lot of trial and error, and second - judging by my google searches not that many people use Raphael for just rotating text (lots of other cool uses).
Anyway, so this long winded blog post has lead us to this - my step by step guide to using Cufon and Raphael to rotate non-web-safe font on your next project :)
- Download Cufon - http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i
- Download Raphael - https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js
- Generate your Cufon/Raphael compatible font file at http://cufon.shoqolate.com/generate/. The important thing here is to select the Raphael library at the Customization step. You do this by clicking on the Raphael logo (on the right) instead of the default Cufon. This will change the Javascript function to Raphael.registerFont.
- Add the Raphael and font files to the head section of your html
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/myfontfile.js"></script> - Create a div somewhere on your page where you're going to add your rotated text. In my case I called this div tagline
<div id="tagline"></div> - In your document ready routine we're going to create a Raphael canvas and inside of that canvas we will use the print() routine to add the text using your custom font. Then we'll use the rotate() routine to finish it up with the rotation
$(document).ready(function() {
var r = Raphael("tagline", 500, 200);
var text = r.print(0, 0, "THIS IS MY TEXT TO ROTATE", r.getFont("FontFamilyName", 30).attr({fill: '#ccc'});
text.rotate(-8, 0, 0);
});
So let's go over this quickly.
The first line of our function identifies our html element that we will use to create a canvas. In this case we are using the tagline div and we will create a canvas 500px wide and 200px high.
Next we use the print() routine to add our text. If we were not using Cufon, we would use text(). For this simple example we are going to add the text at x=0 and y=0. The next parameter is our actual text, followed by our font. We use the getFont routine to attach our custom font to this print call. If you were to open up your font js file, right at the top of your file you will see the font-family tag. Use whatever is in that tag for the getFont call. In my example I am using the Franchise font, so my getFont call would be
r.getFont("Franchise", 30);
Where 30 is the font-size in pixels.
So now we have our font set up. The next step is to add any attributes to the font that we want to use. Here I have just made the font a grey color using fill: #CCC.
The last step is to actually rotate the text. Here we specify the amount of rotation in degrees as the first parameter, and the last two parameters are co-ordinates that Raphael will use to actually do the rotation around.
So that's that. I hope this helps people out. Oh, and sorry I don't have an actual example here.. I'll add the link to my client site as soon as we launch that site :)
*EDIT* - Here's a link to the site I was working on when I wrote this. www.fingerfoodstudios.com Check out the main tagline that currently reads "SATISFY YOUR APPETITE". That's the text that caused all this trouble!
Cheers
Allan
Posted on November 23, 2010 by Allan Mercado
Categories: Javascript