Hyphenation arrives in Firefox and Safari

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now. Yesterday’s release of Firefox 6 and last month’s release of Safari 5.1 on OS X Lion mean that two browsers now support CSS 3 hyphenation.

Turning on hyphenation is easy. Just add this rule to your stylesheet:

p { hyphens:auto; }

Well, almost. In reality Firefox and Safari still only support vendor prefixes of the hyphens property (which is fair enough as the spec is still a working draft) so the code you’ll actually need is this:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

To turn hyphenation off, replace the auto value with manual. This will ensure that automatic hyphenation is turned off, but manually inserted soft hyphens (the ­ entity) are still respected.

Why Hyphenation?

Hyphenation has been in use since Gutenberg’s invention of moveable type nearly five hundred years ago. It has two main uses: saving paper, and improving justification and evenness of typographic colour.

By virtue of enabling more words to fit on a page, hyphenation means less paper need be used. Paper is generally not an issue with the web, but screen real estate certainly is.

Justified text (where words line up on both the left and right margins) generally looks terrible on the web because ‘rivers’ of white are introduced through the text as words are spaced apart to make lines touch both margins. These rivers make reading harder as the eye is drawn down them instead of along the line of text. If justification is not applied then lines of text can still appear overly ‘ragged’ at their ends. This tends to prohibit use of narrow measures (short lines). Hyphenation helps alleviate both these issues.

An Examples Paragraph with Long Words

This is text is not for reading. It features an unusual preponderance of lengthy words to increase the probability of hyphenation. Enormous elephants perambulating amiably. Mississippi alligators organising confrontations. Overbearing hippopotamuses swimming languidly. Precocious octopuses constructing dodecahedra. Disastrous rhinoceroses exacerbating situations.

Tagged: CSS 3, hyphens, hyphenation, .


Fontdeck is the professional webfonts solution. Preview fonts on your website for free and only pay for the fonts you need. This is our official blog.

Search archives

Fontdeck Newsletter

Sign-up for the Fontdeck newsletter to be the first to hear about special offers, new fonts and other type happenings.

Featured Updates

Follow Fontdeck on Twitter »