I've been working on a web side project and it's drawn me down into the abyss of javascript and page rendering concerns. While using jQuery has made things easier, I still ran into what seems like a common problem.

I want to resize text objects to a percentage of width of the browser window, or match them up to an image. To do that, I need to know how many pixels go into an em on the user's screen. I ended up with the following jQuery-based solution:

document.prototype.pixels_per_character = function(selector, character) {
	// returns array of character size in px [ horizontal, vertical ]
	//   selector  = jQuery selector, e.g. 'body'
	//   character = string to measure, e.g. 'M', or 'n'
	//
	// one could abuse this and pass in other html as well
	
	var hidden = $('<span>' + character + '</span>'); 
	$( selector ).append(hidden);

	var horizontal = hidden.attr('offsetWidth');
	var vertical = hidden.attr('offsetHeight');

	hidden.hide();

	return { 'horizontal': horizontal, 'vertical': vertical };
}

Now I can resize textareas to percentage widths, which avoids the annoying textarea too big or too small problem, in addition to making layout just a heck of lot more sane.