Hyphen and hyphenation
The hyphen is a punctuation mark used to join words and to separate syllables of a single word. The use of hyphens is called hyphenation. A common use case of hyphenation – to break a word so it continues on another line rather than move the whole word to the next line – might be preferable in web pages for the same reasons it is used in the print media.
What is being done today
Nowadays designers and people who produce HTML rarely account1 for long words and design breakage those words might cause, thus once in a while people spot a web page with design broken in unimaginable ways. The most common
solutions dirty hacks to dealing with such breakage include
- Trimming the text to constant amount of characters and appending a horizontal ellipsis;
- Inserting line breaks every constant amount of characters.
The first solution might be very well acceptable where you have well defined space restrictions. For example you need to fit a title or heading into exactly one line, which might be or might not be too short to accommodate the whole text. While the hack is acceptable for mentioned case it certainly is not for dealing with the words in a block of text as reading and comprehending content becomes more difficult.
The second solution is acceptable when a fixed-width font is used and all lines are equal in length. In all other cases the text gets split into seemingly unrelated, senseless lines and the reader in order to comprehend the text has to understand the unusual splitting method first.
The solution – hyphenation
Hyphenation, on the other hand, follows well understood and defined rules of splitting word into parts and does not loose any information like trimming does. In addition the text becomes more balanced regardless of text alignment used, which contributes to the ease of reading.
Hyphenation in HTML
hyphens CSS property the only way to make browser hyphenate words was to inject soft hyphens2 into the word where hyphenation is allowed. At the time of writing
Justify all the things
Justified the text may be desired, especially in newspaper’s websites and blogs as the text in nearly every paper book, newspaper and other print media is justified too.
text-align: justify does just that, however method to justify a line is not flawless and to make justified text look better, words at the end of line should be broken as well (soft hyphens should be injected).
Now you can ignore all the silly web typography blogs’ recommendations and instead of avoiding
justify, hyphenate your text and
justify to your heart’s content!