Automatically breaking whole words at the ends of lines within syllable junctions is a very useful feature for web pages, especially when applied to narrow columns of fully justified text, content inside small table cells, or columns of text that may narrow due to being part of a responsive or fluid design. Hyphenation allows more text to fit on each line, saving screen real estate, and helps avoid the “rivers of white” optical phenomenon created by wide spaces between words.
There are three methods to indicate that a word can be hyphenated on a web page:
- Insert the “soft hyphen” HTML entity
­or­at the point between characters that may be broken. This could be considered “a hyphenation hint” – no hyphen should appear unless the entire word cannot fit on the end of a line, but if the portion before the hyphen can, the word will be broken, and a hyphen should shown by the browser. Unfortunately, support for soft hyphens is somewhat inconsistent, as of this writing. - Insert the
<wbr>tag as an alternative. The same idea as hyphen hinting, and boasting slightly better support, with the proviso that the browser does not insert a hyphen where the word is broken. - Apply the
hyphensandword-breakCSS properties.
In general, I’d recommend the last approach, rather than inserting individual hyphen hints. “Setting and forgetting” hyphenation for all paragraphs (on the assumption that that <p> elements have been used correctly, i.e. nothing marked up as paragraph content “just to get the content on a separate line”) is a good idea. The style declaration looks something like this:
p {
word-break: break-word;
-ms-word-break: break-all;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}The values for word-break are required for IE 8-9 and different versions of Chrome. (The current build of Chrome doesn't support CSS hyphenation, but it will break words across lines. Safari does support hypens, in both desktop and mobile versions.)
To achieve correct hyphenation, the page content should have a declared language, allowing the browser to reference a dictionary for appropriate word break positions. The easiest place to add this is in the opening <html> tag:
<html lang=en>To turn hyphenation off (for example, on a special class of paragraph that you do not want to be broken), set hyphens and word-break to none. Setting hyphens to manual will cause the browser to only break words where you have indicated with soft or hard hyphens.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/obxQwr
