How to Improve HTML Heading Layout with jQuery12 Jul 2010
When headings marked-up with the
<h6> HTML tags are too long to fit on a single line, web browsers wrap the trailing words onto the next line. When the second line of the heading contains two or more words, this layout looks fine. However, when the second line contains just a single word, this layout is ugly—to my eye at least.
For example, I would prefer my browser wrapped the last two words of the title of this post, How to Improve HTML Heading Layout with jQuery, rather than just the last word:
|Bad|| How to Improve HTML Heading Layout with
|Good|| How to Improve HTML Heading Layout
Clear heading layout is important because users scan web pages so quickly. The typesetting industry doesn’t like straggling words either; authors, editors and typesetting software make sure that books and other printed documents don’t contain widows and orphans, which are paragraphs that begin on the last line of a page or end on the first line of a page.
The solution to a lone word on the second line of an HTML heading is itself simple: replace the space between the last two words in the heading with the non-breaking space entity (
) to force browsers to wrap the last two words of the heading onto the next line. The real work is how to insert the
into the heading.
If you’re coding your own website, it’s easy to insert the
, either by replacing the last space in your headings in a text editor for static pages, or by amending the code that delivers your headings when you’re generating your website dynamically with PHP, for example.
If you’re using a content-management system like WordPress, it’s not so easy. Although WordPress themes format posts, pages and comments, themes use core WordPress functions that perform standard tasks, which include retrieving headings. Scouring the PHP files that implement WordPress to find the right place to insert the
is time-consuming and boring. And besides, once you’ve fixed the layout of your WordPress headings, umpteen other publishing platforms await their own heading-layout fix. There has to be an easier way.
I wrote the
joinLastTwoWords function loops through each HTML element selected by the jQuery selector string, which in this case is every element marked-up with any of the six HTML heading tags (
'h1, h2, h3, h4, h4, h6').
If the text of the HTML element doesn’t contain a space, the loop moves on; otherwise the position of the last space is recorded (the last space separates the last two words).
The code then sets up a three-element array to contain all the words in the text before the space, the non-breaking space entity (
), and the single word after the last space. The code then joins these three parts to form a new string which replaces the text of the HTML element.
To include the
joinLastTwoWords function in your own website, you’ll need to save it in a file, upload it to your server and reference it in your HTML code. You’ll also need to include the jQuery library file (version 1.3.2 or later). Here’s an example:
joinLastTwoWords function runs after the browser renders the text, users may notice the titles being reformatted. However, users will likely consider this reformatting as part of the overall page-downloading process because images often cause multiple page re-layouts.
join-last-two-words.js script from GitHub.