diff --git a/README.md b/README.md index 329216c..9fbabaf 100644 --- a/README.md +++ b/README.md @@ -7,29 +7,31 @@ 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:

- 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 so a space has the class `.char-u20` and an ampersand will have the class `.char-u26`. ## Consult the Wiki, Pls @@ -42,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 97283ce..1e5a6a5 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,69 @@

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!
+ +
+

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; } diff --git a/jquery.lettering.js b/jquery.lettering.js index 4515590..0749773 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, classinated, configurablised & 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] ).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);