The Lettering.JS jQuery Plug-in: Using Images With Text Lines
In this penultimate chapter of the series, I develop another easy-to-follow example that illustrates how simple it is to merge the functionality of the Lettering.JS jQuery plug-in with image replacement, and decorate the text lines of a selected HTML element with individual background graphics. Thanks to the flexibility provided by the plug-in’s “lettering()” method, the entire styling process will be a breeze.
The Lettering.JS jQuery Plug-in: Using Images With Text Lines (Page 1 of 2 )
There’s an old proverb that says “The good things in Life come in small packages.” While the phrase can’t be taken at face value for obvious reasons, it applies to some extend to web design, especially when it comes to picking a jQuery plug-in from the many available. If my claim doesn’t sound convincing to you, then take a peek at Lettering.JS. This really lightweight library can be used to assign individual styles to the characters, words and lines of any text-based HTML element, without amending a single chunk of your beautifully-crafted markup.
Of course, if you’ve been a loyal reader of this article series, and you've already read all of the previous tutorials, then you’ve acquired a thorough background in using Lettering.JS. In those tutorials I created a decent variety of code samples, which demonstrated how to employ the plug-in to separately style the letters, words and even text lines of a sample H1 header. What’s more, in each case the styling process covered the use of image replacement, thus recreating a scenario that most web designers have to tackle on a frequent basis.
But hold on a second! Although I did explain how to assign different foreground colors to the text lines of the aforementioned H1 element, I haven't yet discussed how to decorate it with individual background images. This topic deserves a close analysis, considering its current relevance. In an attempt to address this issue, in this penultimate installment of the series I’m going to modify the example that you saw in the previous part, but this time the Lettering.JS plug-in will be used to assign a new set of background graphics to the lines of the sample header.
Ready to learn the full details of this styling process? Then don’t hesitate anymore; begin reading!
Review: styling text lines with different foreground colors
As usual, before I start explaining how to decorate the H1 element with individual background images, I'd like to spend just a few moments recalling the example built in the previous chapter of the series. It showed how to take advantage of Lettering.JS for parsing the element’s text lines by assigning each of them a different foreground color.
In case you're still not familiar with the internals of this process, the plug-in’s “lettering()” method must first be called with the argument “lines,” and the lines in question must also be separated by <br /> tags. Does this sound somewhat confusing? Don’t worry; just pay attention to the following code sample, which hopefully will clear things up:
<!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 lines individually)</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('lines'); }); </script> <style type="text/css"> body { padding: 0; margin: 0; background: #000; font: 0.9em Arial, Helvetica, sans-serif; color: #fff; } #wrapper { width: 960px; margin: 0 auto; } #header, #content, #footer { padding: 20px; } /* styles for each line of the header */ #colorful_header span { font-weight: bold; font-size: 4em; } #colorful_header span.line1 { color: #f00; } #colorful_header span.line2 { color: #0f0; } #colorful_header span.line3 { color: #ff0; } </style> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="colorful_header">Hey buddy,<br /> are you doing some PHP<br /> right now?</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 it was just noted, this time the “lettering()” method has been invoked with the parameter “lines,” which makes Lettering.JS parse only the text lines of the selected HTML element. Thanks to the enumerated CSS classes that the plug-in generates on the fly, it’s possible to turn a boring and dull web page header into a colorful and fresh one, whose appearance is depicted by the following screen capture:
Certainly, that looks pretty good, considering that the entire process only required the coding of a couple of JavaScript lines and some straightforward CSS styles. As I stated in the introduction, however, the visual presentation of the H1 header can be improved by attaching to it a group of background images. With that said, in the segment to come I’m going to modify the CSS styles just created, so that they can use a whole new set of custom background graphics.
To learn more on this topic, jump ahead and read the next few lines.
JavaScript 
