Lettering js

A jQuery Pluginfor Radical WebTypography @davatron5000 || daverupert.com http://github.com/davatron5000/lettering.js

I work at Paravel. http://paravelinc.com

I host theATX WebShow.http://atxwebshow.com && @atxwebshow

WTF is ? A jQuery Plugin for Radical Web Typography

WTF is ? A glorified<span> injector!

Ye olde history ofLettering.js I am of the opinion that reading a handwritten scroll is far superior to the soul-less books being put forth by Gutenberg’s infernal machine!

WebFontExplosion

Of va si on TheIn ES LO GA ZINB http://www.smashingmagazine.com/the-death-of-the-blog-post/

LOST WORLD’S FAIRS WHO? http://lostworldsfairs.com/

OUR OBJECTIVES✓Show off IE9s support of WOFF✓Fonts provided by Typekit✓Maintainable HTML/CSS So we wrote

How Lettering.js works:

Start with normal HTML<!doctype html><html><body> <h1 id="fancy_title">Some Title</h1></body></html>

Sprinkle in some Javascript<!doctype html><html><body> <h1 id="fancy_title">Some Title</h1> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.lettering.min.js"></script> <script> $(document).ready(function() { $("#fancy_title").lettering(); }); </script></body></html>

BOOM! Letter control!<h1 id="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></h1>

Then style with plain ol’ CSS#fancy_title{ font-weight: normal; text-transform: uppercase; font-family: FranchiseRegular; font-size: 160px; color: #c44032; text-shadow: #863027 -4px 4px 0;}.char2, .char9 {color: #e36b23; text-shadow: #9b4d1f -4px 4px 0}.char3, .char8 {color: #e6c92e; text-shadow: #9c8b26 -4px 4px 0}.char4, .char6 {color: #5da028; text-shadow: #427021 -4px 4px 0}.char7 {color: #4584be; text-shadow: #2f597f -4px 4px 0}

How about words?<p id="word_split">Dont break my heart.</p><script>$(document).ready(function() { $("#word_split").lettering(words);});</script>

It does words too!<p id="word_split"> <span class="word1">Dont</span> <span class="word2">break</span> <span class="word3">my</span> <span class="word4">heart.</span></p>

Does it break lines?<p id="line_split">Are you<br/> ready to<br/> RUMmMmMMBBLE!</p><script>$(document).ready(function() { $("#line_split").lettering(lines);});</script>

PSSsSSH! Get outta my face!<p id="line_split"> <span class="line1">Are you</span> <span class="line2">ready to</span> <span class="line3">RUMmMmMMBBLE!</span></p>

/* Lettering.JS 0.6.1 by Dave Rupert - http://daverupert.com */(function($){function injector(t,splitter,klass,after){vara=t.text().split(splitter),inject=;if(a.length){$(a).each(function(i,item){inject+=<span class="+klass+(i+1)+">+item+</span>+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),,char,)})},words:function(){return this.each(function(){injector($(this), ,word, )})},lines:function(){returnthis.each(function(){varr="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,line,)})}};$.fn.lettering=function(method){if(method&&methods[method]){returnmethods[method].apply(this,[].slice.call(arguments,1))}else if(method===letters||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error(Method +method+ does notexist on jQuery.lettering);return this}})(jQuery);

is tiny.Only 38 lines of code.Wow! That’s so tiny. You could almost give a line-by-line walkthrough

Line-by-lineWalkthrough

the outline (function($){2 function injector(t, splitter, klass, after) { // Injects <span> tags }1 var methods = { init : function() { // Splits up letters }, words : function() { // Splits up words }, lines : function() { // Splits up lines } };3 $.fn.lettering = function( method ) { // Method calling logic }; })(jQuery);

the `letters` and `words` methodsvar methods = { init : function() { return this.each(function() { injector($(this), , char, ); }); }, words : function() { return this.each(function() { injector($(this), , word, ); }); },

the `lines` method lines : function() { return this.each(function() { var r = "eefec303079ad17405c889e092e105b0"; // Because its hard to split a <br/> tag consistently across browsers, // (*ahem* IE *ahem*), we replace all <br/> instances with an md5 hash // (of the word "split"). If youre trying to use this plugin on that // md5 hash string, it will fail because youre being ridiculous. injector($(this).children("br").replaceWith(r).end(), r, line, ); }); }};

the <span> injectorfunction 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)+">+item+</span>+after; }); t.empty().append(inject); }}

.lettering() $.fn.lettering = function( method ) { // Method calling logic 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; };

in the wild...

http://trentwalton.com/2011/01/26/you-are-what-you-eat/

http://pronounce.yaronschoen.com/

http://designingmonsters.com/

Texthttp://css-tricks.com/animated-knockout-letters/

http://www.jessbrown.me/doritos/

http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/

http://typekit.com/holiday2010

http://yearinreview.twitter.com/powerful-tweets/

Questions/Comments? @davatron5000 || daverupert.com http://github.com/davatron5000/lettering.js

Lettering js

by davatron5000 on Mar 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 1,662

Statistics

Lettering js — Presentation Transcript

http://daverupert.com	1661
http://www.daverupert.com	1