Home arrow JavaScript arrow The Lettering.JS jQuery Plug-in: Parsing Text Lines
JAVASCRIPT

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 16, 2010
TABLE OF CONTENTS:
  1. · The Lettering.JS jQuery Plug-in: Parsing Text Lines
  2. · Styling text lines individually with Lettering.JS

print this article
SEARCH DEVARTICLES

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.

Now, jump forward and read the lines to come.  


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