Wer kennt sie nicht, die ärgerlichen Texte auf Websites, bei denen lange Wörter am Zeilenende scheinbar ins Leere laufen und dadurch die Lesbarkeit und Ästhetik des Textes beeinträchtigen?
Dies tritt vor allem oft in Überschriften auf, deren Schriftgröße beinahe unweigerlich dazu führt, ein Wort trennen zu müssen.
Dann trennen wir es also manuell, kein Thema, oder? Jetzt passt es mobil… doch die Trennung wird auch auf dem Laptop und dem Tablet sichtbar.
Ärgerlich! Denn hier ist es nicht nötig, das Wort zu trennen, der Bildschirm ist breit genug für das Wort in voller Länge. Der Text ist immer noch lesbar, das Wort korrekt getrennt, doch das Gesamtbild ist ein wenig in Mitleidenschaft gezogen worden.
Eine typographisch ansprechende Textgestaltung ist ein wichtiger Bestandteil einer hochwertigen Website. Vor allem im Hinblick auf die Optimierung für mobile Devices möchten wir sicherstellen, dass unsere Inhalte auf sämtlichen Bildschirmgrößen optimal dargestellt werden. Hierbei kann es schnell zu Schwierigkeiten kommen, insbesondere im Deutschen, da wir bekanntlich ein Faible für lange Wörter haben.
Doch keine Sorge, es gibt Lösungen! Wir zeigen euch, wie ihr die automatische Silbentrennung auf eurer Website nutzen könnt, um lange Wörter im Textfluss sauber zu trennen und eine optimale Lesbarkeit zu gewährleisten – und das ganz ohne in die Untiefen der Programmiersprachen eintauchen zu müssen!
Ein weicher Bindestrich, auch als diskreter Bindestrich bekannt, ist ein unsichtbares Zeichen, das in Wörter eingefügt werden kann, um mögliche Trennstellen zu kennzeichnen. Dadurch kann ein Wort zwischen zwei Silben getrennt werden, wenn es in die nächste Zeile übergeht oder besser in das Layout des Textes passt. Bei der Verwendung auf Websites erkennen die Browser diese weichen Bindestriche und teilen an dieser Stelle die Wörter, wenn sie nicht mehr auf die Zeile passen. Im Frontend ist das Zeichen für den Website-Besucher selbstverständlich nicht zu sehen!
Nehmen wir das Beispielwort
„Dreimillioneneinhundertneunundneunzigtausendfünfhundertsiebenunddreißig„.
Wenn dieses Wort am Ende einer Zeile nicht vollständig passt (streng genommen wird dieses Wort auf mobilen Geräten in einer lesbaren Textgröße niemals vollständig auf eine Zeile passen), wird der Text automatisch an den Stellen umgebrochen, die mit einem Soft-Hyphen markiert sind.
Den Soft-Hyphen ­ setzt du – ACHTUNG – im Texteditor, also nicht im visuellen Bereich.
Das sieht dann wie folgt aus:
Im Texteditor sieht das nun wie folgt aus:
Im visuellen Editor ist davon jedoch nichts zu sehen:
Alles was du jetzt noch tun musst, ist speichern und veröffentlichen. Vor allen auf mobilen Geräten wird dir nun auffallen, dass die Silbentrennung in Abhängigkeit von der Bildschirmbreite an unterschiedlichen Stellen erfolgt.
Hervorragend!
Jetzt wirst du sagen: Was für ein Aufwand! Natürlich ist das es mit etwas Arbeit verbunden, jedes lange Wort mit einem solchen bedingten Bindestrich für die automatische Silbentrennung zu versehen.
Deshalb haben wir hier für dich noch ein paar wichtige Tipps zusammengestellt:
AZOORA
eine Marke der MW-ITD GmbH
Arno-Nitzsche-Str. 45a
04277 Leipzig
Inhalte für 0€
Case Studies
