Rick Dangerous II dynamic font

My take on dynamic text replacement. I used the font of Rick Dangerous 2, but the technique is valid for any generated font image (see e.g. NFG Arcade Font Engine).

1. Image generation

A simple PHP script, rick-png.php, generates the image dynamically using a bitmap file of the font alphabet.

2. Text replacement

The following javascript replaces all text in h2 tags with generated images. I wanted the replacement to happen upon completion of generating and loading the image.

function rick(){
	var e=document.getElementsByTagName('h2');
	var a=[];
	for(var j=0; e.length>j; j++){
		var t=e[j].textContent;
		if(t==undefined)t=e[j].innerText;
		a[t]=e[j];
		var i=document.createElement('img');
		i.alt=t;
		i.onload=function(){
			a[this.alt].replaceChild(this,a[this.alt].firstChild);
		};
		i.src='http://www.gullnokkelen.com/rick-png.php?t='+t;
	}
}
window.onload=rick;

This method should be good for search engines and for unsupported clients, because the original text will be used.

P.S. In the code above, we depend on the a[] array and image alt attribute, but a perhaps cooler way is to use closures (which also works with multiple identical texts, unlike the former method):

function rick(){
	var e=document.getElementsByTagName('h2');
	for(var j=0; e.length>j; j++){
		var t=e[j].textContent;
		if(t==undefined)t=e[j].innerText;
		var i=document.createElement('img');
		i.alt=t;
		i.onload=clos(e[j]);
		i.src='http://www.gullnokkelen.com/rick-png.php?t='+t;
	}
	function clos(e){
		return function(){
			e.replaceChild(this,e.firstChild);
		};
	}
}
window.onload=rick;

P.P.S. Wouldn't it be cool if this CSS could work: h2{ content: url('http://www.gullnokkelen.com/rick-png.php?t=' attr(title)); }

Tags: php, javascript

Created on Sat, 24 Mar 2012 13:49