Main Menu

Better Paragraphs with CSS3 Hyphenation

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.

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.