TIL: - does not equal ‐

Updates (28.01.2022):

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.

Screenshot of hyphenation in Chrome on macOS

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

SymbolSystem Font StackTimes
HYPHEN-MINUS--
HYPHEN
HYPHEN-MINUS with HTML Code - -
HYPHEN with HTML Code

Real life examples