Hyphenation on the Web

Note Entry

Main Content

As it has been stated many times in the past, typesetting on the web is difficult, if not, near impossible. The lack of full control for tracking and kerning forces many web authors to forgo true justification of text and settle for the option of ragged-right alignment. But, as is evidenced by almost every web page, even this form of formatting text for the screen does not prevent the inelegant display of words and paragraphs.

In the case of justified text, a paragraph is beset with rivers of white space encroaching between words; while, if aligned flush left, the paragraph is prone to erratic line lengths forming sharp caverns of white space on its right side. Either way, no win. The importance of hyphenation does not just pertain to full justification where its use is a necessity; but, is a great aid when using ragged-right alignment. As Brandon Craig Rhodes comments on Ned Batchelder's post regarding Bad web typography: full justify:

First, full justification is not merely a matter of mimicry; it’s a matter of usability. Ragged edges impose cognitive load, because the eye has to re-discover the edge of every single line. With fully justified text, by contrast, the eye can simply read to the edge of the big, visually-obvious rectangle it’s scanning and not have to peer blearily in between two adjacent lines of text for exactly where the current one ends.

Read any paragraph on the web and you will most likely come across an extreme line offset which causes an erratic disruption to the flow of reading. Focused reading is dependent on developing a good rhythm as your eyes move from the top of a page to its bottom. Without hyphenation, a paragraph can fall apart into a discordant series of lines with uneven measure.

Although web browsers currently do not offer the means to automatically hyphenate text, there are tools available which aid web authors in implementing hyphenation on their websites. The tool I use is Hyphenator.js which is a “javascript that implements client-side hyphenation of HTML documents.” As an alternative, you can also use phpHyphenator which implements hyphenation “directly on the server without sending the pattern files to the client.” Both rely on Franklin M. Liang’s hyphenation algorithm (pdf). Although, I do use Hyphenator.js whenever I align paragraphs using full justification, I do not always use it when aligning ragged-right. This is dependent on how each line of the paragraph reads. Of course, as always, there is no free lunch when using this script to automate hyphenation. The price you pay is a paragraph riddled with soft hyphens throughout the text which causes problems when trying to cut-and-paste content:

Since the web is de fined as an in for ma tion al medi um, its direct re jec tion of the read er is the re sult of it being built upon the paradigm of be hav ioral in ter ac tion and not the nar ra tive form. By fo cus ing on the im me di a cy and ef fi cien cy of in forma tion de liv ery, the web seeks to ser vice our dig i tal ego—the user—at the cost of the aes thet ic ex pe ri ence of the nar ra tive. As a con se quence, the web is full of sites that lack vi su al ly inter est ing de sign, have poor aes thet ic us abil i ty and make banal use of ty pog ra phy.

As you can see from the above extracted text, you would need to edit the cut-and-pasted excerpt in order to manually remove the soft hyphens. Personally, it’s a price I am willing to pay. For the future, there is hope that CSS3 will provide a more elegant implementation of automated hyphenation; but, it is unlikely to happen anytime soon.