pfeilbr/dynamic-web-font-sizes.html

## 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>