Schepp/fontrendering-detect.html

## fontrendering-detect.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>GDI vs. good font rendering detection</title>
<script>
// Anonymous function - prevents collisions
(function(){
	var fragment = document.createDocumentFragment(); // Creating a DOM fragment off the DOM

	var outerdiv = document.createElement('div');
	outerdiv.style.cssText = 'font:normal 10px arial;position:absolute;left:-40em;top:-10em;';
	fragment.appendChild(outerdiv);

	var innerdiv = document.createElement('div');
	innerdiv.style.cssText = 'color:#fff;float:left;font-size:33.3333%;';
	innerdiv.textContent = 'This is a text written in Arial';
	outerdiv.appendChild(innerdiv);

	//document.body.insertBefore(fragment, document.body.childNodes[0]); // Appending fragment
	document.getElementsByTagName('head')[0].appendChild(fragment);

	var width = window.getComputedStyle ? window.getComputedStyle(innerdiv,null).getPropertyValue('width') : '44px'; // Measuring width

	document.getElementsByTagName('head')[0].removeChild(outerdiv); // Removing fragment

	if(width === '44px'){
		document.documentElement.className += ' gdi';
	} else {
		document.documentElement.className += ' no_gdi';
	}
})();
</script>
</head>
<body>
	<h1>GDI vs. "good" font rendering detection</h1>

	<h2>Look at my source, my source is amazing</h2>

	<p>If GDI (or quivalent) font rendering is used in your current browser a class named "gdi" will have been added to the HTML element. Otherwise the classname is "no_gdi" (e.g. if it's DirectWrite or Quartz).</p>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>GDI vs. good font rendering detection</title>
	<script>
	// Anonymous function - prevents collisions
	(function(){
	var fragment = document.createDocumentFragment(); // Creating a DOM fragment off the DOM

	var outerdiv = document.createElement('div');
	outerdiv.style.cssText = 'font:normal 10px arial;position:absolute;left:-40em;top:-10em;';
	fragment.appendChild(outerdiv);

	var innerdiv = document.createElement('div');
	innerdiv.style.cssText = 'color:#fff;float:left;font-size:33.3333%;';
	innerdiv.textContent = 'This is a text written in Arial';
	outerdiv.appendChild(innerdiv);

	//document.body.insertBefore(fragment, document.body.childNodes[0]); // Appending fragment
	document.getElementsByTagName('head')[0].appendChild(fragment);

	var width = window.getComputedStyle ? window.getComputedStyle(innerdiv,null).getPropertyValue('width') : '44px'; // Measuring width

	document.getElementsByTagName('head')[0].removeChild(outerdiv); // Removing fragment

	if(width === '44px'){
	document.documentElement.className += ' gdi';
	} else {
	document.documentElement.className += ' no_gdi';
	}
	})();
	</script>
	</head>
	<body>
	<h1>GDI vs. "good" font rendering detection</h1>

	<h2>Look at my source, my source is amazing</h2>

	<p>If GDI (or quivalent) font rendering is used in your current browser a class named "gdi" will have been added to the HTML element. Otherwise the classname is "no_gdi" (e.g. if it's DirectWrite or Quartz).</p>
	</body>
	</html>