Automatische Worttrennung online

Bedingter Trennstrich - Zur automatischen Silben­trennung auf deiner Website [Anleitung]

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!

Automatische Worttrennung online

Der einfache HTML-Befehl für die automatische Silben­trennung

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!

Ein diskreter Bindestrich, auch als weicher Bindestrich bezeichnet, ist ein unsichtbares Zeichen, das in Wörter eingefügt werden kann, um Trennungspunkte zu markieren. 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 Verwendung auf Websites erkennen Browser diese weichen Bindestriche und teilen die Wörter, falls sie nicht mehr in eine Zeile passen. Diese verbesserte Struktur gewährleistet eine optimale Darstellung des Textes.

Automatische Worttrennung online

Lange Wörter automatisch trennen -
Wie geht das nun genau...

Nehmen wir das Beispielwort

Drei­­­millionen­­­ein­­hundert­­­neun­­­und­­neunzig­­­tausend­­­fünf­­hundert­­­sieben­­und­­­dreiß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:

Drei­­­­millionen­­­­­ein­­hundert­­neun­­­und­­neunzig­­­­­tausend­­­­­fünf­­hundert­­­­­sieben­­und­­­dreißig.
An welchen Stellen du den Soft-Hyphen setzt, ist deine Entscheidung. Es ist nicht notwendig, einen Soft-Hyphen nach jeder einzelnen Silbe einzufügen. In der Praxis setzt man den Soft-Hyphen in der Regel nur an Stellen ein, an denen eine Trennung sinnvoll und verständlich ist. Es ist also ausreichend, den Soft-Hyphen an den Haupttrennstellen innerhalb des Wortes einzufügen, z.B. zwischen den einzelnen Zahlwörtern in unserem Beispiel: “Dreimillionen­einhundert­neunundneunzig­tausend­fünfhundert­siebenund­dreißig”. Auf diese Weise bleibt der Text flüssig lesbar, selbst wenn er aufgrund von Platzbeschränkungen umgebrochen werden muss.

Im Texteditor sieht das nun wie folgt aus:

Im visuellen Editor ist davon jedoch nichts zu sehen:

Automatische Worttrennung online-bedingter Bindestrich

Automatische Worttrennung online

Tipps für die Anwendung des bedingten Bindestrichs

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:

  1. Lege den Fokus auf die Überschriften. Durch die größere Schrift ist es hier oft am Nötigsten!
  2. Konzentriere dich auf die besonders langen Wörter. Nicht jedes Wort mit 3 oder 4 Silben oder mehr muss getrennt werden.
  3. Prüfe die mobile Ansicht auf deinem Telefon. Fallen dir hier noch unschöne Stellen auf, kannst du in diesen Abschnitten das eine odere andere Wort noch mit einem Soft-Hypen versehen.
  4. Beachte, dass es viele verschiedene Display-Größen gibt. Die Trennung erfolgt in Abhängigkeit von der Bildschirmbreite – anderes Telefon, anderer Textfluss.
  5. Nutzen vor Perfektion! Wenn du es darauf anlegst, dass es auf allen Bildschirmen perfekt ausschauen und jeder Text überall gleich verlaufen soll, wirst du nie fertig.

SEO-Tipps für 0 €

"Die wichtigsten Infos, um noch heute mit SEO starten zu können" downloaden.

Wir verwenden deine Daten gemäß unserer Datenschutzerklärung.

Anleitung für 0 €

Einreichung einer Sitemap und Überprüfung der Indexierung in der Google Search Console

Wir verwenden deine Daten gemäß unserer Datenschutzerklärung.