Search code examples
htmlcsshyphenationcss-hyphens

CSS: hyphens: auto doesn't work for some words

Can anyone explain why the following snippet won't correctly hyphenate the word "Sustainability"? I tested this in Google Chrome, FireFox and Safari, none of them hyphenates the word, but all of them correctly hyphenate the word "hyphenated".

My observations so far:

  1. If the word is not capitalized, hyphenation starts working
  2. If I change the lang attribute from en to de (german), it also starts working, although the word is an english word

:root {
  font-size: 20px;
  font-family: system-ui;
  padding: 2rem;
}
body {
  margin: 0;
}
p {
  border: 1px solid;
  width: 100px;
  hyphens: auto;
}
<html lang="en">
  <body>
    <p>The word Sustainability can't be hyphenated, apparently</p>
    <p>Only if written without a capital "S", it starts working: sustainability 🤔</p>
  </body>
</html>

Solution

  • It's defined in the specs: https://www.w3.org/TR/css-text-3/#hyphenation

    "The UA may use language-tailored heuristics to exclude certain words from automatic hyphenation. For example, a UA might try to avoid hyphenation in proper nouns by excluding words matching certain capitalization and punctuation patterns. Such heuristics are not defined by this specification. (Note that such heuristics will need to vary by language: English and German, for example, have very different capitalization conventions.)"