Home arrow JavaScript arrow The Lettering.JS jQuery Plug-in: Styling Individual Characters
JAVASCRIPT

The Lettering.JS jQuery Plug-in: Styling Individual Characters


In this first part of a series, I introduce you to using the Lettering.JS jQuery plug-in. The plug-in makes it really easy to assign different styles to the characters of any text-based HTML element. It transparently generates the additional markup required to do this, without complicating the structure of the web page with non-semantic code.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
November 08, 2010
TABLE OF CONTENTS:
  1. · The Lettering.JS jQuery Plug-in: Styling Individual Characters
  2. · Using the Lettering.JS plug-in to style individual characters

print this article
SEARCH DEVARTICLES

The Lettering.JS jQuery Plug-in: Styling Individual Characters
(Page 1 of 2 )

Unless youíre one of the few who still think that Arial, Tahoma and Verdana are all you need to create truly smashing web page headers, youíll find yourself, sooner or later, getting your hands dirty with image replacement. And if you havenít done so yet, you should as soon as possible, especially if you intend to get seriously involved in the approaches and technologies of modern web design.

Yes, once youíve used image replacement, itís really hard to go back to styling the heading elements of your web pages using only plain text in every possible case. As with other methodologies, though, image replacement isnít a panacea that can be used all the time to give text-based elements a fresh and fancy look. The technique has some accessibility-related issues which often cannot be tackled without appealing to dirty browser hacks or coding additional markup. 

However, image replacement (at least in its CSS-based versions) shouldnít be seen as an anti-pattern. When used carefully, or when coupled with a proper dose of unobtrusive JavaScript, it can yield impressive results. Right now, you're probably wondering how good it can be to combine client-side scripting with CSS image replacement, correct? Well, let me answer your question with a simple example: say for a moment that you want to give each word of an H1 element a different style. In a case like this, the first solution that comes to my mind is to wrap every single word inside a couple of <span> tags, which is a quick and dirty approach that wonít preserve the elementís semantic meaning. Too bad.

Even worse, suppose that you want to style each character of the element  individually! At that point, youíll end up adding lots of <span> elements to your markup in pursuit of a lost cause. So, is there a way to accomplish this any better? Enter Lettering.JS, a small jQuery plug-in developed by Dave Rupert which will let you assign separate styles to each character, word or line of any text-based HTML element in a snap. Whatís more, the plug-in will add the <span> tags for you behind the scenes, so it won't break down your semantic markup with chunks of useless elements. What more can you ask for?

Considering that Lettering.JS is worth analyzing in detail, in this article series Iíll be covering its most relevant features. I'll also show you how to merge its functionality with CSS-based image replacement.

Does my offer sound appealing to you? Then start reading!

Getting started: defining a basic web page

Before I start digging deeper into the usage of the Lettering.JS plug-in, I need to build a web page containing at least one element with parts that can be styled individually. To fit this requirement, below I included the definition of a basic (X)HTML document; for the sake of simplicity, it includes a trivial H1 header. As youíll see in a moment, the plug-in will make assigning separate styles to this element a breeze, trust me.

Having clarified that, hereís how this sample document looks initially, before we add our styling:     

<!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 the Lettering.JS jQuery plug-in</title>
<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;
}
</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>

Definitely, thereís no much that can be said about the above web page, except that it defines the classic header, content and footer sections that youíll find on almost every web site today. You should notice, however, that the header in question includes the aforementioned H1 element, which for demonstration purposes wraps a trivial text.

In a normal situation, the default appearance of this element can be redefined via CSS in a straightforward manner, through some of the image replacement techniques currently available.

Things get much more challenging, however, when itís necessary to style each letter, word or line of the element separately. The only way to achieve this is by embedding additional, non-semantic markup. Not all is lost in a case like this, however. Here is where the Lettering.JS plug-in comes into play to drastically simplify this process.

But itís time to stop talking and begin showing how to put the plug-in to work assigning a different style to each character of the H1 element just discussed. This will be done in the following segment, so to learn more on this topic, click on the link 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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials