Hy­phen and hy­phen­a­tion

The hy­phen is a punc­tu­ation mark used to join words and to sep­ar­ate syl­lables of a single word. The use of hy­phens is called hy­phen­a­tion. A com­mon use case of hy­phen­a­tion – to break a word so it con­tin­ues on an­other line rather than move the whole word to the next line – might be prefer­able in web pages for the same reas­ons it is used in the print me­dia.

What is be­ing done today

Nowadays de­sign­ers and people who pro­duce HTML rarely ac­count1 for long words and design break­age those words might cause, thus once in a while people spot a web page with design broken in un­ima­gin­able ways. The most com­mon solu­tions dirty hacks to deal­ing with such break­age in­clude

  • Trim­ming the text to con­stant amount of char­ac­ters and ap­pend­ing a ho­ri­zontal el­lip­sis;
  • In­sert­ing line breaks every con­stant amount of char­ac­ters.

The first solu­tion might be very well ac­cept­able where you have well defined space re­stric­tions. For ex­ample you need to fit a title or head­ing into ex­actly one line, which might be or might not be too short to ac­com­mod­ate the whole text. While the hack is ac­cept­able for men­tioned case it cer­tainly is not for deal­ing with the words in a block of text as read­ing and com­pre­hend­ing con­tent be­comes more dif­fi­cult.

The second solu­tion is ac­cept­able when a fixed-width font is used and all lines are equal in length. In all other cases the text gets split into seem­ingly un­re­lated, sense­less lines and the reader in or­der to com­pre­hend the text has to un­der­stand the un­usual split­ting method first.

The solu­tion – hy­phen­a­tion

Hy­phen­a­tion, on the other hand, fol­lows well un­der­stood and defined rules of split­ting word into parts and does not loose any in­form­a­tion like trim­ming does. In ad­di­tion the text be­comes more bal­anced re­gard­less of text align­ment used, which con­trib­utes to the ease of read­ing.

Hy­phen­a­tion in HTML

Be­fore hyphens CSS prop­erty the only way to make browser hy­phen­ate words was to in­ject soft hy­phens2 into the word where hy­phen­a­tion is al­lowed. At the time of writ­ing hyphens prop­erty is still a part of work­ing draft and browser sup­port is spotty, there­fore us­ing this prop­erty is not feas­ible yet and in­ser­tion of soft hy­phens is the only reas­on­able solu­tion. Luck­ily hy­phen­a­tion al­gorithms as well as con­veni­ent lib­rar­ies that im­ple­ment the al­gorithms ex­ist. Prob­ably every pro­gram­ming lan­guage in­clud­ing Py­thon, Haskell and even a cli­ent side JavaS­cript has a lib­rary to either hy­phen­ate the words or in­ject soft hy­phens into the words for you!

Jus­tify all the things

Jus­ti­fied the text may be de­sired, es­pe­cially in news­pa­per’s web­sites and blogs as the text in nearly every pa­per book, news­pa­per and other print me­dia is jus­ti­fied too. text-align: justify does just that, how­ever method to jus­tify a line is not flaw­less and to make jus­ti­fied text look bet­ter, words at the end of line should be broken as well (soft hy­phens should be in­jec­ted).

Now you can ig­nore all the silly web ty­po­graphy blogs’ re­com­mend­a­tions and in­stead of avoid­ing justify, hy­phen­ate your text and justify to your heart’s con­tent!

  1. Big pro­por­tion of people who ac­count be­ing Ger­man… be­cause of av­er­age word length in Ger­man↩︎

  2. Code point of soft hy­phen is U+00AD. In HTML it also can be used with ­ es­cape↩︎