25 Feb 2012

Blog: Rotate cufon with Raphael

Correct rotated text with Raphael and Cufon

In a perfect world, this wouldn’t be needed.

In a perfect world, this could be achieved with CSS3, like so:

Of course, now, because of different browsers doing their own thing (wonder when they’ll quit doing that…), it’d be more like this:

But, still, it’d just be one line of css.

But because some people don’t want to switch their IE versions, for some reason, I need to find new and exciting ways to rotate Cufon text. If the text had been static, I might have used an image replacement to put the text in, even if IE6 would freak out about the transparent png, but this text is dynamic.

What you need

  1. Grab the latest version of Raphael
  2. Grab the latest version of Cufon
  3. Generate your font, making sure to choose, in the second to last section, called Customization (for 3rd-party scripts only), the second icon, which will change the function in the input from Cufon.registerFont to Raphael.registerFont

The magic snippet

A couple of years back, I had used this method to make text rotate by using this snippet of code:

Result of the old snippet

Of course, you’d have to change the ID_OF_ELEMENT, FONT_NAME, FONT_SIZE, the width, height, x and y to match your element/settings. When I used this snippet with the new version of Raphael, it didn’t work. What happened is that each letter rotated individually, instead of the whole content rotating as one, as seen on the right.

After googling the issue, I found this answer on github. I’ll repost the snippet of code you need, just to make things clear for everyone:

Correct rotated text with Raphael and Cufon

It works perfectly. One of the things you need to remember is that, sadly, CSS text-transform doesn’t work, nor does text-shadow. So, I had to put the text in capital letters, change the function a bit to fit my needs, and add stroke to the attributes, like so:

Raphael can be pretty nifty, but I long for the day I don’t need to use all this js to make simple things work correctly.

Share it!

Leave a Reply

Connect with Facebook