Updates (28.01.2022):
- Bramus Van Damme actually wrote a much better post on this in December 2021 already.
- Chrome 98, to be released 1. Feb 2022 will fix this issue.
The Problem
The Unicode Standard gives us two characters to hyphenate words: - (HYPHEN-MINUS, Unicode: U+002D, UTF-8: 2D, HTML: -) and ‐ (HYPHEN Unicode: U+2010, UTF-8: E2 80 90, HTML: ‐). Probably, both will look exactly the same to you, but they do have different code points and, depending on your font, could look different.
The CSS Standards allows us to instruct the browser to (auto-)hyphenate words using the property hyphens: auto;. The browser will use the dictionary for the documents language (<html lang=de, for example) to insert hyphenate words at the right syllable.
At work, I recently had to deal with an issue reported by a customer: Hyphenation was not “visible” anymore, the browser was adding hyphenation, but not hyphenation character (‐). I was able to quickly isolate the issue to Chrome on macOS with specific fonts. On Safari and Firefox, everything looked okay, on the other hand, on my personal page, hyphenation worked fine on Chrome/macOS.
It seems to me, the font used at that website does not include the Hyphen (U+2010), that Chrome uses to hyphenate words, instead, it only seems to include HYPHEN-MINUS (U+002D). Why this issue is only visible on Chrome on macOS is a mystery to me.
Workaround
Using hyphenate-character: '*' we can set a custom hyphenation character, I now use it, to manually set “-”
Example
Text Source: https://de.wikipedia.org/wiki/Typografie
Text with auto hyphens
Der bei einem Leser bzw. Betrachter hervorgerufene Gesamteindruck des Schriftsatzes wird durch die obigen und weitere Faktoren bestimmt. Den subjektiven Gesamteindruck nennt man in der Fachsprache die Anmutung. Dabei wird durch die Gestaltung beim Leser auch ein emotionaler Eindruck erzeugt, was je nach Textsorte und Publikation sinnvoll sein kann und auch bewusst eingesetzt wird. In Massenmedien wie Tageszeitungen wird eher darauf geachtet, eine hohe Leserlichkeit auf Kosten einer – dabei auch nicht sachgerechten – emotionalen Wirkung der Gesamtgestaltung zu erzielen.[4]
Der bei einem Leser bzw. Betrachter hervorgerufene Gesamteindruck des Schriftsatzes wird durch die obigen und weitere Faktoren bestimmt. Den subjektiven Gesamteindruck nennt man in der Fachsprache die Anmutung. Dabei wird durch die Gestaltung beim Leser auch ein emotionaler Eindruck erzeugt, was je nach Textsorte und Publikation sinnvoll sein kann und auch bewusst eingesetzt wird. In Massenmedien wie Tageszeitungen wird eher darauf geachtet, eine hohe Leserlichkeit auf Kosten einer – dabei auch nicht sachgerechten – emotionalen Wirkung der Gesamtgestaltung zu erzielen.[4]
Der bei einem Leser bzw. Betrachter hervorgerufene Gesamteindruck des Schriftsatzes wird durch die obigen und weitere Faktoren bestimmt. Den subjektiven Gesamteindruck nennt man in der Fachsprache die Anmutung. Dabei wird durch die Gestaltung beim Leser auch ein emotionaler Eindruck erzeugt, was je nach Textsorte und Publikation sinnvoll sein kann und auch bewusst eingesetzt wird. In Massenmedien wie Tageszeitungen wird eher darauf geachtet, eine hohe Leserlichkeit auf Kosten einer – dabei auch nicht sachgerechten – emotionalen Wirkung der Gesamtgestaltung zu erzielen.[4]
Symbol Table
| Symbol | System Font Stack | Times |
|---|---|---|
| HYPHEN-MINUS | - | - |
| HYPHEN | ‐ | ‐ |
| HYPHEN-MINUS with HTML Code | - | - |
| HYPHEN with HTML Code | ‐ | ‐ |
Real life examples
- https://typefacts.com/artikel/binde-und-gedankenstrich
- https://www.sueddeutsche.de/politik/bauen-foerderprogramm-aerger-klimaschutz-1.5516842 (use dev tools to set dimensions to 390x844)