Please be shy, oder:
Trennstriche im Web aktiv nutzen
Kategorie
Dieser kurze Exkurs in die Online-Typografie rettet so manches Schriftbild auf kleinen Bildschirmen. Lerne anhand eines einfachen Beispiels, wie sich der Wortumbruch einer langen Headline proaktiv steuern lässt. Und das inklusive Trennstrich, der auch nur dann erscheint, wenn er benötigt wird.
Der Soft-Hyphen und der optionale Wortumbruch
Wer kennt es nicht: lange Worte laufen je nach verwendetem Browser entweder über den rechten Rand hinaus, werden ohne Trennstrich — oder noch schlimmer — irgendwo im Wort umgebrochen.
Abhilfe verschafft hier der sog. "Soft-Hyphen" — ein "weicher Trennstrich". Dieser nennt sich so, da er standardmäßig nicht sichtbar ist und erst dann erscheint, wenn das Wort an dieser Stelle umbricht. Ich verwende auf meiner Seite recht große Überschriften. Für die Anzeige in der Seite nutze ich ein separates Eingabefeld, um bei langen Worten dann genau diesen Soft-Hyphen zu setzen.
Abb.: Ich verwende den Soft-Hyphen stets in Verbindung mit dem "optionalen Wortumbruch" <wbr>. So bricht das Wort definitiv an der Stelle des <wbr>-Tags um, und der Soft-Hyphen erscheint.
Ein Beispiel
Eines der längsten Wörter im deutschen Duden lautet:
Grundstücksverkehrsgenehmigungszuständigkeitsübertragungsverordnung
Dieses Wort läuft nun höchstwahrscheinlich über den rechten Rand hinaus, sei es über den Bildrand oder über die Breite dieser Spalte.
Weist man nun einfach nur per CSS einen "word-break" hinzu, ...
/* CSS für automatischen Wortumbruch: */
h3 { word-break: break-all; }
... passiert dies:
Grundstücksverkehrsgenehmigungszuständigkeitsübertragungsverordnung
Das Wort wird ohne Rücksicht auf Silben an Ort und Stelle umgebrochen, je nach Browser auch ohne Trennstrich. Dieses Verhalten sieht man selbst in der Tagesschau Handy-App (Stand April 2023).
Das ist höchst unschön, und daher setzen wir nach diversen Silben sowohl Soft-Hyphen als auch den optionalen Wortumbruch:
Abb.: Das (Un-)Wort mit dem Softhyphen gesetzt nach diversen Silben für einen möglichst flexiblen Umbruch.
Und hier ist das Ergebnis.
Wenn Du den Browser kleiner ziehst, sollte nun das Wort stets an der geeigneten Stelle am Ende einer Silbe inkl. sichtbarem Trennstrich umbrechen.
Grundstücksverkehrsgenehmigungszuständigkeitsübertragungsverordnung
Gib mir Deinen Senf dazu
Kommentare sind für diesen Eintrag derzeit nicht aktiviert.
Kommentare zu diesem Beitrag