Die Zeichenfolge ­ – auch Soft Hyphen oder bedingter Trennstrich genannt – wird in HTML verwendet, um dem Browser mitzuteilen, dass ein Wort an einer bestimmten Stelle getrennt werden soll, falls es für das Layout erforderlich ist. Das Zeichen wird durch die Zeichenfolge ­ eingegeben. Im Gegensatz zu einem normalen Trennstrich (Hyphen), der immer sichtbar ist, wird der Soft Hyphen nur dann angezeigt, wenn das Wort an dieser Stelle tatsächlich umgebrochen wird.
Anwendung von im Webdesign:
- Bessere Lesbarkeit: Das ­ Zeichen ermöglicht die saubere Trennung langer Wörter, insbesondere auf kleineren Bildschirmen oder in schmalen Layouts. Dadurch bleibt der Text gut lesbar, ohne das Layout zu verschieben oder lange Wörter über den Rand hinaus laufen zu lassen.
- Responsive Design: In responsiven Designs, bei denen sich die Bildschirmgröße an verschiedene Geräte anpasst, kann dafür sorgen, dass lange Wörter wie Produktnamen oder Fachbegriffe nicht das Layout verzerren, indem sie in kleinere Abschnitte unterteilt werden, wenn nötig.
- Vermeidung von Layout-Problemen: Bei der Entwicklung von WordPress-Websites oder WooCommerce-Shops kann dazu beitragen, dass das Layout, insbesondere bei Textblöcken, stabil bleibt und unschöne Zeilenumbrüche vermieden werden.
Beispiel
Ein langes Wort wie Entwicklungs­arbeit wird nur dann an der ­-Position getrennt, wenn es notwendig ist.
In diesem Beispiel würde das Wort “Entwicklungsarbeit” an der Stelle getrennt werden, wo “­” eingefügt wurde, aber nur dann, wenn der Zeilenumbruch es erfordert.
Tipps zu Anwendung:
- Nach unserer Erfahrung entfernt WordPress das Zeichen optisch oft aus Texten, so dass man nach dem Speichern eines Textes nicht mehr sieht, wo das Zeichen eingefügt wurde. Ein Workaround ist die Verwendung der Zeichenfolge ­
- Zudem muss per CSS die automatische Silbentrennung für die entsprechende Text-Klasse aktiv sein
So nutzen wir bei PERIMETRIK® ­
Bei PERIMETRIK® nutzen wir ­ um die Lesbarkeit und das Layout der von uns entwickelten Websites zu optimieren. Insbesondere in besonderen Textelementen wie Beschriftungen auf Bildern in responsiven Designs setzen wir ­ ein, um die lesbarkeit und Ästhetik von Texten zu verbessern.