From 398b4d01dbff8a0e8da1498e7b9a7ebebfe542d7 Mon Sep 17 00:00:00 2001 From: mar Date: Sat, 30 Oct 2010 21:00:37 +0000 Subject: [PATCH 01/10] made 'words' method gobble upp multiple ajacent spaces and ` `s --- examples/index.html | 2 +- jquery.lettering.js | 10 +--------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/examples/index.html b/examples/index.html index e503496..4c3e16f 100644 --- a/examples/index.html +++ b/examples/index.html @@ -91,7 +91,7 @@

Words

The Result

-

Hi, Multi Color

+

Hi, Multi   Color

diff --git a/jquery.lettering.js b/jquery.lettering.js index 4515590..03545d5 100644 --- a/jquery.lettering.js +++ b/jquery.lettering.js @@ -20,26 +20,18 @@ t.empty().append(inject); } } - var methods = { init : function() { - return this.each(function() { injector($(this), '', 'char', ''); }); - }, - words : function() { - return this.each(function() { - injector($(this), ' ', 'word', ' '); + injector($(this), /\s+/, 'word', ' '); }); - }, - lines : function() { - return this.each(function() { var r = "eefec303079ad17405c889e092e105b0"; // Because it's hard to split a
tag consistently across browsers, From 07080a5d57a8064c97198aead5ddaf9f982bc86d Mon Sep 17 00:00:00 2001 From: mar Date: Sat, 30 Oct 2010 21:23:48 +0000 Subject: [PATCH 02/10] simplified and optimized the script quite a bit - without changing it's behaviour one bit. --- jquery.lettering.js | 62 +++++++++++++++++++++------------------------ 1 file changed, 29 insertions(+), 33 deletions(-) diff --git a/jquery.lettering.js b/jquery.lettering.js index 03545d5..0d61713 100644 --- a/jquery.lettering.js +++ b/jquery.lettering.js @@ -8,50 +8,46 @@ * * Thanks to Paul Irish - http://paulirish.com - for the feedback. * -* Date: Mon Sep 20 17:14:00 2010 -0600 +* Optimized by Már Örlygsson - http://mar.anomy.net/ */ (function($){ - function injector(t, splitter, klass, after) { - var a = t.text().split(splitter), inject = ''; - if (a.length) { - $(a).each(function(i, item) { - inject += ''+item+''+after; - }); - t.empty().append(inject); - } + var injector = function (c, splitter, klass, after) { + c.each(function(){ + var t = $(this), + a = t.text().split(splitter), + inject = ''; + if (a.length) { + $(a).each(function(i, item) { + inject += ''+item+''+after; + }); + t.html(inject); + } + }); } var methods = { - init : function() { - return this.each(function() { - injector($(this), '', 'char', ''); - }); + letters : function ( t ) { + injector( t, '', 'char', '' ); }, - words : function() { - return this.each(function() { - injector($(this), /\s+/, 'word', ' '); - }); + words : function( t ) { + injector( t, /\s+/, 'word', ' ' ); }, - lines : function() { - return this.each(function() { - var r = "eefec303079ad17405c889e092e105b0"; - // Because it's hard to split a
tag consistently across browsers, - // (*ahem* IE *ahem*), we replaces all
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', ''); - }); - + lines : function( t ) { + var r = 'eefec303079ad17405c889e092e105b0'; + // Because it's hard to split a
tag consistently across browsers, + // (*ahem* IE *ahem*), we replaces all
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( t.find('br').replaceWith(r).end(), r, 'line', '' ); } }; $.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 + method = method || 'letters'; + if ( methods[method] ) { + methods[ method ]( this ); + } else { + $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); } - $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); return this; }; From faa1b6f8a902f9df70afddb6b7ade4da53c50712 Mon Sep 17 00:00:00 2001 From: mar Date: Sat, 30 Oct 2010 21:51:55 +0000 Subject: [PATCH 03/10] added a `kern` method (a bit heavier version of the default 'letters' method) to allow generic letter-pair kerning. --- README.md | 34 +++++++++++++++++++++++++++++++++- examples/index.html | 19 +++++++++++++++++++ jquery.lettering.js | 8 ++++++-- 3 files changed, 58 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0cd1cec..622a672 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ The resulting code will churn your `.fancy_title` and output the following: o m e - + T i t @@ -39,6 +39,38 @@ As you can imagine, it would be a pain in the ass to have all those `spans` litt It also plays nicely with CMSs like WordPress or Expression Engine and art direction plugins. +## Kern letter-pairs with Lettering.js + +For more seriouse (and more generic) letter-pair kerning, you might wish to use the `.lettering('kern')` method: + + + +It outputs the following: + +

+ S + o + m + e + + T + i + t + l + e +

+ +Which allows you to write generic CSS rules to kern certain letter-pairs, like so: + + + @@ -86,7 +86,7 @@

The jQuery

The Result

-

Rainbow

+

Rainbow

@@ -94,9 +94,9 @@

Rainbow

Letter-pairs kerned

$("#demo1b h1").lettering('kern');
 - 
.char[data-chr="F"] + .char[data-chr="A"],
-.char[data-chr="A"] + .char[data-chr="V"],
-.char[data-chr="V"] + .char[data-chr="A"] { margin-left: -.17em }
 + 
.char[data-cont="F"] + .char[data-cont="A"],
+.char[data-cont="A"] + .char[data-cont="V"],
+.char[data-cont="V"] + .char[data-cont="A"] { margin-left: -.17em }

The Result

@@ -136,7 +136,11 @@

Double Rainbow

Advanced #2: Chaining and Styling

$("#demo5 h1").lettering()
-	.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});
 +  .children("span").css({ +      'display': 'inline-block', +      '-webkit-transform': 'rotate(-25deg)', +      '-moz-transform': 'rotate(-25deg)' +   });

The Result

WOOOoo!

diff --git a/jquery.lettering-quicktest.html b/jquery.lettering-quicktest.html new file mode 100644 index 0000000..3f41e63 --- /dev/null +++ b/jquery.lettering-quicktest.html @@ -0,0 +1,61 @@ + + + + + + jQuery.lettering tests + + + + + + + +

jQuery.lettering tests

+ +

Letter method

+

Letter method

+

Kern method fiflae

+

Word method (destructive)

+

Line
method
fiflae
(destructive)

+ + + \ No newline at end of file diff --git a/jquery.lettering.js b/jquery.lettering.js index da2e192..12c05f1 100644 --- a/jquery.lettering.js +++ b/jquery.lettering.js @@ -1,58 +1,125 @@ -/*global jQuery */ -/*! -* Lettering.JS 0.6.1 -* -* Copyright 2010, Dave Rupert http://daverupert.com -* Released under the WTFPL license -* http://sam.zoy.org/wtfpl/ -* -* Thanks to Paul Irish - http://paulirish.com - for the feedback. -* -* Optimized by Már Örlygsson - http://mar.anomy.net/ -*/ +// encoding: utf-8 +// ---------------------------------------------------------------------------------- +// jQuery.fn.letterings v 1.0 +// ---------------------------------------------------------------------------------- +// (c) 2010 Már Örlygsson -- http://mar.anomy.net +// ---------------------------------------------------------------------------------- +// +// Dual licensed under a MIT licence (http://en.wikipedia.org/wiki/MIT_License) +// and GPL 2.0 or above (http://www.gnu.org/licenses/old-licenses/gpl-2.0.html). +// +// An almost completely rewritten fork off Dave Rupert's original plugin +// http://daverupert.com/2010/09/lettering-js/ +// +// +// Requires: jQuery 1.2.6+ +// +// +// Usage: +// jQuery('p').letterings(); // defaults to the 'letters' preset +// jQuery('p').letterings( methodName ); // falls back to 'letters' for undefined methodNames (presets) +// jQuery('p').letterings( methodName, extraOpts ); // using a preset but mixing it with some extraOtions +// jQuery('p').letterings( options ); // using custom options +// +// +// The default options: +// jQuery.fn.letterings.defaults = { +// split: '', // String or RegExp to split the original element's text on. Defaults to ('') single character splits. +// prep: undefined, // (Example: `function ( elm ){ var cfg = this; /*...*/ }`) Function that gets run before the injector function is run +// addAttr: false, // Specifies whether to set each element's content as data-cont="" attribute (allows letter-pair-based kerning, for example) +// mapAttr: undefined, // (Example: `''.toLowerCase`) Optional transformation function that the content of element is passed through before being assigning to the data-cont="" attribute. +// after: '', // Optional HTML content that gets injected after each injected element. +// tag: 'span', // tagName for the injected elements. +// cl: 'char', // className for the injected elements. +// num: true // Specifies whether to add indexed-classNames (char1, char2, char3, etc...) +// }; +// +// +// The default methodNames (presets) available: +// `letters` // splits the element's contents into individual s +// `kern` // splits the element's contents into individual s - setting data-cont="" attribute on each +// `words` // destructively splits element's .text() on spaces, tabs, and newlines. Adds the classNames `word word{N}` +// `lines` // destructively splits element's .text() on
s. Adds the classNames `line line{N}` +// +// (function($){ - var injector = function (c, splitter, klass, after, addContent) { - c.each(function(){ - var t = $(this), - a = t.text().split(splitter), - inject = ''; - if (a.length) { - $(a).each(function(i, item) { - var contentAttr = addContent ? ' data-chr="'+(item=='"'?'"':item)+'"' : ''; - inject += ''+item+''+after; - }); - t.html(inject); - } - }); - } - var methods = { - letters : function ( t ) { - injector( t, '', 'char', '' ); - }, - kern : function ( t ) { - injector( t, '', 'char char', '', true ); - }, - words : function( t ) { - injector( t, /\s+/, 'word', ' ' ); - }, - lines : function( t ) { - var r = 'eefec303079ad17405c889e092e105b0'; - // Because it's hard to split a
tag consistently across browsers, - // (*ahem* IE *ahem*), we replaces all
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( t.find('br').replaceWith(r).end(), r, 'line', '' ); - } - }; - $.fn.lettering = function( method ) { - method = method || 'letters'; - if ( methods[method] ) { - methods[ method ]( this ); - } else { - $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); - } - return this; - }; + var letterings = $.fn.lettering = function ( presetName, extraCfg ) { + //cfg = $.extend({}, defaults, (typeof cfg != 'string' ? cfg : (presets[cfg]||presets.letters)) ); + var cfg = $.extend({}, defaults, presets[presetName]||presetName||presets.letters, extraCfg ); // in praxis this behaves the same as the above line ... trades mess for compactness. + return this.each(function(){ + cfg.prep && cfg.prep( this ) + injector.call(this, cfg ); + if ( cfg.num ) + { + $(this).find( cfg.tag+'.'+cfg.cl.replace(/\s/g, '.') ) + .addClass(function (i) { return cfg.cl+(i+1) }); + } + }); + }, + + injector = function ( cfg, count ) { + var node = this, + arr = cfg.split ? + $(node).text().split(cfg.split): + node.nodeType == 3 ? // textNode + node.nodeValue.split(''): + node.nodeType == 1 ? // Element + node.childNodes: + [], + contentAttr, + newHtml = [], + i = arr.length; + while ( i-- ) + { + var item = arr[i]; + if ( item ) + { + if ( typeof item == 'string' ) + { + contentAttr = ''; + if ( cfg.addAttr ) + { + item = cfg.matAttr ? cfg.mapAttr.call(item) : item; + contentAttr = ' data-cont="'+(item=='"'?'"':item)+'"'; + } + newHtml.push( + ''+item+''+(cfg.after||'') + ); + } + else + { + injector.call( item, cfg ); + } + } + } + newHtml.length && $(node)[cfg.split?'html':'replaceWith']( newHtml.reverse().join('') ); + }, + + presets = letterings.presets = { + letters: {}, + kern: { addAttr: !0/*true*/, num:!1/*false*/ }, + words: { split: /\s+/, cl: 'word', after: ' ' }, + lines: { + cl: 'line', + prep: function ( elm ) { + this.split = '|'+(new Date()).getTime()+'|'; + // Replace
s because it's hard to split a
tag consistently across browsers, + $(elm).find('br').replaceWith( this.split ); + } + } + }, + + defaults = letterings.defaults = { + //split: '', + //prep: undefined, // function ( elm ){ var cfg = this; /*...*/ }, + //addAttr: false, + //mapAttr: undefined, // ''.toLowerCase, + //after: '', + tag: 'span', + cl: 'char', + num: !0 // true + }; + })(jQuery); \ No newline at end of file From 1a7b95dbccc2b2fa96cbb1dabbac62e5dee4fdf3 Mon Sep 17 00:00:00 2001 From: mar Date: Wed, 24 Nov 2010 10:03:17 +0000 Subject: [PATCH 06/10] fixed typos - 'letterings' -> 'lettering' --- jquery.lettering.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/jquery.lettering.js b/jquery.lettering.js index 12c05f1..0135554 100644 --- a/jquery.lettering.js +++ b/jquery.lettering.js @@ -1,29 +1,29 @@ // encoding: utf-8 // ---------------------------------------------------------------------------------- -// jQuery.fn.letterings v 1.0 +// jQuery.fn.lettering v 1.0 // ---------------------------------------------------------------------------------- // (c) 2010 Már Örlygsson -- http://mar.anomy.net // ---------------------------------------------------------------------------------- +// An almost completely rewritten fork off Dave Rupert's original plugin +// http://daverupert.com/2010/09/lettering-js/ // // Dual licensed under a MIT licence (http://en.wikipedia.org/wiki/MIT_License) // and GPL 2.0 or above (http://www.gnu.org/licenses/old-licenses/gpl-2.0.html). // -// An almost completely rewritten fork off Dave Rupert's original plugin -// http://daverupert.com/2010/09/lettering-js/ // // // Requires: jQuery 1.2.6+ // // // Usage: -// jQuery('p').letterings(); // defaults to the 'letters' preset -// jQuery('p').letterings( methodName ); // falls back to 'letters' for undefined methodNames (presets) -// jQuery('p').letterings( methodName, extraOpts ); // using a preset but mixing it with some extraOtions -// jQuery('p').letterings( options ); // using custom options +// jQuery('p').lettering(); // defaults to the 'letters' preset +// jQuery('p').lettering( methodName ); // falls back to 'letters' for undefined methodNames (presets) +// jQuery('p').lettering( methodName, extraOpts ); // using a preset but mixing it with some extraOtions +// jQuery('p').lettering( options ); // using custom options // // // The default options: -// jQuery.fn.letterings.defaults = { +// jQuery.fn.lettering.defaults = { // split: '', // String or RegExp to split the original element's text on. Defaults to ('') single character splits. // prep: undefined, // (Example: `function ( elm ){ var cfg = this; /*...*/ }`) Function that gets run before the injector function is run // addAttr: false, // Specifies whether to set each element's content as data-cont="" attribute (allows letter-pair-based kerning, for example) @@ -44,7 +44,7 @@ // (function($){ - var letterings = $.fn.lettering = function ( presetName, extraCfg ) { + var lettering = $.fn.lettering = function ( presetName, extraCfg ) { //cfg = $.extend({}, defaults, (typeof cfg != 'string' ? cfg : (presets[cfg]||presets.letters)) ); var cfg = $.extend({}, defaults, presets[presetName]||presetName||presets.letters, extraCfg ); // in praxis this behaves the same as the above line ... trades mess for compactness. return this.each(function(){ @@ -96,7 +96,7 @@ newHtml.length && $(node)[cfg.split?'html':'replaceWith']( newHtml.reverse().join('') ); }, - presets = letterings.presets = { + presets = lettering.presets = { letters: {}, kern: { addAttr: !0/*true*/, num:!1/*false*/ }, words: { split: /\s+/, cl: 'word', after: ' ' }, @@ -110,7 +110,7 @@ } }, - defaults = letterings.defaults = { + defaults = lettering.defaults = { //split: '', //prep: undefined, // function ( elm ){ var cfg = this; /*...*/ }, //addAttr: false, From a453958cfc766afb3fa83e74d6e272f314e28a2d Mon Sep 17 00:00:00 2001 From: mar Date: Wed, 24 Nov 2010 10:09:30 +0000 Subject: [PATCH 07/10] added a missing semi-colon - and added a minified version of the script (+ updated teh README.md to link to the correct version) --- README.md | 6 +++--- jquery.lettering-min.js | 2 ++ jquery.lettering.js | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 jquery.lettering-min.js diff --git a/README.md b/README.md index 496eada..35808d5 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,10 @@ We'll start with some really basic markup:

Some Title

-After including jQuery, [download and include the minified version of Lettering.js](http://github.com/davatron5000/Lettering.js/downloads), then a script block with the magical `.lettering()` method: +After including jQuery, [download and include the minified version of Lettering.js](http://github.com/maranomynet/Lettering.js/raw/master/jquery.lettering-min.js), then a script block with the magical `.lettering()` method: - +