Skip to content

Commit

Permalink
Added full character support
Browse files Browse the repository at this point in the history
  • Loading branch information
lukemorton committed Sep 21, 2010
2 parents cd4254d + 06c5d72 commit 89e6a48
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 50 deletions.
36 changes: 18 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand All @@ -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.
Expand All @@ -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.
Expand Down
8 changes: 4 additions & 4 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>

Expand All @@ -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>

Expand Down Expand Up @@ -132,4 +132,4 @@ <h1>WOOOoo!</h1>
</div>

</body>
</html>
</html>
72 changes: 44 additions & 28 deletions jquery.lettering.js
Original file line number Diff line number Diff line change
@@ -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);

0 comments on commit 89e6a48

Please sign in to comment.