Home arrow JavaScript arrow The Lettering.JS jQuery Plug-in: Styling an HTML Element`s Words
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
November 10, 2010
TABLE OF CONTENTS:
  1. · The Lettering.JS jQuery Plug-in: Styling an HTML Element`s Words
  2. · Using Lettering.JS to style the words of an HTML element

print this article
SEARCH DEVARTICLES

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.


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials