Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Dynamic Web Font Sizes
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment