Rodrigo Flores > Preventing Title Widows Revisited

Preventing Title Widows Revisited

March 8, 2010

A while ago, Chris Coyier, one of my favorite authors and fellow web enthusiast, posted handy script on CSS-Tricks to get rid of title widows. However, even though the script works beautifully there are a couple things that you should be aware of…`

The first time I tried to use Chris’ snippet, I tried to apply it to all my Joomla titles in a template I was building, not realizing that there are a few conditions that render the script ineffective.

My original selector looked something like this:

1	$("h1, h2, h3, h4, h5, h6, .contentheading, .componentheading").each(function...

And here is what I noticed afterwards:

If the title contains only one word, it actually disappears,
More often than not, you will have nested tags in your titles and they would get lost when the script runs

So to fix both issues, we just have to account for those possibilities:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("h1, h2, h3, h4, h5, h6, .contentheading, .componentheading").each(function() {
if($(this).has('a')) {
var wordArray = $('a', this).text().split(" ");
if(wordArray.length > 1) {
wordArray[wordArray.length-2] += " " + wordArray[wordArray.length-1];
wordArray.pop();
$('a', this).html(wordArray.join(" "));
}
} else {
var wordArray = $(this).text().split(" ");
if(wordArray.length > 1) {
wordArray[wordArray.length-2] += " " + wordArray[wordArray.length-1];
wordArray.pop();
$(this).html(wordArray.join(" "));
}
}
});

Note that the same can be true for small, strong, em, and other tags, etc. The point is just to be careful.

Here’s Chris’ original article on preventing title widows just for reference.