Added full character support

Author: lukemorton

README.md

@@ -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 charS">S</span>
-	  <span class="char2 charo">o</span>
-	  <span class="char3 charm">m</span>
-	  <span class="char4 chare">e</span>
-	  <span class="char5 char_"> </span>
-	  <span class="char6 charT">T</span>
-	  <span class="char7 chari">i</span>
-	  <span class="char8 chart">t</span>
-	  <span class="char9 chal">l</span>
-	  <span class="char10 chare">e</span>
+	  <span class="char1 char-S">S</span>
+	  <span class="char2 char-o">o</span>
+	  <span class="char3 char-m">m</span>
+	  <span class="char4 char-e">e</span>
+	  <span class="char5 char-32"> </span>
+	  <span class="char6 char-T">T</span>
+	  <span class="char7 char-i">i</span>
+	  <span class="char8 char-t">t</span>
+	  <span class="char9 char-l">l</span>
+	  <span class="char10 char-e">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.
@@ -57,10 +57,10 @@ Here's an example of the `.lettering('words')` method:
 Which will generate:
 
 	<p class="word_split">
-	  <span class="word1 wordDont">Don't</span>
-	  <span class="word2 wordbreak">break</span>
-	  <span class="word3 wordmy">my</span>
-	  <span class="word4 wordheart">heart.</span>
+	  <span class="word1 word-Don39t">Don't</span>
+	  <span class="word2 word-break">break</span>
+	  <span class="word3 word-my">my</span>
+	  <span class="word4 word-heart46">heart.</span>
 	</p>
 
 You can then style each word using the `.word#` class.
@@ -79,9 +79,9 @@ Once word wrapping was complete, we noticed the need for yet another method, one
 Resulting code:
 
 	<p class="line_split">
-	  <span class="line1 lineAreyou">Are you</span>
-	  <span class="line2 linereadyto">ready to</span>
-	  <span class="line3 lineRUMmMmMMBBLE">RUMmMmMMBBLE!</span>
+	  <span class="line1 line-Are32you">Are you</span>
+	  <span class="line2 line-ready32to">ready to</span>
+	  <span class="line3 line-RUMmMmMMBBLE34">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.
@@ -90,7 +90,7 @@ As expected it uses the `.line#` ordinal pattern.  You'll also notice the `<br>`
 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.
 
 ### Best Practices
-Be smart and use sparingly. You'll probably break your browser if you try to tried to do wrap every letter on your page in a `span` tag, so don't do that.  Look to use this in your Headings, Blockquotes, Asides, etc.
+Be smart and use sparingly. You'll probably break your browser if you try to wrap every letter on your page in a `span` tag, so don't do that.  Look to use this in your Headings, Blockquotes, Asides, etc.
 
 ### Kern Well
 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.

examples/index.html

@@ -80,7 +80,7 @@ <h4>The jQuery</h4>
 
 				<h4>The Result</h4>
 				<div id="demo1" class="demo">
-					<h1>Rainbow</h1>
+					<h1>Rai nb&amp;ow</h1>
 				</div>
 
 			</section>
@@ -91,7 +91,7 @@ <h2>Words</h2>
 
 			<h4>The Result</h4>
 				<div id="demo2" class="demo">
-					<h1>Hi, Multi Color</h1>
+					<h1>Hi, M&ulti Color</h1>
 				</div>
 			</section>
 
@@ -101,7 +101,7 @@ <h2>Lines</h2>
 
 			<h4>The Result</h4>
 				<div id="demo3" class="demo">
-					<p>This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>
+					<p>This is an amaz'ing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>
 				</div>
 			</section>
 
@@ -132,4 +132,4 @@ <h1>WOOOoo!</h1>
   </div> 
 
 </body>
-</html>
+</html>

jquery.lettering.js

@@ -1,70 +1,86 @@
+/*global jQuery */
 /*!	
-* Lettering.JS 0.6 
+* Lettering.JS 0.6.1
 *
 * Copyright 2010, Dave Rupert http://daverupert.com
 * Released under the WTFPL license 
 * http://sam.zoy.org/wtfpl/
 *
 * Thanks to Paul Irish - http://paulirish.com - for the feedback.
 *
-* Date: Mon Sep 13 11:54:00 2010 -0600
+* Date: Mon Sep 20 17:14:00 2010 -0600
 */
 (function($){
-	var nonAlphanumeric = /[^a-z0-9_]/gi;
-	
+	function encode(item) {
+		var letterKlass = '';
+		var numEntities = [160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,34,38,60,62,338,339,352,353,376,710,732,8194,8195,8201,8204,8205,8206,8207,8211,8212,8216,8217,8218,8220,8221,8222,8224,8225,8240,8249,8250,8364,402,913,914,915,916,917,918,919,920,921,922,923,924,925,926,927,928,929,931,932,933,934,935,936,937,945,946,947,948,949,950,951,952,953,954,955,956,957,958,959,960,961,962,963,964,965,966,967,968,969,977,978,982,8226,8230,8242,8243,8254,8260,8472,8465,8476,8482,8501,8592,8593,8594,8595,8596,8629,8656,8657,8658,8659,8660,8704,8706,8707,8709,8711,8712,8713,8715,8719,8721,8722,8727,8730,8733,8734,8736,8743,8744,8745,8746,8747,8756,8764,8773,8776,8800,8801,8804,8805,8834,8835,8836,8838,8839,8853,8855,8869,8901,8968,8969,8970,8971,9001,9002,9674,9824,9827,9829,9830];
+		var htmlEntities = ['nbsp','iexcl','cent','pound','curren','yen','brvbar','sect','uml','copy','ordf','laquo','not','shy','reg','macr','deg','plusmn','sup2','sup3','acute','micro','para','middot','cedil','sup1','ordm','raquo','frac14','frac12','frac34','iquest','agrave','aacute','acirc','atilde','Auml','aring','aelig','ccedil','egrave','eacute','ecirc','euml','igrave','iacute','icirc','iuml','eth','ntilde','ograve','oacute','ocirc','otilde','Ouml','times','oslash','ugrave','uacute','ucirc','Uuml','yacute','thorn','szlig','agrave','aacute','acirc','atilde','auml','aring','aelig','ccedil','egrave','eacute','ecirc','euml','igrave','iacute','icirc','iuml','eth','ntilde','ograve','oacute','ocirc','otilde','ouml','divide','Oslash','ugrave','uacute','ucirc','uuml','yacute','thorn','yuml','quot','amp','lt','gt','oelig','oelig','scaron','scaron','yuml','circ','tilde','ensp','emsp','thinsp','zwnj','zwj','lrm','rlm','ndash','mdash','lsquo','rsquo','sbquo','ldquo','rdquo','bdquo','dagger','dagger','permil','lsaquo','rsaquo','euro','fnof','alpha','beta','gamma','delta','epsilon','zeta','eta','theta','iota','kappa','lambda','mu','nu','xi','omicron','pi','rho','sigma','tau','upsilon','phi','chi','psi','omega','alpha','beta','gamma','delta','epsilon','zeta','eta','theta','iota','kappa','lambda','mu','nu','xi','omicron','pi','rho','sigmaf','sigma','tau','upsilon','phi','chi','psi','omega','thetasym','upsih','piv','bull','hellip','prime','prime','oline','frasl','weierp','image','real','trade','alefsym','larr','uarr','rarr','darr','harr','crarr','larr','uarr','rarr','darr','harr','forall','part','exist','empty','nabla','isin','notin','ni','prod','sum','minus','lowast','radic','prop','infin','ang','and','or','cap','cup','int','there4','sim','cong','asymp','ne','equiv','le','ge','sub','sup','nsub','sube','supe','oplus','otimes','perp','sdot','lceil','rceil','lfloor','rfloor','lang','rang','loz','spades','clubs','hearts','diams'];
+
+		for (var i = 0; i < item.length; i++)
+		{
+			var c = item.charAt(i);
+			var cC = c.charCodeAt();
+			
+			if (c < "0" || c > "~" || (c > "9" && c < "A") || (c > "Z" && c < 'a'))
+			{
+				c = htmlEntities[numEntities.indexOf(cC)] || cC;
+			}
+
+			letterKlass += c;
+		}
+		return letterKlass;
+	}
+
+	function injector(t, splitter, klass, after) {
+		var a = t.text().split(splitter), inject = '';
+		if (a.length) {
+			$(a).each(function(i, item) {
+				inject += '<span class="'+klass+(i+1)+' '+klass+'-'+encode(item)+'">'+item+'</span>'+after;
+			});	
+			t.empty().append(inject);
+		}
+	}
+
 	var methods = {
 		init : function() {
 
 			return this.each(function() {
-				return injector($(this), '', 'char', '');
+				injector($(this), '', 'char', '');
 			});
 
 		},
 
 		words : function() {
 
 			return this.each(function() {
-				return injector($(this), ' ', 'word', ' ');
+				injector($(this), ' ', 'word', ' ');
 			});
 
 		},
-		
+
 		lines : function() {
 
 			return this.each(function() {
-				var t = $(this), r = "eefec303079ad17405c889e092e105b0";
+				var r = "eefec303079ad17405c889e092e105b0";
 				// Because it's hard to split a <br/> tag consistently across browsers,
 				// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 
 				// (of the word "split").  If you're trying to use this plugin on that 
 				// md5 hash string, it will fail because you're being ridiculous.
-				t.children("br").replaceWith(r);
-				return injector(t, r, 'line', '');
+				injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
 			});
 
 		}
 	};
 
-	function injector(t, splitter, klass, after) {
-		var a = t.text().split(splitter), inject = '';
-		if(a.length > 0) {
-			$(a).each(function(i, item) {
-				inject += '<span class="'+klass+(i+1)+' '+klass+(item === ' ' ? '_' : item.replace(nonAlphanumeric, ''))+'">'+item+'</span>'+after;
-				//
-			});
-			t.empty();
-			t.append(inject);
-		}
-	}
-
 	$.fn.lettering = function( method ) {
 		// Method calling logic
-		if ( methods[method] ) {
-			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
-		} else if ( method == 'letters' || ! method ) {
-			return methods.init.apply( this, arguments );
-		} else {
-			$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
+		if ( method && methods[method] ) {
+			return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
+		} else if ( method === 'letters' || ! method ) {
+			return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
 		}
+		$.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
+		return this;
 	};
 
 })(jQuery);