Hyphens a soft problem

§ Web standards · Browsers · Typography

One of the prime tools in the typographer’s toolbox is the hyphen. Typographers use hyphens to divide words across lines, thereby helping to equalise line-lengths, decreasing word-spacing and increasing readability. All books and newspapers of any quality use this technique to ‘justify’ their text, yet it is not a tool available to Web designers in any useful form.

Word division across lines should be available as a CSS property with the algorithms built into browser language packs (in fact the CSS 3 Text Module introduces word-break-inside:hyphenate). Such software, comprising hyphenation dictionaries, has been around for some time in page layout tools such as QuarkXPress and more recently in Adobe InDesign, but has yet to make it into word processing packages, let alone Web browsers.

It’s worth noting that the rules for word division are reasonably straight forward and eminently programmable. In English, one should divide words after a vowel, turning over the consonant. In present participles, take over -ing, as: carry-ing, divid-ing, crown-ing. Generally whenever two consonants come together, put the hyphen between them: splen-dour, forget-ting, tetraphyl-lidea, haemor-rhage. And always try to devide so the first part of the division suggests what is following: e.g. starva-tion not star-vation; re-adjust not read-just; cam-ellia not camel-lia. The rule for division of words is not one of etymology but of sound or pronunciation.

So without CSS to the rescue just yet, the next best method is to insert hyphen characters either manually or by post-processing a CMS. However, liquid layouts and resizable text mean that, on the Web, one never knows which word will be at the end of a line, the implication being that a special hyphen is required which only shows itself when a word is divided.

Such a character has existed as an entity since HTML 3.2; it is the soft hyphen (­ or ­). Hyphenation is well explained in HTML 4.0, so why does no-one use it? Not knowing of its existence may be one reason, typographical ignorance or time constraints others, but what’s really stopping us using it now is poor and inconsistent browser support.

Test cases reveal that, for once, IE6 gets it right, as does Opera 7. Mozilla hides all soft hyphens – an acceptable degradation but still wrong, however Safari displays all soft hyphens, rendering text virtually unreadable. In the words of the typographer Geoffrey Dowding:

If the typesetter has resolved never to divide words, such works would rarely, if ever be of any typographic distinction.

We have still some way to go.