Web Design Tutorials and Tips

Hyphenation is usually needed when the width of the page or column is too narrow to accommodate the line. It allows paragraphs to align with proper spacing, and could also minimize the rivers from appearing, a result of breaking words apart.

To compare, let’s take a look at the following screenshot, note the spacing between the words.

We have been able to hyphenate paragraph in print media for so long but it was only recently that we are able to hyphenate paragraphs using a new CSS3 property called hyphens, albeit with lack of support from the browsers.

At the time of the writing, this new property, hyphens, is only supported in Internet Explorer 10, Firefox 6+, Safari 5.1+ with the prefix — surprisingly it has not yet been implemented in Chrome.

• View Demo

Usage

The hyphens property accepts two values auto and manual. The auto value will let the browsers hyphenate the paragraph automatically when it is appropriate.

p {  	text-align: justify;  	-webkit-hyphens: auto;     	-moz-hyphens: auto;  	hyphens: auto;  }

This gives us the following result.

Using the manual value, we as content authors need to specify manually how the word should break by inserting ­ notation (Soft Hyphen) in between the word.

HTML

<p>Lorem ipsum dolor sit amet, consect­etur adipisic­ing elit, sed do eius­mod tempor incididunt ut labore et dolore magna ali­qua [...]</p>

CSS

p {  	text-align: justify;  	-webkit-hyphens: manual;     	-moz-hyphens: manual;  	hyphens: manual;  }

Depending on the paragraph length, the result could be different.

Conclusions

If this feature is supported in all browsers, I’m sure that paragraphs on the Web would be better displayed. Until then, there is a good alternative of using a JavaScript library called Hyphenator that has better compatibility and also works in many languages.

• View Demo
• Download Source