I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Classic Typography Effects: Hyphenation

css / typography

Estimated reading time: 2 minutes, 16 seconds

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.


Example of automatic hyphenation using the longest place name in the world (from New Zealand!) with the CSS3 hyphens and word-break properties

There are three methods to indicate that a word can be hyphenated on a web page:

  1. 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.

  2. 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.

  3. Apply the hyphens and word-break CSS3 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 { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -o-hyphens: auto; -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. (Oddly the current build of Chrome doesn't support CSS3 hyphenation: while it will break up words across lines, it will not insert hyphens. Yet Safari does, 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.