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>
$(function() {

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:

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

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>
$(function() {

Now our spans would look like this:

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

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.

Be Sociable, Share!

Written by brenelz

Hello everyone, I'm Brenley Dueck or better known as Brenelz. I currently run my own business called Brenelz Web Solutions which focuses primary on winnipeg website design. The web technologies I most specialize in are CSS, jQuery, AJAX, PHP, and the MySQL database. Please make sure to follow me on twitter.


One Response to “Lettering.js jQuery Plugin”

  1. Joe Says:

    April 22nd, 2011 at 11:52 am


    Would you be able to explain exactly how you got this to work with Joomla 1.5? I am wanting the first word of my article titles to be a different color than the rest of the title. Is this what you were able to accomplish? Thanks!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

connect with me!