From 72d876cd94d234abc488c5da70763ad039678a60 Mon Sep 17 00:00:00 2001 From: Robert O'Rourke Date: Tue, 5 Apr 2011 11:26:31 +0100 Subject: [PATCH 1/4] Modified lettering.js to use regex and a .replace() method instead of splitting and looping through arrays. Should be faster but needs benchmarking against original. TODO: Find a way to preserve html, especially in the dropcap method as it will obliterate inline markup. Signed-off-by: Robert O'Rourke --- README.md | 4 +-- examples/index.html | 41 +++++++++++++++--------- jquery.lettering.js | 76 +++++++++++++++++++++++++++------------------ 3 files changed, 74 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 329216c..17a2171 100644 --- a/README.md +++ b/README.md @@ -7,13 +7,13 @@ 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: - + - + The resulting code will churn your `.fancy_title` and output the following:

diff --git a/examples/index.html b/examples/index.html index 97283ce..05655d7 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,5 +1,5 @@ - - + + @@ -15,7 +15,7 @@ - + @@ -48,8 +50,9 @@ $("#demo1 h1").lettering(); $("#demo2 h1").lettering('words'); $("#demo3 p").lettering('lines'); - $("#demo4 h1").lettering('words').children("span").lettering(); - $("#demo5 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'}); + $("#demo4 p").lettering('dropcap'); + $("#demo5 h1").lettering('words').children("span").lettering(); + $("#demo6 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'}); }); @@ -62,7 +65,7 @@

Lettering.JS

The following are some hokey examples of how you can implement LETTERING.JS. - +

Letters

@@ -82,7 +85,7 @@

The Result

Rainbow

- +
@@ -105,31 +108,41 @@

The Result

+
+

Dropcap

+ 
$("#demo4 p").lettering('dropcap');
 + +

The Result

+
+

This is an amazing revolution in Typography. The possibilities are endless: a whole alphabet of dropcap class names like .dropcap-T.

+
+
+

Advanced #1: Chaining 2 Methods

-
$("#demo4 h1").lettering('words').children("span").lettering();
 +
$("#demo5 h1").lettering('words').children("span").lettering();

The Result

-
+

Double Rainbow

Advanced #2: Chaining and Styling

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

 			
The Result

-				

+				

 					
WOOOoo!
- + - + diff --git a/jquery.lettering.js b/jquery.lettering.js index 4515590..04e9ae8 100644 --- a/jquery.lettering.js +++ b/jquery.lettering.js @@ -1,52 +1,65 @@ /*global jQuery */ -/*! -* Lettering.JS 0.6.1 +/*! +* Lettering.JS 0.7 * * Copyright 2010, Dave Rupert http://daverupert.com -* Released under the WTFPL license +* 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 +* Regexified, configurablified & deloopified by Robert O'Rourke - http://sanchothefat.com +* +* Date: Tue Apr 5 10:00:00 2011 */ (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); - } - } - + function injector(t, opts) { + var i = 0, + c = [], + inject = t.text().replace(opts.rgxp, function(){ + c = []; + if ( opts.classes.klass ) c.push(opts.klass); + if ( opts.classes.text ) c.push(opts.klass + '-' + escape( arguments[1].toLowerCase() ).replace('%','u') ); // sanitise for class name + if ( opts.classes.num ) c.push(opts.klass + ++i); + return ''+ arguments[1] +''; + }); + t.html( inject ); + } + var methods = { - init : function() { + letters : function( options ) { return this.each(function() { - injector($(this), '', 'char', ''); + injector( $(this), $.extend({ rgxp: /(.)/gim, klass: 'char', classes: { klass: false, text: true, num: true } }, options) ); }); }, - words : function() { + words: function( options ) { - return this.each(function() { - injector($(this), ' ', 'word', ' '); + return this.each(function(){ + injector( $(this), $.extend({ rgxp: /([^\s]+)/gim, klass: 'word', classes: { klass: false, text: true, num: true } }, options) ); }); }, - - lines : function() { + + lines : function( options ) { 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 + // (*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', ''); + injector( $(this).children("br").replaceWith('eefec303079ad17405c889e092e105b0').end(), $.extend({ rgxp: /\s*(.*?)\s*(eefec303079ad17405c889e092e105b0|$)/gim, klass: 'line', classes: { klass: false, text: false, num: true } }, options) ); + $('span:last',this).remove(); // currently leaves a blank extra span at the end :| + }); + + }, + + dropcap: function( options ) { + + return this.each(function(){ + injector( $(this), $.extend({ rgxp: /^(\w)/im, klass: 'dropcap', classes: { klass: true, text: true, num: false } }, options) ); }); } @@ -54,13 +67,14 @@ $.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 + if ( methods[method] ) { + return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); + } else if ( typeof method === 'object' || ! method ) { + return methods.letters.apply( this, arguments ); // default to letters method + } else { + $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); } - $.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); return this; }; -})(jQuery); \ No newline at end of file +})(jQuery); From 59260abd1c3f41b924ac90fcb92749016e2a9860 Mon Sep 17 00:00:00 2001 From: Robert O'Rourke Date: Tue, 5 Apr 2011 17:43:56 +0100 Subject: [PATCH 2/4] updated the readme and examples to accurately match the new class naming system Signed-off-by: Robert O'Rourke --- README.md | 24 +++++++++++++----------- examples/index.html | 2 +- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 17a2171..3dce05e 100644 --- a/README.md +++ b/README.md @@ -17,19 +17,21 @@ After including jQuery, [download and include the minified version of Lettering. The resulting code will churn your `.fancy_title` and output the following:

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

-Magical. Now the text is easy to manipulate in your CSS using an ordinal `.char#` pattern. This plugin assumes basic counting skills, but it's a pretty fast and easy way to get control over every letter. +Magical. Now the text is easy to manipulate in your CSS using an ordinal `.char#` or alpha-numeric `.char-x` pattern. This plugin assumes basic counting and reading skills, but it's a pretty fast and easy way to get control over every letter. + +Special cases such as unicode characters or spaces are URL-escaped and the % sign replaced with a `u` so a space has the class `.char-u20` and an ampersand will have the class `.char-u26`. ## Consult the Wiki, Pls diff --git a/examples/index.html b/examples/index.html index 05655d7..f487358 100644 --- a/examples/index.html +++ b/examples/index.html @@ -114,7 +114,7 @@

Dropcap

The Result

-

This is an amazing revolution in Typography. The possibilities are endless: a whole alphabet of dropcap class names like .dropcap-T.

+

This is an amazing revolution in Typography. The possibilities are endless: a whole alphabet of dropcap class names like .dropcap-t.

From 86cfce8013c9bdb87c9a399dcb6dfa24f73732f3 Mon Sep 17 00:00:00 2001 From: Robert O'Rourke Date: Wed, 6 Apr 2011 01:46:54 +0100 Subject: [PATCH 3/4] removed the forced lowercase on class names --- jquery.lettering.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/jquery.lettering.js b/jquery.lettering.js index 04e9ae8..0749773 100644 --- a/jquery.lettering.js +++ b/jquery.lettering.js @@ -8,7 +8,7 @@ * * Thanks to Paul Irish - http://paulirish.com - for the feedback. * -* Regexified, configurablified & deloopified by Robert O'Rourke - http://sanchothefat.com +* Regexified, classinated, configurablised & deloopified by Robert O'Rourke - http://sanchothefat.com * * Date: Tue Apr 5 10:00:00 2011 */ @@ -19,12 +19,12 @@ inject = t.text().replace(opts.rgxp, function(){ c = []; if ( opts.classes.klass ) c.push(opts.klass); - if ( opts.classes.text ) c.push(opts.klass + '-' + escape( arguments[1].toLowerCase() ).replace('%','u') ); // sanitise for class name + if ( opts.classes.text ) c.push(opts.klass + '-' + escape( arguments[1] ).replace('%','u') ); // sanitise for class name if ( opts.classes.num ) c.push(opts.klass + ++i); return ''+ arguments[1] +''; }); t.html( inject ); - } + } var methods = { letters : function( options ) { From de677a6dbedb88f67c3b3b5487a86934e2de5088 Mon Sep 17 00:00:00 2001 From: Robert O'Rourke Date: Wed, 6 Apr 2011 21:53:24 +0100 Subject: [PATCH 4/4] Added an explanation of using the options object to the examples page. Added example CSS for creating kerning pairs. --- README.md | 12 +++++++++--- examples/index.html | 28 ++++++++++++++++++++++++++++ examples/style.css | 6 ++++++ 3 files changed, 43 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3dce05e..9fbabaf 100644 --- a/README.md +++ b/README.md @@ -17,12 +17,12 @@ After including jQuery, [download and include the minified version of Lettering. The resulting code will churn your `.fancy_title` and output the following:

- S + S o m e - T + T i t l @@ -31,7 +31,7 @@ The resulting code will churn your `.fancy_title` and output the following: Magical. Now the text is easy to manipulate in your CSS using an ordinal `.char#` or alpha-numeric `.char-x` pattern. This plugin assumes basic counting and reading skills, but it's a pretty fast and easy way to get control over every letter. -Special cases such as unicode characters or spaces are URL-escaped and the % sign replaced with a `u` so a space has the class `.char-u20` and an ampersand will have the class `.char-u26`. +Special cases such as unicode characters or spaces are URL-escaped so a space has the class `.char-u20` and an ampersand will have the class `.char-u26`. ## Consult the Wiki, Pls @@ -44,6 +44,12 @@ If you have an idea for the wiki, file an issue and we'll try and write somethin ## Best Practices & Kerning We've found this to be a pretty quick and elegant solution to create typographical CSS3 posters. It's also a great solution for really custom type headings, while keeping the text selectable. +You can create kerning pairs using the following CSS syntax as a guide: + + .char-A + .char-V, + .char-V + .char-A { margin-left: -0.1em; } + .char-T + .char-o { margin-left: -0.1em; } + ### Best Practices Be smart and use sparingly. You'll probably break your browser if you try to wrap every letter on your page in a `span` tag, so don't do that. Look to use this in your Headings, Blockquotes, Asides, etc. diff --git a/examples/index.html b/examples/index.html index f487358..1e5a6a5 100644 --- a/examples/index.html +++ b/examples/index.html @@ -136,6 +136,34 @@

The Result

WOOOoo!

+ +
+

Advanced #3: The options object

+
$("#demo6 h1").lettering({
+    rgxp: /([abcedfg])/gim,
+    klass: 'letter',
+    classes: { klass: true, text: true, num: true }
+});
+

The options object can be passed to any method and has 3 properties:

+
+
rgxp
+
Regular Expression
+ The first capturing parentheses determine what text gets wrapped in spans. You can customise it if desired, in the example above only the letters a-g will be wrapped in spans.
+
klass
+
String
+ This is used as the base of the CSS class name used in the span. Use this if you run into conflicts with existing class names or just prefer something else.
+
classes
+
Object
+ An object with 3 properties that determine the CSS class names applied to the spans: +
    +
  • klass: if true adds the plain base class name eg. <span class="letter">
    • +
  • text: if true adds a class containing the matched text eg. <span class="letter-a">
    • +
  • num: if true adds a class containing the numeric order of the letter eg. <span class="letter3">
    • +
+ All the above together would give you a class name like this: <span class="letter letter-a letter3"< +
+
+
diff --git a/examples/style.css b/examples/style.css index 0d9cb55..87afe7e 100644 --- a/examples/style.css +++ b/examples/style.css @@ -146,6 +146,12 @@ section { margin-bottom: 4em; } p { margin-bottom:1.5em;} +dt { font-size: 18px; } +dd { margin: 0.5em 0 0.5em 80px; } + +ul { margin: 0.5em 0 0.5em 16px; } +li { margin: 0 0 0.5em; } + @media print { * { background: transparent !important; color: #444 !important; text-shadow: none !important; }