JAVASCRIPT

The Lettering.JS jQuery Plug-in: Styling an HTML Element`s Words

In this third part of a series, I create another example to show how easy it is to use the Lettering.JS plug-in for assigning separate styles to each word of a selected HTML element. The hard work of this process is carried out behind the scenes, simply by passing the value “words” to the plug-in’s "lettering()” method.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 10, 2010

TABLE OF CONTENTS:

print this article

SEARCH DEVARTICLES

TOOLS YOU CAN USE

The Lettering.JS jQuery Plug-in: Styling an HTML Element`s Words
(Page 1 of 2 )

If you’re looking for a JavaScript library that lets you individually define the visual presentation of the characters, words and lines of any text-based HTML element, without sacrificing the pristine semantics of your markup, then take a look at Lettering.JS, a small -- yet powerful -- jQuery plug-in, which will perform all those tasks for you through an intuitive API.

In reality, what makes Lettering.JS so appealing is that the simple, creative logic it uses behind the scenes lets you implement different styling approaches. You can even use some of the ones on the cutting edge. Here's how it works: depending on the arguments passed to its “lettering()” method, the plug-in first dissects the text wrapped by the target selector in characters, words or lines, then adds to each part a couple of <span> tags, and finally assigns to them a series of enumerated CSS classes that make it possible to define easily separate styles.

If this sounds like a complex and time-consuming process that’s not worth your attention, you should read the tutorials that precede this one. In those articles I created a couple of basic examples that demonstrated how to use the Lettering.JS plug-in to individually style the characters of an H1 element. In the first case, the letters were assigned a different background color, while the second example was a bit more elaborate, as it replaced the characters with a set of background images.

But in fact, I’m only scratching the surface of the functionality that Lettering.JS packs behind its API. As I just noted, the plug-in is capable of splitting up the words of a given HTML selector as easily as it can split its characters. Given that, in this third tutorial of the series you’ll learn how to create a web page header similar to the one shown previously, but this time, each of the words comprising the header will be styled separately.

Are you curious to see how this will be done with Lettering.JS? Then don’t hesitate any longer; begin reading!

Review: combining the Lettering.JS plug-in and image replacement

As I mentioned in the introduction, when used with its default settings, the Lettering.JS plug-in allows you to assign individual styles to each character of an HTML element in a snap. This feature was covered in depth in previous tutorials. Below you'll find an example that shows how to use the plug-in for replacing the letters of an H1 selector with a group of custom background images. Here’s the code sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Lettering.js jQuery plug-in (styling characters individually with background images)</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
    $("#colorful_header").lettering();
});
</script>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #172499;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#wrapper h1 {
    overflow: hidden;
}
/* styles for each character of the header */
#colorful_header span {
    display: block;
    float: left;
    font-weight: bold;
    font-size: 5em;
}
#colorful_header span.char1 {
    width: 65px;
    height: 96px;
    background: transparent url("img/h.png") center center no-repeat;
    text-indent: -9999px;
}
#colorful_header span.char2 {
    width: 58px;
    height: 96px;
    background: transparent url("img/e.png") center center no-repeat;
    text-indent: -9999px;
}
#colorful_header span.char3 {
    width: 55px;
    height: 96px;
    background: transparent url("img/l.png") center center no-repeat;
    text-indent: -9999px;
}
#colorful_header span.char4 {
    width: 55px;
    height: 96px;
    background: transparent url("img/l.png") center center no-repeat;
    text-indent: -9999px;
}
#colorful_header span.char5 {
    width: 71px;
    height: 100px;
    background: transparent url("img/o.png") center center no-repeat;
    text-indent: -9999px;
}
#colorful_header span.char6 {
    width: 27px;
    height: 96px;
    margin-left: 5px;
    background: transparent url("img/excl.png") center center no-repeat;
    text-indent: -9999px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1 id="colorful_header">Hello!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html>

Even though, for the sake of brevity, the background pictures used to decorate the characters of the earlier H1 element haven’t been included this time (you can always get them from the previous part), it’s really easy to see how the Lettering.JS plug-in does its thing. Since the library’s “lettering()” method has been called with no arguments, it appends pairs of <span> tags to each character, and also assigns to the tags a group of enumerated CSS classes, which follow the sequence “char1,” “char2,” … “charN.”

With this markup created transparently, it’s ridiculously simple to build a colorful web page header that uses separate background images. The following screen capture shows the result of this process:

So far, so good, right? Now that you've learned how to merge the functionality of the Lettering.JS plug-in with image replacement, it’s time to see how to employ the library for separately styling the words of the same H1 element that you saw before.

The full details of this process will be discussed in the following section. Thus, to learn more about it, click on the link below and read the next few lines.

Next: Using Lettering.JS to style the words of an HTML element >>