(Note: this article was previously published in French in November 2013 –if you have any feedback on the translation made by Nicolas Hoffmann and Coralie Mercier, please let us know.)

Etymology

According to Wikipedia, hyphens come from:

The term derives from Ancient Greek ὑφ᾽ ἕν (hyph’ hén), contracted from ὑπό ἕν (hypó hén) "in one" (literally "under one").

The term ἡ ὑφέν (hyphén) was used for a caret-like (^) sign written below two consecutive letters to indicate that they belong to the same word (where it was necessary to avoid ambiguities in times before the space was used regularly).

Aside on Accessibility

Hyphenation is often associated with justified text (but not only). And justified text brings… accessibility issues.

Even if you might think that the hyphenation - used alone - can be a minor accessibility issue, it is not always the case. For example, a piece of word has no meaning for a dyslexic person: they must first find the beginning of the next line, read the other piece and rebuild the word. Depending on the complexity of the text and other factors such as readability, the problem can quickly grow in importance.

Let me be clear, there is not about banning the use of hyphenation. We need to find a good balance, these problems can be greatly reduced by being careful about the following points:

• sufficient text contrast;
• an harmonious line length, as Nicolas Torres indicated in Defining breakpoints;
• structured and airy layout (titles and subtitles, spacing, length and separation of paragraphs, density of the font chosen);
• and of course the absence of pollution of the visual field (who would do this?).

Thus, before studying this science, a little quote from Rabelais to sum up this warning: Science without conscience is but the ruin of the soul.

Hyphenation in the past

There is an HTML entity ­, named "soft hyphen". This character is not displayed unless a break is performed, in which case, a dash will logically appear. In a way, this character indicates where it is possible and desirable to carry out a break.

The tag wbr (for "Word Break Opportunity") can suggest where the browser can perform a break, but it won’t be materialized by a character. This tag was non-standard and has been implemented since Internet Explorer 5.5: I emphasised "was" because this tag has been integrated into the HTML5 specification.

To sum up, such hyphenation management is manual, so it is easy to guess for long texts the amount of work that this it requires. In other words, the management of hyphenation is rather laborious.

Without a server-side management system, other solutions exist like in JavaScript with Hyphenator. Again, depending on the complexity of managing hyphenation in different languages​​, this type of client-side management can have a significant cost on the rendering performance.

Hyphenation now

Fortunately, the hyphenation management is a lot simpler now. The hyphens property tells the browser that you allow text hyphenation. This property is part of the CSS3 Text module.

When this article was written, the module had been a Last Call Working Draft since 10 October 2013. In other words, the draft is somewhat stabilized.

Warning: even if this property is used, it is not a recommandation. Which means that this property is still experimental and as changes may still occur, you must prefix it as follows:

 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;

Throughout the article, we will only use the non-prefixed property.

hyphens: manual; allows to manage hyphenation manually. In other words, you will have to do it as in the previous paragraph: by using wbr and ­.

hyphens: none; will tell the browser to make no hyphenation at all, even if wbr and ­ have been used into the structure.

On the other hand, hyphens: auto; will tell the browser that it can manage hyphenation automatically. It will only apply it if hyphenation reference rules are defined in the document language. To do so, you must of course specify the attribute lang on the html tag.

The richest the rules, the more pertinent the hyphenation will be. Analogy: see these rules as a hyphenation dictionary, the richest and the most complete, the better the hyphenation.

Browsers have different levels of support for this property at the time I wrote this article:

• Internet Explorer supports it since its 9th version with the -ms prefix, and it has several language hyphenation dictionaries;
• Firefox too, with -moz prefix of course;
• WebKit-based browsers also support the hyphens property, prefixed by -webkit. For example, Safari supports it since version 5.1 in its desktop version, and since iOS 4.2 in its mobile version.

Aside: Chrome comes without any hyphenation dictionary, so it is unable to make hyphenation with this property. You may use the property word-break: break-word; if you want this browser to perform hyphenation. Warning, break-word is a proprietary value (non-standard). Unfortunately, it is the only one that seems to produce decent results for this property.

Update: The property word-wrap also exists, it allows to break too long words (and it works on Chrome), however there is not hyphenation (word is cut without a dash), and it is made brutally (anywhere in the word), so it should be used very carefully.

To sum up, a bullet-proof solution would look like this:

 word-break: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;

This property is a kind of progressive enhancement: it won’t bother browsers which don’t support it, and provides a pretty good solution for the others.

However, to be honest: this property isn’t perfectly rendered. By saying this, you should guess that a typography lover will see typographic crimes committed by this property. For example: consecutive lines should never end with a dash (effect called "ladder"), this makes text unpleasant and difficult to read.

The reason is simple: this is still too complex for browsers rendering engines.

In practice, a solution consists in making always available a class that allows you to cancel hyphenation if it has a bad rendering or if your customer is not satisfied with it.

.nocut {
  word-break: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

Aside: word-break: break-word; render is often hazardous on Chrome. Just test, and if you don’t like the result, forget this line and too bad for Chrome (if possible).

Nevertheless, some very interesting things are in preparation, let’s have a look.

Hyphenation, in the near future

Future specifications in CSS4 Text are at the moment in the most unstable of states! It’s more a collection of thoughts on the subject rather than a draft specification.

hyphenate-limit-lines limits the number of consecutive hyphenated lines, perfect to solve the "ladder" effect.

hyphenate-limit-chars can manage the minimum number of characters needed in the word to make a break, and the minimum number of characters before and after the dash. For example, with hyphenate-limit-chars: 6 3 2;: the first value (6) is the minimal number of characters needed for the word to be hyphenated, the second one is the minimal number of character before the dash (3), and the last one is the minimal number of characters after the dash (2).

hyphenate-limit-zone allows you to specify the area that each word must fill to qualify for a break, in order to reduce the "flag" effect, or at least its regularity.

hyphenate-limit-last manages the hyphenation on the last line: for example hyphenate-limit-last: always; tells the browser to make any hyphenation on the last line of each page, column or paragraph.

hyphenate-character allows to specify the character used for hyphenation.

To read more detail, you may have a look at the CSS4 Text draft module. The red square telling Not ready for implementation should convince you of the high instability of this module. :)

Surprisingly, it is Internet Explorer since its 10th version that best supports these properties: the first three properties are supported with a -ms prefix. Safari only supports hyphenate-limit-lines, with prefix of course (-webkit).

Other CSS properties like text-justify can influence hyphenation rendering, however, for obvious reasons of length, it is impossible to detail all of them here. If you are interested, you should have a look at the CSS3 Text module.

Conclusion

As always with the Web, the subject is constantly evolving, and as we have seen, we are moving towards better hyphenation.

In the current state, solutions exist to handle hyphenation, and it would be a shame to ignore them.

N.B: I would like to thank the OpenWeb group for their great help refining this article, including Monique Brunel and Gilles Chagnon, who prevented this article from desolation. Understand who may.

References, complements

• CSS3 Text Module
• CSS4 Text Module
• hyphens property on Mozilla Developer Network
• (in french) De la césure et du Web, sur Typographisme
• Hyphenator
• The wbr on Mozilla Developer Network
• (in french) Un contrôle plus fin des césures avec CSS4 Text, sur Creativ Juiz
• (in french) Gérer le débordement des contenus et la césure CSS