Skip to content

Commit

Permalink
Update example explanatin and values
Browse files Browse the repository at this point in the history
  • Loading branch information
wbamberg committed Feb 12, 2024
1 parent f5fe0c8 commit ac5c399
Showing 1 changed file with 11 additions and 6 deletions.
17 changes: 11 additions & 6 deletions files/en-us/web/css/hyphenate-limit-chars/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,25 +102,30 @@ p {
}

#ex3 {
hyphenate-limit-chars: 13 9 3;
hyphenate-limit-chars: 5 9 2;
}

#ex4 {
hyphenate-limit-chars: 12 7 5;
hyphenate-limit-chars: 5 2 7;
}
```

#### Result

This example illustrates different constraints that `hyphenate-limit-chars` can apply to the browser's hyphenation algorithm.

We'll first show the default hyphenation applied by the browser, and then see the effect of constraining the default behavior using the `hyphenate-limit-chars` property.

{{EmbedLiveSample("Setting hyphenation limits", "", 200)}}

In the first box, we don't set `hyphenate-limit-chars`, allowing the user agent to apply its default algorithm.
In the first box, we don't set `hyphenate-limit-chars`, allowing the user agent to apply its default algorithm. This will use values of `5 2 2`, unless the browser can find better values.

In the second example, we specify `hyphenate-limit-chars: 14`, meaning that words must be at least 14 characters long before they are hyphenated. As a result, "juxtaposition" is no longer hyphenated, since it is only 13 characters long.
In the second box, we will prevent the browser hyphenating words unless they are at least 14 charcters long. We do this by setting `hyphenate-limit-chars: 14`. As a result, "juxtaposition" is no longer hyphenated, since it is only 13 characters long.

In the third example, we specify `hyphenate-limit-chars: 13 9 3`, so each hyphenated word must have at least 9 characters before the hyphen. The effect is that "acknowledgement" is now hyphenated as "acknowledge-ment" rather than "acknowl-edgement".
In the third box, we will make the browser include at least 9 characters before the hyphen. We do this by setting `hyphenate-limit-chars: 5 9 2`. The effect is that "acknowledgement" is now hyphenated as "acknowledge-ment" rather than "acknowl-edgement".

In the fourth example, we specify `hyphenate-limit-chars: 12 7 5`, so each hyphenated word must have at least 5 characters after the hyphen. The effect is that "juxtaposition" is hyphenated as "juxtapo-sition" rather than "juxtaposi-tion".
In the fourth box, we will make the browser include at least 7 characters after the hyphen. We do this by setting
In the fourth example, we specify `hyphenate-limit-chars: 5 2 7`. The effect is that "juxtaposition" is hyphenated as "juxta-position" rather than "juxtaposi-tion".

## Specifications

Expand Down

0 comments on commit ac5c399

Please sign in to comment.