1. Technology

Hyphenation in CSS3

Fixing the Typography of Your Pages with CSS Hyphens


One of the ways that web page typography is not as evolved as printed typography is in how the rag is modified with hyphens. When you use a desktop publishing application or word processing program, it is possible to set specific rules about hyphenation including:

  • where to look for hyphen opportunities
  • how many syllables should be included before and/or after the hyphen
  • what dictionary to use for hyphenation

But until CSS3, the hyphenation situation on the web was dismal at best.

Pre-CSS3 Hyphenation Options

Before CSS3 came out, there were not a lot of options for hyphenation. The most commonly used option was to do nothing and let the browsers decide if hyphenation was necessary. But most browsers would simply leave out hyphens unless they were explicitly written into the text (-). You could also use the special “soft-hyphen” (­) character to indicate a place where a hyphen could appear if needed. The problem with the soft-hyphen was that some (now very old) browsers would display the soft-hyphen even when it wasn’t appropriate so web designers got out of the habit of using them. Finally, the last thing a designer could do was hard-code in the hyphens and break points with BR elements and hard hyphens, but this made the designs completely inflexible.

The other option that designers had before CSS3 was to programmatically set the hyphens. Scripts like Pyhyphen and Python-Hyphenator allow programmers to set up hyphenation support on pages if you can write the programs to use them. But you need to have access to a hyphenization dictionary, and these can be difficult to find.

JavaScript offers a few options for automated hyphenation such as Hyphenator.js and Hypher. But like the back-end scripts, you need to know how to write and read programs.

CSS3 to the Rescue

CSS3 introduces a new style property you can use to set hyphens in your documents:

  • hyphens—Controls whether hyphenation is allowed to create additional break opportunities within a line of text. There are three values: none for no hyphenation, manual for breaks that only appear at explicitly written break opportunities (with - or &shy), and auto to allow the browser to break words at appropriate hyphenation points determined either by explicit codes or from a language-appropriate resource.

There are also several hyphenation properties that have been moved to CSS4 (see CSS3 Text Recent Changes on the W3C for more information), but you can start testing them now if you want to:

  • hyphenate-character—Define the exact character you want to use for hyphenation. The default is a hyphen (-), but you can use any character you like by defining it here.
  • hyphenate-limit-zone—Define the width of the hyphenation zone at the end of the line. This can be a length or percentage.
  • hyphenate-limit-chars—Defines the minimum number of characters a word must have before it is hyphenated. It can take up to three values: length of the word, minimum number of characters before the hyphen, and minimum number of characters after the hyphen.
  • hyphenate-limit-lines—Defines the maximum number of lines that can be hyphenated in a row. The value can be either no-limit or a number.
  • hyphenate-limit-last—Defines how hyphenation should be handled at the end of an element (like a page, column, or spread). Values can be none, always, column, page, and spread.

There is also a hyphenate-resource (or @hyphenate-resource) property to define the dictionary to use for determining hyphenation rules. However, this has been removed from the W3C specification at present. You can use this to define a url(’’) location to a hyphenation dictionary.

Test Hyphenation

I have a page with four different hyphenation options set, so that you can see how it might work in the browsers that support hyphenation: Hyphenation Examples and Testing.

Don’t Forget to Use Browser Prefixes

All of these rules are still preliminary, so you should use browser prefixes to get the widest support.

W3C Firefox WebKit
Safari / Chrome
Opera Internet Explorer
hyphens -moz-hyphens -webkit-hyphens n/a -ms-hyphens
hyphenate-character n/a -webkit-hyphenate-character n/a n/a
hyphenate-limit-zone n/a n/a n/a -ms-hyphenate-limit-zone
hyphenate-limit-chars n/a n/a n/a -ms-hyphenate-limit-chars
hyphenate-limit-lines n/a -webkit-hyphenate-limit-lines n/a -ms-hyphenate-limit-lines
hyphenate-limit-last n/a n/a n/a n/a
n/a n/a n/a n/a
n/a n/a -webkit-hyphenate-charset n/a n/a
n/a n/a -webkit-hyphenate-limit-after n/a n/a
n/a n/a -webkit-hyphenate-limit-before n/a n/a

©2014 About.com. All rights reserved.