“Cufon, meet Raphael”

Recently worked a very odd job where the client – for good reasons, believe it or not – needed not only a bespoke font embedded in a HTML page, but also wanted this rotated 90 degrees.
Flash (ie Sifr) was not an option and the solution had to be IE6 compatible….right.

Amazingly this actually did not prove a huge problem – using the Cufon javascript library to generate and embed the font (http://cufon.shoqolate.com/) and then the excellent Raphaël javascript library (http://raphaeljs.com/) to rotate this – the solution was as simple as the below (abbreviated, but you’ll get the gist).
Note one detail – on the Cufon generator page – you have to select the option to use Raphael as the target – in the final 3rd party customisation section.
For more Raphael options see this page: http://raphaeljs.com/reference.html#rotate

 
	//User Raphaël js library to rotate the Cufón replaced text (http://raphaeljs.com + http://cufon.shoqolate.com)
	function setRaphaelCufont(holder, text, fontSize, holderWidth, holderHeight, fontColor, leftAlign) {
		//left: 1720px; top: 45px; height: 1000px; width:170px;
		var r = Raphael(holder, holderWidth, holderHeight); //args: containerdiv, width, height
		var myFont = r.getFont("[first word of the font name defined using cufont]");
		var txt = r.print(0, 0, text, myFont, fontSize); //args: startX, startY, text, font, fontsize
		txt.attr({ fill: fontColor });

		//Note: default rotate behaviour will rotate each individual letter, so below says:
		// ... "rotate each letter 270 degrees *around the entire textareas top left corner*, and then afterwwards move down the page (translate) the pixel width of the textarea"
		txt.rotate(270, txt.getBBox().x, txt.getBBox().y);
		if (leftAlign) { //Move the printed text to start of containing box:
			txt.translate(0, holderHeight);
		}		
	}

Another interesting library for font replacement is Google’s new WebFont Loader.

Advertisements

One Response to “Cufon, meet Raphael”

  1. Paul Lovato says:

    You rock, thanks.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: