diff --git a/README.md b/README.md index 0cd1cec..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: - + + +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: + + - + @@ -80,18 +86,31 @@

The jQuery

The Result

-

Rainbow

+

Rainbow

+
+

Letter-pairs kerned

+
$("#demo1b h1").lettering('kern');
+
.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

+
+

FAVAIVIAVA

+
+
+

Words

$("#demo2 h1").lettering('words');

The Result

-

Hi, Multi Color

+

Hi, Multi   Color

@@ -117,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-min.js b/jquery.lettering-min.js new file mode 100644 index 0000000..29173c4 --- /dev/null +++ b/jquery.lettering-min.js @@ -0,0 +1,2 @@ +// $.fn.lettering 1.0 -- MIT/GPL Licensed - More info: http://github.com/maranomynet/Lettering.js/ +(function(e){var i=e.fn.lettering=function(d,f){var b=e.extend({},m,j[d]||d||j.letters,f);return this.each(function(){b.prep&&b.prep(this);k.call(this,b);if(b.num){e(this).find(b.tag+'.'+b.cl.replace(/\s/g,'.')).addClass(function(a){return b.cl+(a+1)})}})},k=function(a){var d=this,f=d.nodeType,b=a.split?e(d).text().split(a.split):f==3?d.nodeValue.split(''):f==1?d.childNodes:[],g,h=[],l=b.length;while(l--){var c=b[l];if(c){if(typeof c=='string'){g='';if(a.addAttr){c=a.matAttr?a.mapAttr.call(c):c;g=' data-cont="'+(c=='"'?'"':c)+'"'}h.push(''+c+''+(a.after||''))}else{k.call(c,a)}}}h.length&&e(d)[a.split?'html':'replaceWith'](h.reverse().join(''))},j=i.presets={letters:{},kern:{addAttr:!0,num:!1},words:{split:/\s+/,cl:'word',after:' '},lines:{cl:'line',prep:function(a){this.split='|'+(new Date()).getTime()+'|';e(a).find('br').replaceWith(this.split)}}},m=i.defaults={tag:'span',cl:'char',num:!0}})(jQuery); diff --git a/jquery.lettering-quicktest.html b/jquery.lettering-quicktest.html new file mode 100644 index 0000000..c9b850b --- /dev/null +++ b/jquery.lettering-quicktest.html @@ -0,0 +1,63 @@ + + + + + + jQuery.lettering tests + + + + + + + +

jQuery.lettering tests

+ +

Letter method (default)

+

Letter method

+

Kern method fiflae - kerning

+

Word method (destructive)

+

Line
method
fiflae
(destructive)

+ + + \ No newline at end of file diff --git a/jquery.lettering.js b/jquery.lettering.js index 4515590..0248be9 100644 --- a/jquery.lettering.js +++ b/jquery.lettering.js @@ -1,66 +1,129 @@ -/*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. -* -* Date: Mon Sep 20 17:14:00 2010 -0600 -*/ +// encoding: utf-8 +// ---------------------------------------------------------------------------------- +// 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). +// +// +// +// Requires: jQuery 1.2.6+ +// +// +// Usage: +// 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.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) +// 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($){ - 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 methods = { - init : function() { - return this.each(function() { - injector($(this), '', 'char', ''); - }); + 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(){ + 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 ) { + var node = this, + nodeType = node.nodeType, + arr = cfg.split ? + // NOTE: methods other than 'letters' and 'kern' + // are destructive (i.e. they will kill nested markup) + // See also: https://github.com/davatron5000/Lettering.js/issues/5#issuecomment-563679 + $(node).text().split(cfg.split): + nodeType == 3 ? // textNode + node.nodeValue.split(''): + 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('') ); + }, - words : function() { + presets = lettering.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 ); + } + } + }, - return this.each(function() { - injector($(this), ' ', 'word', ' '); - }); + defaults = lettering.defaults = { + //split: '', + //prep: undefined, // function ( elm ){ var cfg = this; /*...*/ }, + //addAttr: false, + //mapAttr: undefined, // ''.toLowerCase, + //after: '', + tag: 'span', + cl: 'char', + num: !0 // true + }; - }, - - 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', ''); - }); - - } - }; - - $.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; - }; })(jQuery); \ No newline at end of file