Lettering js
-
Upload
davatron5000 -
Category
Technology
-
view
5.493 -
download
7
description
Transcript of Lettering js
A jQuery Plugin for Radical Web Typography
@davatron5000 || daverupert.comhttp://github.com/davatron5000/lettering.js
I host the ATX Web Show.
http://atxwebshow.com && @atxwebshow
WTF is ?
A jQuery Plugin for Radical Web
Typography
WTF is ?
A glorified<span> injector!
Ye olde history of Lettering.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!
Web Font Explosion
InvasionOfThe
BLOGAZINES
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">Don't break my heart.</p>
<script>$(document).ready(function() { $("#word_split").lettering('words');});</script>
It does words too!
<p id="word_split"> <span class="word1">Don't</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){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)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){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))}$.error('Method '+method+' does not exist 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
(function($){ function injector(t, splitter, klass, after) {
// Injects <span> tags } var methods = { init : function() {
// Splits up letters }, words : function() {
// Splits up words }, lines : function() {
// Splits up lines } }; $.fn.lettering = function( method ) { // Method calling logic };})(jQuery);
the outline
2
1
3
var methods = { init : function() {
return this.each(function() { injector($(this), '', 'char', ''); });
},
words : function() {
return this.each(function() { injector($(this), ' ', 'word', ' '); });
},
the `letters` and `words` methods
lines : function() {
return this.each(function() { var r = "eefec303079ad17405c889e092e105b0"; // Because it's 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 you're trying to use this plugin on that // md5 hash string, it will fail because you're being ridiculous. injector($(this).children("br").replaceWith(r).end(), r, 'line', ''); });
} };
the `lines` method
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)+'">'+item+'</span>'+after; }); t.empty().append(inject); } }
the <span> injector
$.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; };
.lettering()
in the wild...
http://trentwalton.com/2011/01/26/you-are-what-you-eat/
http://pronounce.yaronschoen.com/
Text
http://css-tricks.com/animated-knockout-letters/
http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/
http://yearinreview.twitter.com/powerful-tweets/
Questions/Comments?
@davatron5000 || daverupert.comhttp://github.com/davatron5000/lettering.js