CSS3 Text provides the ability to apply hyphenation to text, via the hyphens property. While this is all well and good, it doesn’t provide the fine grain control you may require to get professional results. For this, let me introduce to you CSS4 Text.
Applying bog standard hyphens
Many of you are probably aware of the hyphens property, and what it is used for. It has long been considered a bad practice to justify text on the Web due to the rivers it tends to leave between words. Hyphenation largely solves or reduces this problem. It is also easy to apply:
p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}Also, remember to set the language (using the lang or xml:lang attribute, so that the browser knows which hyphenation rules to use.
You can also use the manual value, which will hyphenate words only when you specify it, using the soft hyphen (­), or regular hyphen.
Browser support is mixed. Firefox, Internet Explorer 10, and Safari support hyphenation, while Chrome and Opera don’t. Chalk one up for the differences between WebKit browsers list.
Problems with hyphenation
While hyphenation reduces the rivers flowing through your text, they lead to a different issue. That of ladders. In typography, ladders are when more than two hyphens appear in a row at the end of a line. It becomes visually distracting, and makes the text harder to read. Especially when using short line lengths, such as with multi-column layout.
Applying more control with CSS4 Text
The CSS4 Text specification (warning: work in progress) provides a number of ways you can optimise how hyphens are applied. While they are no substitute for manually typesetting and hyphenating your text, it does provide you with much more fine grained control, and can improve the readability of your justified and hyphenated text.
Limiting the number of hyphens in a row using hyphenate-limit-lines
The hyphenate-limit-lines property allows you to specify the maximum number of lines in a row that a word will be hyphenated. The general rule of thumb is that two consecutive lines is the ideal maximum:
hyphenate-limit-lines: 2;This property is currently supported by IE10 and Safari, using the -ms- and -webkit- prefix respectively.
You can check out my hyphenate-limit-lines demo to see this in action. You will need to use one of the aforementioned browsers to see any difference between the two blocks of text. If you do not see three or more hyphens in a row for the first example, you can resize the width of the browser window. You should see that the second example never has more than two hyphens in a row.
Limiting the word length, and number of characters before and after the hyphen.
You usually don’t want shorter words to be hyphenated as it makes them harder to read. Similarly, you often don’t want too few characters left on a line before the hyphen or pushed to the next line after the hyphen. I don’t think there is a hard and fast rule for the ideal limits, and it is more based on what looks best for your content. I’ve seen a six character word limit, with three character minimum before the break, and two after, recommend. I’ve seen good results with this, but your milage may vary.
You can set these limits with the hyphenate-limit-chars property. It takes three space separated values. If all are set, the first is the minimum character limit for the word before hyphenation, the second is the minimum characters before the hyphenation break, and the last is the minimum characters after the hyphenation break. If the last value is missing, it is set to the same as the second. If only one value is supplied, the last two are set to auto. If the auto keyword is used (or implied), the user agent picks the best fit based on the current layout.
The following example sets a six character word limit, with three characters before the hyphenation break and two after:
hyphenate-limit-chars: 6 3 2;Support is currently limited to IE10 only, using the -ms- prefix.
You can see this in action in IE10 in my hyphenate-limit-chars example. Again, resize the width of the window to see how each example behaves differently. I have manually underlined the words in the second example that have the potential to be hyphenated (six characters or more). They will not always hyphenate, as it may not be possible to apply the hyphenation break in a position that will leave enough characters before or after the break.
Setting the hyphenation zone
When using hyphenation, there is a specific zone that a word needs to fall in at the end of a line before it is considered for hyphenation. With the hyphenate-limit-zone property, you can manually specify the width of this zone.
Whether or not a word falls into the boundary is calculated before justification is applied (i.e. as if text-align: left was applied when using left to right languages). If a word falls into the hyphenation zone, no hyphenation will be applied on that line. If the last word on the line falls outside the zone, the word on the next line is brought up to the current line and hyphenated (unless any other hyphenation limits prevent it from doing so).
The hyphenation zone is specified using a length value or a percentage. In the following example it is set to 40px:
hyphenate-limit-zone: 40px;Support is currently limited to IE10. Open the following hyphenate-limit-zone example in this browser to see it in action. I’ve hi-lighted where the zone would be in each example. In the first, third and fifth examples, no hyphenation zone is set, but it shows clearly which words would fall in or out of the zone before justification and hyphenation are applied.
Other, unsupported features
There are a couple of additional properties, that are not supported in any browsers currently.
The first is hyphenate-character. This accepts a string that specifies the character used to hyphenate. For example, the regular hyphen character (which is the default so doesn’t need specifying) can be set using:
hyphenate-character: "\2010";I’m not sure why you would want to set a character other than the default one used by the language in question, but I guess there could be some use case if you’re getting creative.
The other unsupported property is hyphenate-limit-last. This specifies if hyphenation is applied on the last line of an element, column, page, or spread. The none keyword applies no restriction, the always keyword does not apply hyphenation on the last line of all the aforementioned cases. The spread keyword doesn’t apply hyphenation to the last line before a spread break, page restricts this to spread breaks and page breaks, while the column keyword restricts it to spread, page and column breaks.
hyphenate-limit-last: column;Tying it all together
While each of the examples shown only use one of the hyphenate-limit-* properties, they can be combined to apply greater control. Unless you’re an hyphenation expert (I’m not), you can often get the bed results by experimenting with the various properties to suit you specific content. Different styling such as line lengths, justification, columns, word spacing, letter spacing, text size, etc. can have a big difference on how the text is hyphenated, and how much massaging you need to apply. Just remember not to go overboard with restricting hyphenation, or you’ll end up with the original problem you were using hyphenation to avoid; the large rivers of white space between words.