thisandagain · October 23, 2013 20:54 · AWinterman · Oct 24, 2013
diff --git a/kern.js b/kern.js
 /**
 * Framework-less kerning support for browsers.
 *
 * @package kern
 * @author Andrew Winterman <[email protected]>
 *         Andrew Sliwinski <[email protected]>
 */

 /**
 * Export
 *
 * @param {object} DOM element to apply kerning to
 * @param {array} An array of adjustment values for each character
 */
 window.kern = function (element, table) {
    var text = element.innerHTML;
    var split = text.split('');

    // Build up sub elements
    var elements = '';
    for (var i = 0; i < split.length; i++) {
        elements += ('<div>' + split[i] + '</div>');
    }

    // Replace element contents
    element.innerHTML = elements;

    // Apply styles
    var children = element.children;
    for (var c = 0; c < children.length; c++) {
        children[c].style.display = 'inline-block';
        children[c].style.marginLeft = table[c] + 'px';
    }
 };
diff --git a/z~index.html b/z~index.html
 <html>
    <head>
        <title>Kern</title>

        <style>
            body {
                margin: 40px 0 0 0;
                padding: 0;
                font-family: Helvetica, sans-serif;
            }

            h1 {
                font-size: 6em;
            }

            #container {
                width: 600px;
                margin: 0 auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!-- Ye olde container element -->
        <div id="container">
            <!-- Element to be kerned -->
            <h1 id="kernMe">Kerning</h1>

            <!-- Some other stuff -->
            <p>In typography, kerning (less commonly mortising) is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters.</p>
        </div>

        <!-- JS -->
        <script src="../kern.js"></script>
        <script>
            var element = document.getElementById('kernMe');
            kern(element, [
                1, -20, 3, -4, 25, -6, 7
            ]);
        </script>
    </body>
 </html>
	/**
	* Framework-less kerning support for browsers.
	*
	* @package kern
	* @author Andrew Winterman <[email protected]>
	* Andrew Sliwinski <[email protected]>
	*/

	/**
	* Export
	*
	* @param {object} DOM element to apply kerning to
	* @param {array} An array of adjustment values for each character
	*/
	window.kern = function (element, table) {
	var text = element.innerHTML;
	var split = text.split('');

	// Build up sub elements
	var elements = '';
	for (var i = 0; i < split.length; i++) {
	elements += ('<div>' + split[i] + '</div>');
	}

	// Replace element contents
	element.innerHTML = elements;

	// Apply styles
	var children = element.children;
	for (var c = 0; c < children.length; c++) {
	children[c].style.display = 'inline-block';
	children[c].style.marginLeft = table[c] + 'px';
	}
	};
	<html>
	<head>
	<title>Kern</title>

	<style>
	body {
	margin: 40px 0 0 0;
	padding: 0;
	font-family: Helvetica, sans-serif;
	}

	h1 {
	font-size: 6em;
	}

	#container {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<!-- Ye olde container element -->
	<div id="container">
	<!-- Element to be kerned -->
	<h1 id="kernMe">Kerning</h1>

	<!-- Some other stuff -->
	<p>In typography, kerning (less commonly mortising) is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result. Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters.</p>
	</div>

	<!-- JS -->
	<script src="../kern.js"></script>
	<script>
	var element = document.getElementById('kernMe');
	kern(element, [
	1, -20, 3, -4, 25, -6, 7
	]);
	</script>
	</body>
	</html>