Recently, I was invited to give an evening lecture at the Printing House of Austria . It was a great honor for me to follow in the footsteps of such luminaries as Matthew Carter, Wim Crowell, Margaret Calvert, Eric Shpikerman and the late Freda Sack.

I talked about some of the golden typography rules on the Internet, and then during the QA section I was asked about the current situation with automatic hyphens on the web. This is a good question, especially since the German language is famous for its frequently used long nouns (for example, Verbesserungsvorschlag means "suggestion for improvement"), therefore hyphenation is widely used in most written carriers.

Automatic hyphenation appeared on the web in 2011and are now widely supported . Safari, Firefox, and Internet Explorer 9 support them on all platforms, and Chrome on Android and MacOS ( not yet on Windows or Linux ).

How to enable automatic transfers

Automatic transfers start in two steps. The first is to set the language for the text. This tells the browser which dictionary to use . Correct hyphenation requires a hyphenation dictionary that matches the language of the text. If the browser does not know the language of the text, then the CSS recommendations tell you not to activate hyphens, even if they are included in the stylesheet.

Transfers are a complex topic. Transfer points are usually based on syllables that use a combination of etymology and phonology, but there are other rules for dividing words.

1. Language setting

The webpage language is set using the HTML attribute lang:

This is the best way to set the language for all web pages, whether hyphens are included there or not. Installing a language will help automatic translation tools, screen readers, and other supporting programs.

Attribute lang="en"Applies ISO Language Tagtelling the browser that the text is in English. In this case, the browser will select the default English hyphenation dictionary, which usually corresponds to hyphenation in American English. Although American and British English differ markedly in spelling and pronunciation (and therefore hyphenation), the difference is not as significant as between the Portuguese variants. The problem is solved by adding a "region" so that the browser knows which version of English is most suitable as a hyphenation dictionary. For example, to specify Brazilian Portuguese or British English:

2. Enabling hyphenation

After installing the language, you can enable automatic hyphenation in CSS. It is extremely simple:

hyphens: auto;

Safari and IE / Edge currently require prefixes, so you should write this right now:

-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;

Hyphenation management

But just turning a function into CSS is not enough. The CSS Text Module Level 4 specifications have the ability to manage hyphens, as in typesetting programs (for example, InDesign) and some text editors (including Word). These controls allow you to set the number of hyphens in the text in different ways.

Limit word length and number of characters before and after hyphenation

If you carry short words, they are harder to read. Similarly, you do not want to tear a small piece from the word. The generally accepted rule of thumb is to carry only words with a length of at least six letters, leaving at least three characters before the hyphenation and at least two on the next line.

The Oxford Style Guide recommends a minimum of three letters after hyphenation, although rare exceptions are acceptable.

These restrictions are set using the property hyphenate-limit-chars. It takes three values, separated by spaces. This is the minimum character limit for the entire word, the minimum number of characters before and after hyphenation. To comply with the above rule of thumb, indicate 6, 3 and 2, respectively:

hyphenate-limit-chars: 6 3 2;

hyphenate-limit-chars in action

By default, all three parameters are set to auto. This means that the browser will select the best settings based on the current language and layout. CSS Text Module Level 4 is supposed to be used as a starting point 5 2 2(in my opinion, this leads to unnecessary hyphenation), but browsers can change the parameters at their discretion.

Currently, this property only supports IE / Edge (with a prefix), and Safari limits the number of characters through an obsolete property from the previous CSS3 Text Module draft. This means that you can achieve the same effect in Edge and Safari (with advanced planning for Firefox) with this code:

/* legacy properties */
-webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2;
/* current proposal */
-moz-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-webkit-hyphenate-limit-chars: 6 3 2; /* not yet supported */
-ms-hyphenate-limit-chars: 6 3 2;
hyphenate-limit-chars: 6 3 2;

Consecutive hyphenation limit

For aesthetic reasons, you can limit the number of lines in a row with hyphens. The successive hyphens (three or more) are derogatoryly called the ladder . The general rule of thumb for the English language is that two lines in a row is an ideal maximum (although longer stairs in German). By default, CSS does not limit the number of consecutive hyphens, but you can set the maximum number of hyphens in a property hyphenate-limit-lines. Currently, this is only supported by IE / Edge and Safari (with prefixes).

-ms-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;

The hyphenate-limit-lines property prevents the ladder.

You can remove the restriction with no-limit.

Prohibition of hyphenation in the last line of a paragraph

By default, the browser calmly transfers the last word of the paragraph, so that the end of the word sits on the last line, like a lonely orphan. Often, a large space at the end of the penultimate line is preferable than a half-word in the last line. This is set by a property hyphenate-limit-lastwith a value always.

hyphenate-limit-last: always;

Currently, the property is only supported in IE / Edge (prefixed).

Reduce hyphens by setting a transfer zone

By default, the transfer occurs as often as possible, within the established values ​​of hyphenate-limit-charsand hyphenate-limit-lines. But even with these restrictions, paragraphs can be over-saturated with hyphens.

Consider a paragraph aligned to the left. The right edge is uneven, which is partially corrected by transfers. By default, all words that are allowed to be wrapped will be wrapped, which ensures maximum alignment of the right edge. If you are willing to put up with a slight misalignment, you can reduce the number of hyphens.

To do this, specify the maximum allowable number of spaces between the last word of the line and the edge of the text field. If a new word begins in this space, it is not transferred. This space is known as the transfer zone.. The larger the transfer zone, the greater the unevenness and the fewer transfers. By adjusting the zone, you are looking for the optimal ratio between the number of hyphens and the filling line.


Left: arrows indicate lines where hyphenation is allowed. Right: Transfer with the specified transfer zone.

To do this, use the propertyhyphenation-limit-zone, where the size is specified in pixels or percent (relative to the width of the text field). In the context of adaptive design, it makes sense to set the transfer zone as a percentage. This means that the transfer area will become smaller on smaller screens, which will cause more hyphenation and fewer blank lines. Conversely, on wider screens, the transfer area will expand, therefore, there will be fewer hyphenations and more dangling lines, which are not so critical on wide screens. Based on the typical values ​​in layout programs, you can start with 8%.

hyphenate-limit-zone: 8%

Currently only supported in IE / Edge (prefixed).

Together

Using the properties of the CSS Text Module Level 4, set the paragraph to the same hyphenation control parameters as in regular typesetting programs:

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

With the appropriate prefixes and rollbacks, the code looks like this:

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%;
}

Transfer is the perfect example of progressive improvement. These properties can be activated now if you think readers will benefit from this. Browser support will gradually increase. If you develop a site in a language with long words, like German, readers will definitely be grateful.