Better Paragraphs with CSS3 Hyphenation

By . Filed in Web Design

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.

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.

Author:

Thoriq has been dabbling in Web Design for 5 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.

Advertisement