Thursday, December 27, 2012

Enable Line-End Hyphenation in Your Web Pages?

Hunter Communications recommended reading from:

Link to article:
Exercise Better Web Typography with CSS Hyphens

Miss the old print days when long words were split at a syllable break and hyphenated at the end of a line?  If you are one of the few who do, a new implementation of CSS specs can enable exactly that across all the major browsers for your website pages.

Excerpt: "It’s true; while we were sleeping Firefox, IE 10 and Safari all implemented the CSS hyphenation spec. In fact, Firefox has had hyphenation support for over year (starting with version 6). Sadly, Chrome doesn’t support hyphens just yet, nor does Opera. Still, if you’d like to do something really simple that will vastly improve the readability of your text for Firefox, IE 10 and Safari users, add this to your site’s stylesheet:

1 p {
2 -webkit-hyphens: auto;
3 -moz-hyphens: auto;
4 -ms-hyphens: auto;
5 -o-hyphens: auto;
6 hyphens: auto;
7 }
Right now the -o- prefix isn’t doing anything, but it future-proofs the code a bit for when Opera adds support. The only catch to hyphenation is that not only does the browser need to support it, it also needs to have a hyphenation dictionary for the language you’re using. The Mozilla Developer Network has a good rundown of which browsers support which languages.

There’s no real need for a fallback since the web has never had any hyphenation. Browsers that don’t support the CSS hyphens rule will simply render the page as they always have, but those that do will now be a bit more readable."

No comments:

Post a Comment