Blog Kontakt

The problem of hyphenation

Dealing with long words like 'incomprehensibilities' or 'misunderstanding' can become a tough challenge in many languages. How does such a multi-liner fit into a first-class headline? And how does it look good on a smartphone?

The fact is that web browsers have a hard time breaking up long words. As a result, the current state of the art requires content managers to do this manually. Below is an explanation of how to solve the hyphenation problem.

Zu sehen ist eine Erklärgrafik für die ­-Silbentrennung.
When the browser scales down to smartphone size, it places the hyphen where the soft hyphen '­' was previously entered manually.

The solution for long words

­ is an HTML entity that stands for 'soft hyphen' or 'conditional hyphen'. It is used to separate text at a particular point in the word when the text does not fit on one line. The soft hyphen tells the browser that a hyphen is allowed at that point, but should only be used if absolutely necessary. Unlike the normal hyphen (-), which is a hard hyphen, the soft hyphen gives the browser more control over the word division scheme and makes the text easier to read.

The soft hyphen is also used in languages other than English. Here is an illustration of soft hyphenation in German language:

Zu sehen ist eine Erklärgrafik für die ­-Silbentrennung
The German word "Kraft­fahr­zeug­haft­pflicht­ver­si­che­rung" (Motor-vehicle-liability-insurance) becomes "Kraft­fahr­­zeug­­haft­­pflicht­­ver­­si­­che­­rung" in the backend. The browser now knows that it can insert hyphens in these places if necessary.

Clean code and always an open ear - that's what robole stands for as a web service provider from Leipzig. We take care of your web applications. Get in touch with us.

Interesse geweckt?

Alle Artikel anzeigen