Inspired by a recent article at Webmonkey, I’ve now added hyphenation support to this site, along with justified body text. What follows is a bit about what CSS Hyphenation is, why it’s nice to have, and how to implement it yourself.

CSS Hyphenation

Hyphenation works to decrease excessive white space in the lines of narrowly justified text. The CSS3 working draft offers two properties that affect hyphenation: hyphens and word-wrap.

The hyphens property is fairly self-explanatory, and includes a manual setting that lets you hand-specify "soft hyphens" using the Unicode character U+00AD. The word-wrap property lets your browser decide to break a long string that normally wouldn't fit, at an arbitrary point if necessary.

Right now it looks like Firefox, IE 10 and Safari (including iOS) support the hyphenation spec. Chrome claims to support it in version 24 beta, but it hasn’t been working for me.

The good news is that unsupported browsers fall back to non-hyphenated text. The bad news is that you’ll probably still be stuck with justified text unless you do some browser sniffing.

One important caveat (pointed out by Peter-Paul Koch at QuirksMode) is that you’ll have to explicitly declare your language, so the browser knows what break dictionary to use. This is done in the html tag like so:

<html lang="en">

Why Bother

You probably shouldn’t.

Hyphenation is a holdover from print typesetting, where it was used to prevent rivers of white space in narrow, tightly packed columns of justified text. It’s still useful anytime you’re using text in columns, especially with grid-type layouts, but I wouldn’t say it’s strictly required for anything on the web.

My grid-heavy site lends itself to a throwback-style of typography (or at least I think it does) so I’m going to give it a shot for a while and see how it feels a few months from now.

Implementation

The bare CSS to support hyphenation looks like this:

p { 
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
}

The Opera prefix doesn’t do anything right now, but it’s there in case it’s needed later. As always, Compass offers a handy mixin to do it all in an abbreviated manner (although without -ms or -o support)

First you’ve got to import the plugin:

@import "compass/css3/hyphenation"

Then you apply the mixin to your element:

p {
	@include hyphens(auto);
}

That generates:

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

Even though I use Compass on my site I’m still doing it manually to ensure the -ms and -o tags get in there.

References

Posted on December 5, 2012 at 12:00AM