The Lettering.JS jQuery Plug-in: Parsing Text Lines
In this fifth part of the series, I demonstrated how the Lettering.JS plug-in enables developers to assign individual styles to the text lines of an HTML element. In keeping with the simple nature of the plug-in, the entire styling process is reduced to passing the argument “lines” to its “lettering()” method, and then defining the sets of styles for each CSS class that the plug-in generates automatically.
The Lettering.JS jQuery Plug-in: Parsing Text Lines (Page 1 of 2 )
Are you looking for a lightweight JavaScript package that lets you give the heading elements of your web pages a refreshing look without contaminating your markup with non-semantic code? If your answer is yes, you should take a peek at Lettering.JS. Lettering.JS is a small, yet powerful jQuery plug-in that can be used for assigning individual styles to the characters, words and lines of a text-based HTML element. Moreover, due to Lettering.JS's flexible nature, it’s possible to couple the plug-in with any of the image replacement methods available nowadays, thus creating a tandem that is really hard to beat.
Needless to say, if you've already read the previous tutorial of this series, you're familiar with using Lettering.JS to define the visual presentation of the words comprising a sample H1 element. In that article I developed an approachable example which demonstrated how easy it is to use the plug-in to decorate the words with different background images. Since Lettering.JS wraps the parsed text automatically within pairs of <span> tags and assigns to them a bunch of enumerated CSS classes, the most challenging facet of the styling process was (at least for me) to create the required background graphics.
It’s fair to note, however, that the plug-in can also split the text of a web page element into the lines that comprise it, letting you style them separately in a way that is pretty similar to the technique used for characters and words. Thus, in this fifth part of the series I’m going to teach you how to instruct the Lettering.JS plug-in to parse text lines, so that you can implement this approach when decorating your own HTML headers.
Now, it’s time to continue this hopefully educational discussion of the Lettering.JS plug-in. Let’s get going!
Review: assigning background images to the words of an HTML element
As I explained at the beginning, the Lettering.JS plug-in makes it really easy to define separate styles for each word of a text-based HTML element. Simply put, achieving this is as simple as passing the argument “words” to the already familiar “lettering()” method, and then assigning different styles to the CSS classes that the library creates in the background.
It’s possible, though, that the above explanation sounds somewhat confusing to you, so you want to see a concrete example that shows how to perform the task. If that’s the case, simply look at the following code fragment. It uses the plug-in to assign individual background graphics to the words of a sample H1 header. Pay attention to it, please:
<!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 words 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('words'); }); </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 word of the header */ #colorful_header span { display: block; float: left; font-weight: bold; font-size: 5em; } #colorful_header span.word1 { width: 189px; height: 96px; background: transparent url("img/hey.png") center center no-repeat; text-indent: -9999px; } #colorful_header span.word2 { width: 337px; height: 96px; margin-left: 10px; background: transparent url("img/there.png") center center no-repeat; text-indent: -9999px; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="colorful_header">Hey there!</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>
As the above example demonstrates, decorating each word of the sample H1 element is a straightforward process, thanks to the functionality offered by Lettering.JS. As I noted before, the words of the selected element have been assigned distinct background images, which generates the following output:
Admittedly, the previous header isn’t the most eye-catching element that you’ll ever see in your life, but it shows the work that the plug-in can do transparently when its “lettering()” method is called with the “words” argument.
But before you start testing the previous example on every available browser, remember what I said in the introduction: the Lettering.JS plug-in is also capable of parsing the lines of a text-based HTML element as it does with its characters and words. You're now wondering how, right? Well, not surprisingly, this can be accomplished by invoking its “lettering()” method with the argument “lines.”
As usual, the best way to understand the underlying logic of this process is by example. So, with that idea in mind, in the upcoming section I’m going to create a new one for you, which hopefully will make your doubts vanish very quickly.
JavaScript 
