bugfix and simplification (+optimization)

README.md

@@ -6,10 +6,10 @@ We'll start with some really basic markup:
 
 	<h1 class="fancy_title">Some Title</h1>
 
-After including jQuery, [download and include the minified version of Lettering.js](http://github.com/davatron5000/Lettering.js/downloads), then a script block with the magical `.lettering()` method:
+After including jQuery, [download and include the minified version of Lettering.js](http://github.com/maranomynet/Lettering.js/raw/master/jquery.lettering-min.js), then a script block with the magical `.lettering()` method:
 
 	<script src="path/to/jquery-1.4.2.min.js"></script>
-	<script src="path/to/jquery.lettering.min.js"></script>
+	<script src="path/to/jquery.lettering-min.js"></script>
 	<script>
 	$(document).ready(function() {
 	  $(".fancy_title").lettering();
@@ -19,16 +19,16 @@ After including jQuery, [download and include the minified version of Lettering.
 The resulting code will churn your `.fancy_title` and output the following:
 
 	<h1 class="fancy_title">
-	  <span class="char1">S</span>
-	  <span class="char2">o</span>
-	  <span class="char3">m</span>
-	  <span class="char4">e</span>
-	  <span class="char5"></span>
-	  <span class="char6">T</span>
-	  <span class="char7">i</span>
-	  <span class="char8">t</span>
-	  <span class="char9">l</span>
-	  <span class="char10">e</span>
+	  <span class="char char1">S</span>
+	  <span class="char char2">o</span>
+	  <span class="char char3">m</span>
+	  <span class="char char4">e</span>
+	  <span class="char char5"> </span>
+	  <span class="char char6">T</span>
+	  <span class="char char7">i</span>
+	  <span class="char char8">t</span>
+	  <span class="char char9">l</span>
+	  <span class="char char10">e</span>
 	</h1>
 
 Magical. Now the text is easy to manipulate in your CSS using an ordinal `.char#` pattern.  This plugin assumes basic counting skills, but it's a pretty fast and easy way to get control over every letter.
@@ -39,6 +39,38 @@ As you can imagine, it would be a pain in the ass to have all those `spans` litt
 
 It also plays nicely with CMSs like WordPress or Expression Engine and art direction plugins.
 
+## Kern letter-pairs with Lettering.js
+
+For more seriouse (and more generic) letter-pair kerning, you might wish to use the `.lettering('kern')` method:
+
+	<script>
+	$(document).ready(function() {
+	  $(".fancy_title").lettering('kern');
+	});
+	</script>
+
+It outputs the following:
+
+	<h1 class="fancy_title">
+	  <span class="char" data-chr="S">S</span>
+	  <span class="char" data-chr="o">o</span>
+	  <span class="char" data-chr="m">m</span>
+	  <span class="char" data-chr="e">e</span>
+	  <span class="char" data-chr=" "> </span>
+	  <span class="char" data-chr="T">T</span>
+	  <span class="char" data-chr="i">i</span>
+	  <span class="char" data-chr="t">t</span>
+	  <span class="char" data-chr="l">l</span>
+	  <span class="char" data-chr="e">e</span>
+	</h1>
+
+Which allows you to write generic CSS rules to kern certain letter-pairs, like so:
+
+	<style type="text/css">
+	  .char[data-chr="T"] + .char[data-chr="i"] { margin-left: -.17em }
+	</script>
+
+
 ## Wrap Words with Lettering.js
 Once we developed this e-solution and played with it, we found it useful enough to broaden the scope so that we could break apart and wrap words in a sentence in a span tag.
 
@@ -55,10 +87,10 @@ Here's an example of the `.lettering('words')` method:
 Which will generate:
 
 	<p class="word_split">
-	  <span class="word1">Don't</span>
-	  <span class="word2">break</span>
-	  <span class="word3">my</span>
-	  <span class="word4">heart.</span>
+	  <span class="word word1">Don't</span>
+	  <span class="word word2">break</span>
+	  <span class="word word3">my</span>
+	  <span class="word word4">heart.</span>
 	</p>
 
 You can then style each word using the `.word#` class.
@@ -77,12 +109,12 @@ Once word wrapping was complete, we noticed the need for yet another method, one
 Resulting code:
 
 	<p class="line_split">
-	  <span class="line1">Are you</span>
-	  <span class="line2">ready to</span>
-	  <span class="line3">RUMmMmMMBBLE!</span>
+	  <span class="line line1">Are you</span>
+	  <span class="line line2">ready to</span>
+	  <span class="line line3">RUMmMmMMBBLE!</span>
 	</p>
 
-As expected it uses the `.line#` ordinal pattern.  You'll also notice the `<br>`'s have been destructively ripped out.  In your CSS, you'll want to declare something like `.line_split span { display:block; }` if you need them to behave as a `<br>` element.
+As expected it uses the `.line#` ordinal pattern.  You'll also notice the `<br/>`'s have been destructively ripped out.  In your CSS, you'll want to declare something like `.line_split span { display:block; }` if you need them to behave as a `<br>` element.
 
 ## Best Practices &amp; Kerning
 We've found this to be a pretty quick and elegant solution to create typographical CSS3 posters. It's also a great solution for really custom type headings, while keeping the text selectable.
@@ -94,7 +126,7 @@ Be smart and use sparingly. You'll probably break your browser if you try to wra
 If you're going through the trouble to load a fancy font and that word or phrase is the largest on the site, then it's important for it to be kerned well.  With Lettering.js, kerning is a breeze. You can simply use `$("#id-of-what-i-want-to-kern").lettering();` and then on each `.char#`, you can set relative position or left/right margin. Works like a charm.
 
 ### Non-Javascript Fallback
-As with any kind of Javascript, have a fall back plan in case the user doesn't have javascript enabled.  The bottom line is up to you, my bottom line would be "legible and on the screen". Also, use `lettering.min.js` [Download the Minified Version of Lettering.js here](http://github.com/davatron5000/Lettering.js/downloads)
+As with any kind of Javascript, have a fall back plan in case the user doesn't have javascript enabled.  The bottom line is up to you, my bottom line would be "legible and on the screen". Also, use `lettering.min.js` [Download the Minified Version of Lettering.js here](http://github.com/maranomynet/Lettering.js/raw/master/jquery.lettering-min.js)
 
 ### Performance Anti-Pattern
 Web performance patterns advise that you put Javascripts at the bottom of your page before your `</body>` tag.  There is an unfortunate side effect where you may experiences a [FOUT (Flash of Unstyled Text)](http://paulirish.com/2009/fighting-the-font-face-fout/) when you're manipulating your text after the DOM has loaded.  Unfortunately, we found the best solution to avoid/minimize the FOUT caused by this plugin is to put your scripts (jQuery, Lettering.js) in the document `<head>`. On the one hand, your page will load slower. On the other hand, a flash/restyling makes your site feel slow. Users might ultimately feel the site is faster if they don't see the FOUT.

examples/index.html

@@ -40,16 +40,22 @@
 		.char5 { color: green; }
 		.char6 { color: indigo; }
 		.char7 { color: violet; }
+
+		.char[data-cont="F"] + .char[data-cont="A"],
+		.char[data-cont="A"] + .char[data-cont="V"],
+		.char[data-cont="V"] + .char[data-cont="A"] { margin-left: -.17em }
+
 	</style>
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   <script src="../jquery.lettering.js"></script>
   <script>
   	$(document).ready(function() {
 			$("#demo1 h1").lettering();
+			$("#demo1b h1").lettering('kern');
 			$("#demo2 h1").lettering('words');
 			$("#demo3 p").lettering('lines');
 			$("#demo4 h1").lettering('words').children("span").lettering();
-			$("#demo5 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});
+			$("#demo5 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)', '-moz-transform':'rotate(-25deg)'});
 		});
   </script>
 
@@ -80,18 +86,31 @@ <h4>The jQuery</h4>
 
 				<h4>The Result</h4>
 				<div id="demo1" class="demo">
-					<h1>Rainbow</h1>
+					<h1>Rain<em>bow</em></h1>
 				</div>
 
 			</section>
 
+			<section id='kernedletters-demo'>
+				<h2>Letter-pairs kerned</h2>
+				<code><pre>$("#demo1b h1").lettering('kern');</pre></code>
+				<code><pre>.char[data-cont="F"] + .char[data-cont="A"],
+.char[data-cont="A"] + .char[data-cont="V"],
+.char[data-cont="V"] + .char[data-cont="A"] { margin-left: -.17em }</pre></code>
+
+			<h4>The Result</h4>
+				<div id="demo1b" class="demo">
+					<h1>FAVAIVIAVA</h1>
+				</div>
+			</section>
+
 			<section id='words-demo'>
 				<h2>Words</h2>
 				<code><pre>$("#demo2 h1").lettering('words');</pre></code>
 
 			<h4>The Result</h4>
 				<div id="demo2" class="demo">
-					<h1>Hi, Multi Color</h1>
+					<h1>Hi, Multi &nbsp; Color</h1>
 				</div>
 			</section>
 
@@ -117,7 +136,11 @@ <h1>Double Rainbow</h1>
 			<section id='advanced2-demo'>
 				<h2>Advanced #2: Chaining and Styling</h2>
 <code><pre>$("#demo5 h1").lettering()
-	.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});</pre></code>
+&nbsp;	.children("span").css({
+&nbsp;	&nbsp;	&nbsp;	'display': 'inline-block',
+&nbsp;	&nbsp;	&nbsp;	'-webkit-transform': 'rotate(-25deg)',
+&nbsp;	&nbsp;	&nbsp;	'-moz-transform': 'rotate(-25deg)'
+&nbsp;	&nbsp;});</pre></code>
 			<h4>The Result</h4>
 				<div id="demo5" class="demo">
 					<h1>WOOOoo!</h1>

jquery.lettering-quicktest.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" lang="is">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>jQuery.lettering tests</title>
+  <style type="text/css">
+    p.test {
+      font-family: Tahoma, Arial, sans-serif;
+      font-size: 1.5em;
+      background: #eee;
+      width: 14em;
+      padding: 5px 10px;
+    }
+
+    .char {
+      border: 1px solid #9d9;
+      border-right: none;
+    }
+    .char:last-child {
+      border-right: 1px solid #9d9;
+    }
+    .char[data-cont="a"] + .char[data-cont="e"] { margin-left: -.17em;  border-left: none; }
+    .char[data-cont="r"] + .char[data-cont="n"],
+    .char[data-cont="f"] + .char[data-cont="i"],
+    .char[data-cont="f"] + .char[data-cont="l"] { margin-left: -.08em;  border-left: none; }
+
+    .word {
+      border: 1px solid #9ce;
+    }
+
+    .line {
+      border: 1px solid #f99;
+      display: block;
+    }
+
+  </style>  
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+  <script src="jquery.lettering.js"></script>
+  <script>
+    jQuery(function($){
+
+      $('#t0').lettering();
+      $('#t1').lettering('letters');
+      $('#t2').lettering('kern');
+      $('#t3').lettering('words');
+      $('#t4').lettering('lines');
+
+    });
+  </script>
+
+</head>
+<body>
+  <h1>jQuery.lettering tests</h1>
+
+  <p class="test" id="t0">Le<b>tter <em><s>met</s>hod</em></b> (default)</p>
+  <p class="test" id="t1">Le<b>tter <em><s>met</s>hod</em></b></p>
+  <p class="test" id="t2">Kern method fiflae - kerning</p>
+  <p class="test" id="t3">Word method <strong>(destructive)</strong></p>
+  <p class="test" id="t4">Line<br/> method <br/>fiflae <br /> <strong>(destructive)</strong></p>
+
+</body>
+</html>