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.
6. 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!
19. How about words?
<p id="word_split">Don't break my heart.</p>
<script>
$(document).ready(function() {
$("#word_split").lettering('words');
});
</script>
20. 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>
21. 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>
22. 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>
23. /* 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);
24. is tiny.
Only 38 lines of code.
Wow! That’s so tiny. You could almost give a
line-by-line walkthrough
26. 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);
27. the `letters` and `words` methods
var methods = {
init : function() {
return this.each(function() {
injector($(this), '', 'char', '');
});
},
words : function() {
return this.each(function() {
injector($(this), ' ', 'word', ' ');
});
},
28. the `lines` method
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', '');
});
}
};
29. the <span> injector
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);
}
}
