// Finds all h1 headers and uses the text of each header to generate an image. We have some server side code that renders a nice header using custom fonts/styles. The header requires an inline span-element for this to work. The bitmap will be layered on top of the original text. If the script fails or the header is empty, we do nothing. The results is that the header will be displayed normally. Some benefits are that copy/paste is fully supported, screen readers can read the inline text normally, and for other css-media this can be overruled by setting the inline span to non-visible/hidden.
function FixHeaders()
{
//return;
	try
	{
		// Find all headers.
		var headers = document.getElementsByTagName("h1");
		for (i=0; i < headers.length; i++)
		{
			// Check if the header has a span.
			var spans = headers[i].getElementsByTagName("span");
			if (spans.length == 1)
			{
				var styleObject = spans[0].style;
				
				// Get the text from the header.
				var text = document.all ? headers[i].innerText : headers[i].textContent;
				if ((text == "") || (text == null)) return;
				
				// Set the appriopriate css properties.
				styleObject.backgroundImage = "url(\"/h1.aspx?text=" + escape(text) + "&js=1\")";
				styleObject.backgroundRepeat = "no-repeat";
				styleObject.backgroundPosition = "bottom left";
				styleObject.paddingBottom = "6px";
				styleObject.zIndex = "1";
			}
		}
	}
	catch (e)
	{
		// Exit silently. If a browser does not support this function, then the plain text title will simply be shown.
	}
}