Lettering js

6,171 views

Published on

Web Typography is exploding all over the web, we made a jQuery plugin to give you control over those new fonts. We also made this powerpoint for a talk on the same subject.

Published in: Technology, Design
  • Be the first to comment

Lettering js

  1. 1. A jQuery Pluginfor Radical WebTypography @davatron5000 || daverupert.com http://github.com/davatron5000/lettering.js
  2. 2. I work at Paravel. http://paravelinc.com
  3. 3. I host theATX WebShow.http://atxwebshow.com && @atxwebshow
  4. 4. WTF is ? A jQuery Plugin for Radical Web Typography
  5. 5. WTF is ? A glorified<span> injector!
  6. 6. 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!
  7. 7. WebFontExplosion
  8. 8. Of va si on TheIn ES LO GA ZINB http://www.smashingmagazine.com/the-death-of-the-blog-post/
  9. 9. LOST WORLD’S FAIRS WHO? http://lostworldsfairs.com/
  10. 10. OUR OBJECTIVES✓Show off IE9s support of WOFF✓Fonts provided by Typekit✓Maintainable HTML/CSS So we wrote
  11. 11. How Lettering.js works:
  12. 12. Start with normal HTML<!doctype html><html><body> <h1 id="fancy_title">Some Title</h1></body></html>
  13. 13. 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>
  14. 14. 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>
  15. 15. 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}
  16. 16. How about words?<p id="word_split">Dont break my heart.</p><script>$(document).ready(function() { $("#word_split").lettering(words);});</script>
  17. 17. 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>
  18. 18. 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>
  19. 19. 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>
  20. 20. /* 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);
  21. 21. is tiny.Only 38 lines of code.Wow! That’s so tiny. You could almost give a line-by-line walkthrough
  22. 22. Line-by-lineWalkthrough
  23. 23. 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);
  24. 24. the `letters` and `words` methodsvar methods = { init : function() { return this.each(function() { injector($(this), , char, ); }); }, words : function() { return this.each(function() { injector($(this), , word, ); }); },
  25. 25. 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, ); }); }};
  26. 26. 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); }}
  27. 27. .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; };
  28. 28. in the wild...
  29. 29. http://trentwalton.com/2011/01/26/you-are-what-you-eat/
  30. 30. http://pronounce.yaronschoen.com/
  31. 31. http://designingmonsters.com/
  32. 32. Texthttp://css-tricks.com/animated-knockout-letters/
  33. 33. http://www.jessbrown.me/doritos/
  34. 34. http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/
  35. 35. http://typekit.com/holiday2010
  36. 36. http://yearinreview.twitter.com/powerful-tweets/
  37. 37. Questions/Comments? @davatron5000 || daverupert.com http://github.com/davatron5000/lettering.js

×