pfeilbr · September 28, 2011 17:56
diff --git a/dynamic-web-font-sizes.html b/dynamic-web-font-sizes.html
 <!DOCTYPE html>

 <html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>untitled</title>
 	<meta name="generator" content="TextMate http://macromates.com/">
 	<meta name="author" content="Brian Pfeil">
 	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen" title="no title" charset="utf-8">
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript" charset="utf-8">

 	function l(s) {
 		var log = document.getElementById('log');
 		var e = document.createElement('div');
 		e.appendChild( document.createTextNode(s) );
 		log.appendChild(e);
 	}

 	jQuery(function($) {
 		
 		function bestFitTextSize(text, css, width, height) {
 			var pixel = 1;
 			
 			do {
 				css['font-size'] = (pixel++) + 'px';
 				s = sizeWithText(text, css);
 			} while ( (s.w < width) && (s.h < height) )
 			
 			return pixel - 2;
 		}
 		
 		function sizeWithText(text, cssStyles) {
 			// create temp element to hold our text
 			var e = document.createElement('span');
 			e.appendChild(document.createTextNode(text));
 			
 			// apply any styles that have been passed in
 			// to our element - these can affect the text size
 			for (var prop in cssStyles) {
 				e.style[prop] = cssStyles[prop];
 			}
 			
 			// hide our temp element
 			e.style['visibility'] = 'hidden';
 			
 			// add to DOM in order to have it render
 			document.body.appendChild(e);
 			
 			// get the bounding rectangle dimensions
 			var s = {w: e.offsetWidth, h: e.offsetHeight};
 			
 			// remove from DOM
 			document.body.removeChild(e);
 			
 			return s;
 		}
 		
 		// box we want to fill with text
 		var c = document.getElementById('content');
 		
 		// out text
 		var text = 'Lorem ipsum dolor sit amet';

 		// styles
 		var cssStyles = {
 			'font-family': 'Impact',
 			'font-style': 'normal',
 			'font-weight': 'bolder',
 			'letter-spacing': '1px',
 			'text-shadow': '3px 3px 3px white'
 		};
 		
 		// size the text to fit
 		function applyBestFitText() {
 			// get the pixel size for the font
 			var px = bestFitTextSize(text, cssStyles, c.offsetWidth, c.offsetHeight);
 			cssStyles['font-size'] = px + 'px';
 			
 			// set the text
 			c.innerHTML = text;
 			
 			// apply our styles
 			for (var prop in cssStyles) {
 				c.style[prop] = cssStyles[prop];
 			}
 		}
 		
 		// adjust if the size changes
 		window.addEventListener('resize', applyBestFitText, false);
 		
 		// call for first time adjustment
 		applyBestFitText();
 	});

 	</script>
 	<style type="text/css" media="screen">
 	#content {
 		min-width: 200px;
 		max-width: 800px;
 		height: 100px;
 		background-color: rgba(0,0,0,0.3);
 	}
 	</style>
 	
 </head>
 	<body>
 		<div id='content'></div>
 		<div id='log'></div>
 	</body>
 </html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="generator" content="TextMate http://macromates.com/">
	<meta name="author" content="Brian Pfeil">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">

	function l(s) {
	var log = document.getElementById('log');
	var e = document.createElement('div');
	e.appendChild( document.createTextNode(s) );
	log.appendChild(e);
	}

	jQuery(function($) {

	function bestFitTextSize(text, css, width, height) {
	var pixel = 1;

	do {
	css['font-size'] = (pixel++) + 'px';
	s = sizeWithText(text, css);
	} while ( (s.w < width) && (s.h < height) )

	return pixel - 2;
	}

	function sizeWithText(text, cssStyles) {
	// create temp element to hold our text
	var e = document.createElement('span');
	e.appendChild(document.createTextNode(text));

	// apply any styles that have been passed in
	// to our element - these can affect the text size
	for (var prop in cssStyles) {
	e.style[prop] = cssStyles[prop];
	}

	// hide our temp element
	e.style['visibility'] = 'hidden';

	// add to DOM in order to have it render
	document.body.appendChild(e);

	// get the bounding rectangle dimensions
	var s = {w: e.offsetWidth, h: e.offsetHeight};

	// remove from DOM
	document.body.removeChild(e);

	return s;
	}

	// box we want to fill with text
	var c = document.getElementById('content');

	// out text
	var text = 'Lorem ipsum dolor sit amet';

	// styles
	var cssStyles = {
	'font-family': 'Impact',
	'font-style': 'normal',
	'font-weight': 'bolder',
	'letter-spacing': '1px',
	'text-shadow': '3px 3px 3px white'
	};

	// size the text to fit
	function applyBestFitText() {
	// get the pixel size for the font
	var px = bestFitTextSize(text, cssStyles, c.offsetWidth, c.offsetHeight);
	cssStyles['font-size'] = px + 'px';

	// set the text
	c.innerHTML = text;

	// apply our styles
	for (var prop in cssStyles) {
	c.style[prop] = cssStyles[prop];
	}
	}

	// adjust if the size changes
	window.addEventListener('resize', applyBestFitText, false);

	// call for first time adjustment
	applyBestFitText();
	});

	</script>
	<style type="text/css" media="screen">
	#content {
	min-width: 200px;
	max-width: 800px;
	height: 100px;
	background-color: rgba(0,0,0,0.3);
	}
	</style>

	</head>
	<body>
	<div id='content'></div>
	<div id='log'></div>
	</body>
	</html>