Home arrow JavaScript arrow The Lettering.JS jQuery Plug-in: Style Words with Background Images
JAVASCRIPT

The Lettering.JS jQuery Plug-in: Style Words with Background Images


In this fourth part of the series, you'll see how easy it is to combine the functionality of Lettering.JS with image replacement and build a web page header whose words are individually decorated with background graphics. There’s plenty of room to experiment here, so after you've seen how it's done, you may want to tweak the example and use your own pictures to style the sample H1 header.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
November 15, 2010
TABLE OF CONTENTS:
  1. · The Lettering.JS jQuery Plug-in: Style Words with Background Images
  2. · Using image replacement to style the words of the previous H1 element

print this article
SEARCH DEVARTICLES

The Lettering.JS jQuery Plug-in: Style Words with Background Images
(Page 1 of 2 )

Let’s face it: creating fancy heading elements on web pages can be an annoying and time-consuming task. That's especially true when you need to resort to any of the image replacement techniques currently available to decorate the elements with custom background graphics. Moreover, in many cases the use of image replacement demands the inclusion of additional, non-semantic markup to solve certain accessibility-related issues, thus making the whole process even more painful than usual.

Nevertheless, not all is heartbreak in a situation like this. Among the variety of jQuery plug-ins that exist nowadays, there’s one that can be a real time saver. In this case, I'm talking about Lettering.JS, a lightweight library written by Dave Rupert which can be used for building all sorts of engaging heading elements, without having to alter a single portion of your beautifully-crafted markup. Simply put, the plug-in acts like a parser that dissects the text contained within an HTML element in characters, words and even entire lines, and then wraps the resultant segments within pairs of <span> tags; finally, it assigns to them a sequence of enumerated CSS classes.

This simple and creative process allows you to easily define a different visual presentation for each parsed section. Best of all, there’s no need to manually code any extra (X)HTML elements. Hooray!

What’s more, to demonstrate how easy it is to assign distinct styles to each word of a web page element, in the previous tutorial of this series I created a basic example that performed this task with the text of an H1 header. In that particular case, each word was assigned only a different background color, to keep the entire styling process simple and understandable. It’s possible, however, to take the functionality of Lettering.JS a step further and use it to replace the parsed words with background images.

Provided that you’re interested in learning the full details of this process, in the next few lines I’m going to develop a new example that will demonstrate how to accomplish that task in a few simple steps. Go ahead and begin reading!

Review time: individually styling the words of an HTML element

As I noted in the introduction, Lettering.JS will permit you to easily define individual styles for each word of a text-based HTML element. But how can the plug-in be instructed to do this? The process is as simple as passing the value “words” to its “lettering()” method, and then assigning the desired styles to the CSS classes that the method generates automatically.

If this explanation sounds somewhat confusing to you, look at the example below. It was developed in the preceding tutorial, and shows how to create a colorful H1 header by using the approach just discussed. Here it is: 

<!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)</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: #000;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #fff;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
/* styles for each word of the header */
#colorful_header span {
    font-weight: bold;
    font-size: 5em;
}
#colorful_header span.word1 {
    color: #f00;
}
#colorful_header span.word2 {
    color: #ff0;
}
</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 you can see from the above code fragment, defining separate styles for each word of the target H1 header is indeed a breeze, thanks to the hard work that the Lettering.JS plug-in does quietly in the background. In this particular case, I decided only to assign different foreground colors to the pertinent words, which produces the following result:

There you have it. In a few easy steps, it’s possible to create a fancy web page header whose sections are also entirely selectable. What else can you ask for? In fact, the functionality offered by the Lettering.JS plug-in allows you to take the previous approach one step further, and create a heading element that uses a couple of background images, instead of plain text.    

This process deserves a closer look, so in the next section I’m going to introduce some subtle changes to the example just developed. I will assign a separate background graphic to each word of the aforementioned H1 element.

To learn how this example will be created, click on the link that appears below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials