Winnipeg Web Design

Lettering.js jQuery Plugin

 

When I first saw this jQuery plugin I thought I would never be able to find a use for it. I mean on most of my sites I don’t need to do any crazy typography. Usually if I need something I would just do it using an image. Recently however, I found a use for this library. It happened that I wanted to add a tag around the first word of Joomla titles, so I could change the color. After finding out you couldn’t hard-code HTML in the titles, I was instructed to try out this library. Worked like a charm!

Download Lettering.js

How Lettering.js Works

Let’s try and create the scenario I mentioned above. Imagine this simple html:

<h1>The Long Joomla Title</h1>

Along with this JS:

<script src="path/to/jquery-1.4.2.min.js"></script> // remember to change the paths
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(function() {
  $("h1").lettering();
});
</script>

Above code is pretty straight forward. First we include jQuery, then the lettering plugin, and finally we call the lettering function.

By default the outputted code would look like this after the JS is ran:

<h1>
<span class="char1">T</span>
<span class="char2">h</span>
<span class="char3">e</span>
<span class="char4"> </span>
<span class="char5">L</span>
<span class="char6">o</span>
<span class="char7">n</span>
<span class="char8">g</span>
<span class="char9"> </span>
<span class="char10">J</span>
<span class="char11">o</span>
<span class="char12">o</span>
<span class="char13">m</span>
<span class="char14">l</span>
<span class="char15">a</span>
<span class="char16"> </span>
<span class="char17">T</span>
<span class="char18">i</span>
<span class="char19">t</span>
<span class="char20">l</span>
<span class="char21">e</span>
</h1>

Wouldn’t you hate to have to do this manually? Would make for very default to maintain code. Now if we change the title the ‘s automatically regenerate.

This still doesn’t quite do what we want it to do. We actually want to separate it into words instead of characters. Change the JS to this:

<script src="path/to/jquery-1.4.2.min.js"></script> // remember to change the paths
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(function() {
  $("h1").lettering('words');
});
</script>

Now our spans would look like this:

<h1>
<span class="word1">The</span>
<span class="word2">Long</span>
<span class="word3">Joomla</span>
<span class="word4">Title</span>
</h1>

Now to style the first word to be a different color it is this simple!

h1 .word1 { color: #f00; }

There is quite a bit of other functionality, but I hope this gives you a start. Check out Dave Rupert’s article for more info.