• All you need to know about hyphenation in CSS
  • Original article by Richard Rutter
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Horse monkey soju
  • Proofreader: L9m

Earlier this month I was invited to give an evening lecture at the Austrian Printing Institute (TGA) in Vienna. I’m honored to be able to give this talk, Because it means I’ll be following Matthew Carter, Wim Crouwel, Margaret Calvert, Erik Speakman Spiekermann and the late Freda Sack.

I presented some golden rules for Web typography, and later in the q&A I was asked about the current state of autohyphenation on the Web. It’s a pertinent question, since German is known for long words — especially common in noun compounds (Verbesserungsvorschlag, for example, means a suggestion for improvement) — and the use of hyphenation is widely used in most written media.

Automatic hyphenation on the Web has been possible since 2011 and is now widely supported. Auto hyphenation is supported in Safari, Firefox, and Internet Explorer 9 and above, as well as Chrome on Android and MacOS (but not yet on Windows or Linux).

How to enable auto hyphenation

There are two steps to turn on auto hyphenation. First, set the text language. This tells the browser which hyphenate dictionary to use — proper automatic hyphenation requires a hyphenate dictionary suitable for the text language. The CSS guide says that if the browser does not know the language of the text, even if it opens a hyphen in a stylesheet, it will not automatically hyphenate.

Hyphenation is a complex subject. Hyphenation points are mainly based on syllables combining etymology and phonology, but there are different hyphenation rules for specific institutions.

1. Set the language

The web language should be set using the LANG attribute of HTML.

<html lang="en">
Copy the code

Setting the text language benefits automatic translation tools, screen readers, and other assistive software, and is a best practice for all Web pages, whether or not hyphenation is used.

The lang=”en” attribute tells the browser that the text is in English by using an ISO language tag. In this case, the browser will choose its default English hyphenation dictionary, which means using American English hyphenation. While there are significant differences between American English and other countries in spelling and pronunciation (and therefore hyphenation), the differences can be even greater in languages such as Portuguese. The solution is to add a “zone” to the language so that the browser knows which is the most appropriate hyphenate dictionary. For example, to specify Brazilian Portuguese or British English:

<html lang="pt-BR">
<html lang="en-GB">
Copy the code

2. Enable hyphenation

So far, the language has been set up to enable automatic hyphenation in CSS. It couldn’t be simpler:

hyphens: auto;
Copy the code

Safari and IE/Edge currently require prefixes, so you need to add the corresponding prefix to the property:

-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
Copy the code

Hyphenation control

Setting hyphenation is more than just turning it on. CSS Text Module Level 4 introduces layout software (such as InDesign) and some Word processors (including Word). These controls provide different ways to define how much hyphenation occurs in the text.

Limit word length and number of characters before and after hyphenation

If you hyphenate short words, they will be harder to read. Also, you don’t want to leave too few characters on the line before the hyphen, or be moved to the next line after the hyphen. A common rule of thumb is to only allow words at least six letters long to be hyphenated, leaving at least three characters before the word breaks, and at least two characters on the next line.

The Oxford Style Manual recommends a minimum of three characters after a hyphen in a newline, though exceptions can be made for very short periods of time.

You can set these limits using the hyphenate-limit-chars property. It uses three Spaces to separate values. The first is the minimum character limit for the hyphen; Second, the minimum number of characters before a hyphen; Finally, the smallest character after a hyphen. To set the rule mentioned earlier to limit the word count to 6 characters, add 3 characters before and 2 characters after the break, use:

hyphenate-limit-chars3:6 2;Copy the code

Hyphenate-limit-chars implements the effect.

For all three Settings, the default for hyphenate-limit-chars is auto. This means that the browser should choose the best Settings based on the current language and layout. CSS Text Module Level 4 recommends that browsers use 5, 2, 2 as the starting point (which I think results in too many hyphenations), but the browser is free to change as it sees fit.

Currently, only IE/Edge supports this property (with a prefix), but Safari does support limiting the hyphen with some legacy properties specified in an earlier draft of the CSS3 Text Module. This means you can get the same controls in Both Edge and Safari (with some advance planning for Firefox), as shown below:

/* Legacy attributes */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;

/* * */ is recommended
-moz-hyphenate-limit-chars3:6 2;/* not yet supported */
-webkit-hyphenate-limit-chars3:6 2;/* not yet supported */
-ms-hyphenate-limit-chars3:6 2;hyphenate-limit-chars3:6 2;Copy the code

Limits the number of consecutive hyphen lines

For aesthetic reasons, you can limit the number of hyphenated lines in a line. Consecutive hyphenated lines, especially lines of three or more, are contemptuously called ladders. The general rule of thumb for English is that two consecutive lines is the ideal maximum (by contrast, German readers may face many ladders). By default, CSS does not limit the number of consecutive hyphens, but you can specify a maximum value using the hyphenate-limit-lines property. Currently, this is only supported by IE/Edge and Safari (with a prefix).

-ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
Copy the code

Hyphenate-limit-lines are used to prevent ladders.

You can use no-limit to remove limits.

Avoid using a hyphen on the last line of a paragraph

Unless you tell it to, the browser will happily hyphenate the last word of a paragraph, so that the hyphenated person will appear alone on the last line, lonely as an orphan. It’s usually better to have a big space at the end of the penultimate line than half a word on the last line. You can do this by activating the hyphenate-limit-last property with a value of always.

hyphenate-limit-last: always;
Copy the code

Currently, only IE/Edge (prefix) is supported.

Reduce the hyphen by setting the hyphen area

By default, hyphenate-limit-chars and hyphenate-limit-lines are often used as long as the browser can split a word into two lines within any set of hyphenate-limit-lines values. Even when these properties are applied to control when hyphenation occurs, a large number of hyphenated paragraphs can still occur. Even when these properties are applied to control when hyphenation occurs, a large number of hyphenated paragraphs can still occur.

Consider a left-aligned paragraph. The right side is uneven and the hyphen can be reduced. By default, all words that allow hyphenation are hyphenated. This will give you maximum hyphenation, thus minimizing debris. If you are prepared to tolerate uneven edges in paragraphs, you can reduce the number of hyphens.

You can do this by specifying the maximum amount of white space allowed between the last word of the line and the edge of the text box. If a new word starts in this space, it does not have a hyphen. This space is called a hyphen. The larger the hyphen area, the more broken, the less hyphenation. By tweaking the hyphen area, you can balance the ratio between better spacing and fewer hyphens.

Left: Arrows indicate lines that allow a hyphen. Right: hyphen and hyphen area Settings.

To do this, you can use the hyphenation-limit-zone property, which accepts a length or percentage value (depending on the width of the text box). In the context of responsive design, it makes sense to set the hyphen to a percentage. Doing so means smaller hyphens on smaller screens, resulting in more hyphens and less debris. Conversely, on a wider screen, you get a wider hyphen, so fewer hyphens and more debris, which is a wider measure that fits better. Based on the typical default for page layout software, 8% is a good place to start:

hyphenate-limit-zone: 8%
Copy the code

Currently, only IE/Edge (prefix) is supported.

Put them together

Use the CSS Text Module Level 4 attribute to apply the same hyphen control (at least line by line) to paragraphs as traditional layout software:

p {
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}
Copy the code

And the appropriate browser prefix and fallback:

p {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}
Copy the code

The hyphen is a perfect example of progressive enhancement, so if you’re building a website with long-word language content, start applying the above method now – support between browsers will only increase. If you’re designing a website that uses long words, like German, your readers will thank you.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.