Skip to content

For your consideration #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

For your consideration #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
72d876c
Modified lettering.js to use regex and a .replace() method instead of…
roborourke Apr 5, 2011
59260ab
updated the readme and examples to accurately match the new class nam…
roborourke Apr 5, 2011
86cfce8
removed the forced lowercase on class names
Apr 6, 2011
de677a6
Added an explanation of using the options object to the examples page.
Apr 6, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 21 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,31 @@ We'll start with some really basic markup:
<h1 class="fancy_title">Some Title</h1>

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:

<script>
$(document).ready(function() {
   $(".fancy_title").lettering();
});
</script>

The resulting code will churn your `.fancy_title` and output the following:

<h1 class="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>
<span class="char-S char1">S</span>
<span class="char-o char2">o</span>
<span class="char-m char3">m</span>
<span class="char-e char4">e</span>
<span class="char-u20 char5"> </span>
<span class="char-T char6">T</span>
<span class="char-i char7">i</span>
<span class="char-t char8">t</span>
<span class="char-l char9">l</span>
<span class="char-e char10">e</span>
</h1>

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

Expand All @@ -42,6 +44,12 @@ If you have an idea for the wiki, file an issue and we'll try and write somethin
## Best Practices &amp; 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.

Expand Down
69 changes: 55 additions & 14 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
Expand All @@ -15,7 +15,7 @@

<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>

<style type="text/css" media="screen">
.demo {
padding: 50px;
Expand All @@ -27,7 +27,7 @@
line-height:1.5;
text-align:center;
}

.demo h1 { font-size:72px; text-transform:uppercase; margin-bottom:0px;}
.char2,
#demo2 .word2,
Expand All @@ -40,6 +40,8 @@
.char5 { color: green; }
.char6 { color: indigo; }
.char7 { color: violet; }
#demo4 { text-align: left; }
.dropcap { font-size: 310%; float: left; line-height: 1; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../jquery.lettering.js"></script>
Expand All @@ -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)'});
});
</script>

Expand All @@ -62,7 +65,7 @@
<h1 id="thebrand">Lettering.JS</h1>
<p>The following are some hokey examples of how you can implement LETTERING.JS.
</header>

<article id="main">
<section id='lettering-demo'>
<h2>Letters</h2>
Expand All @@ -82,7 +85,7 @@ <h4>The Result</h4>
<div id="demo1" class="demo">
<h1>Rainbow</h1>
</div>

</section>

<section id='words-demo'>
Expand All @@ -105,31 +108,69 @@ <h4>The Result</h4>
</div>
</section>

<section id='dropcap-demo'>
<h2>Dropcap</h2>
<code><pre>$("#demo4 p").lettering('dropcap');</pre></code>

<h4>The Result</h4>
<div id="demo4" class="demo">
<p>This is an amazing revolution in Typography. The possibilities are endless: a whole alphabet of dropcap class names like .dropcap-t.</p>
</div>
</section>

<section id='advanced1-demo'>
<h2>Advanced #1: Chaining 2 Methods</h2>
<code><pre>$("#demo4 h1").lettering('words').children("span").lettering();</pre></code>
<code><pre>$("#demo5 h1").lettering('words').children("span").lettering();</pre></code>
<h4>The Result</h4>
<div id="demo4" class="demo">
<div id="demo5" class="demo">
<h1>Double Rainbow</h1>
</div>
</section>

<section id='advanced2-demo'>
<h2>Advanced #2: Chaining and Styling</h2>
<code><pre>$("#demo5 h1").lettering()
<code><pre>$("#demo6 h1").lettering()
.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});</pre></code>
<h4>The Result</h4>
<div id="demo5" class="demo">
<div id="demo6" class="demo">
<h1>WOOOoo!</h1>
</div>
</section>

<section id='advanced2-demo'>
<h2>Advanced #3: The options object</h2>
<pre><code>$("#demo6 h1").lettering({
rgxp: /([abcedfg])/gim,
klass: 'letter',
classes: { klass: true, text: true, num: true }
});</code></pre>
<p>The options object can be passed to any method and has 3 properties:</p>
<dl>
<dt>rgxp</dt>
<dd><strong>Regular Expression</strong><br />
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.</dd>
<dt>klass</dt>
<dd><strong>String</strong><br />
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.</dd>
<dt>classes</dt>
<dd><strong>Object</strong><br />
An object with 3 properties that determine the CSS class names applied to the spans:
<ul>
<li>klass: <em>if true adds the plain base class name eg.</em> <code>&lt;span class="letter"&gt;</code></li>
<li>text: <em>if true adds a class containing the matched text eg.</em> <code>&lt;span class="letter-a"&gt;</code></li>
<li>num: <em>if true adds a class containing the numeric order of the letter eg.</em> <code>&lt;span class="letter3"&gt;</code></li>
</ul>
All the above together would give you a class name like this: <code>&lt;span class="letter letter-a letter3"&lt;</code>
</dd>
</dl>
</section>

</article>

<footer>
<p>&copy;2010 Dave Rupert <a href="http://daverupert.com">http://daverupert.com</a>
</footer>
</div>
</div>

</body>
</html>
6 changes: 6 additions & 0 deletions examples/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand Down
74 changes: 44 additions & 30 deletions jquery.lettering.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,80 @@
/*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 += '<span class="'+klass+(i+1)+'">'+item+'</span>'+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 '<span class="' + c.join(' ') + '">'+ arguments[1] +'</span>';
});
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 <br/> tag consistently across browsers,
// (*ahem* IE *ahem*), we replaces all <br/> 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 <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', '');
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) );
});

}
};

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