Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lettering js

6,206 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

×