Lettering js

40
A jQuery Plugin for Radical Web Typography @davatron5000 || daverupert.com http://github.com/davatron5000/lettering.js

description

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.

Transcript of Lettering js

Page 1: Lettering js

A jQuery Plugin for Radical Web Typography

@davatron5000 || daverupert.comhttp://github.com/davatron5000/lettering.js

Page 2: Lettering js

I work at Paravel.

http://paravelinc.com

Page 3: Lettering js

I host the ATX Web Show.

http://atxwebshow.com && @atxwebshow

Page 4: Lettering js

WTF is ?

A jQuery Plugin for Radical Web

Typography

Page 5: Lettering js

WTF is ?

A glorified<span> injector!

Page 6: Lettering js

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!

Page 7: Lettering js

Web Font Explosion

Page 8: Lettering js

InvasionOfThe

BLOGAZINES

http://www.smashingmagazine.com/the-death-of-the-blog-post/

Page 9: Lettering js

LOST WORLD’S FAIRS

WHO?

http://lostworldsfairs.com/

Page 10: Lettering js
Page 11: Lettering js
Page 12: Lettering js
Page 13: Lettering js

OUR OBJECTIVES

✓Show off IE9s support of WOFF

✓Fonts provided by Typekit

✓Maintainable HTML/CSS

So we wrote

Page 14: Lettering js

How Lettering.js works:

Page 15: Lettering js

Start with normal HTML

<!doctype html><html><body> <h1 id="fancy_title">Some Title</h1></body></html>

Page 16: Lettering js

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>

Page 17: Lettering js

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>

Page 18: Lettering js

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}

Page 19: Lettering js

How about words?

<p id="word_split">Don't break my heart.</p>

<script>$(document).ready(function() { $("#word_split").lettering('words');});</script>

Page 20: Lettering js

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>

Page 21: Lettering js

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>

Page 22: Lettering js

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>

Page 23: Lettering js

/* 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);

Page 24: Lettering js

is tiny.

Only 38 lines of code.Wow! That’s so tiny. You could almost give a

line-by-line walkthrough

Page 25: Lettering js

Line-by-lineWalkthrough

Page 26: Lettering js

(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

Page 27: Lettering js

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

Page 28: Lettering js

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

Page 29: Lettering js

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

Page 30: Lettering js

$.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()

Page 31: Lettering js

in the wild...

Page 34: Lettering js

http://designingmonsters.com/

Page 38: Lettering js

http://typekit.com/holiday2010

Page 40: Lettering js

Questions/Comments?

@davatron5000 || daverupert.comhttp://github.com/davatron5000/lettering.js