Web Site Cookbook

4.5. Adding a Discretionary Hyphen to Long Words

Problem

You need to specify a grammatical break in an extremely long word or group of words that frequently appears on your web pages.

Solution

The web page in my mock example (see Figure 4-3) extols the virtues of Dr. Chandrasekhar's interdenominational electroencephalograph.

Imagine having this or other long words and phrases popping up all over your web site, pushing your layout around and otherwise wreaking havoc. The soft hyphen—&#173; or &shy;—can help rein it in. Here's the code I used for the main headline:

	Chan­dra­sek­har's
	E­lec­tro­en­ceph­a­lo­graph

The HTML soft hyphen will appear when needed and remains hidden when not.

Figure 4-3. A sample web page that uses the soft hyphen to indicate optional hyphens in log words at the end of a line

Discussion

Print publishers have long relied on the powerful auto-hyphenation features of their layout programs to give the text in their finished work a smooth, even appearance. The knowledge of the natural grammatical breaks in words that was once the sole domain of experienced typesetters now ships standard with programs such as QuarkXPress, Adobe In Design, and others. Modern-day Gutenbergs working on documents to be printed have another powerful tool: by inserting a discretionary hyphen, they can indicate where a long word can be broken, or hyphenated, at the end of a line when fitting copy into their page layouts.

HTML has few, if any, of the copy-fitting conveniences of desktop publishing programs. As any experienced web designer can attest, web surfers have a lot more control over the way the page looks than, say, a magazine reader has over the design of his favorite periodical. Visitors to your site can view, enlarge, reduce, copy, and print the contents of your web site in ways not possible with traditional print media.

You can bring a little of that control over the display—just a little—in situations when long words have to fit in small spaces. Use the HTML equivalent of the discretionary hyphen, called a soft hyphen, denoted in your code as either a numerical (­) or named (­) entity.

When the time comes to employ this technique, consult a good reference, such as Webster's New World Dictionary, for guidance on where to insert the breaks each time the word appears on a page, and you can start calling yourself a cyber-typesetter.

Two notes of caution: use this Recipe sparingly. Flexibility in the way your content gets displayed is a good thing. Becoming a control freak with soft hyphens everywhere…not so good. Also, support for the soft hyphen among web browsers varies. Internet Explorer for Windows and Safari for Macs treats them as expected—there when you need them, gone when not. Mozilla, Firefox, and recent versions of Netscape Navigator do not show the soft hyphen at all. Long words either appear in their entirety at the end of one line or jump completely to the beginning of the next line when the page is squeezed and the text gets reflowed. Navigator Version 4 and Internet Explorer Version 5 for Mac, unfortunately, can't hide its dislike for the soft hyphen. It appears as an ugly box "glyph" all the time, regardless of its position on the line.