Aktualisiert am 23. Dezember 2022
Lesezeit ca. 8 Min.
Die Silbentrennung auf der eigenen Webseite erwies sich lange Zeit als sehr schwierig. Dadurch waren auch ansprechende Typografie nur mit sehr viel Aufwand zu realisieren. Mittlerweile gibt es verschiedene Möglichkeiten mittels HTML oder CSS die Silbentrennung auf deiner Webseite vorzunehmen. Wir zeigen dir in diesem Tutorial wie du mit HTML oder CSS deine Silbentrennung in den Griff bekommst.
Inhaltsverzeichnis
Methoden zur Silbentrennung auf deiner Webseite
Grundlegend gibt es verschieden Möglichkeiten die Silbentrennung auf deiner Webseite einzusetzen, jedoch hat jede Methode seine Vor- und Nachteile.
Zum einen gibt es verschiedene HTML-Befehle, um Umbrüche auf deiner Webseite zu generieren. Allerdings musst du diese manuell und an den richtigen Stellen im Text einfügen. Dafür funktionieren sie aber auch beispielsweise in der Leseansicht deines Browsers.
Zum anderen kannst du die Möglichkeit der Silbentrennung über CSS nutzen. Jedoch musst du hier vorher prüfen welche Browser die CSS-Befehle wirklich unterstützen.
Auch gibt es die Möglichkeit über JavaScript automatisierte Silbentrennung auf deiner Webseite einzusetzen. Wir empfehlen diese Methode jedoch weniger, da viele Scripte Probleme mit modernen Webfonts haben. Daher gehen wir in diesem Beitrag auch nur auf die HTML und CSS-Methoden ein.
Silbentrennung mit HTML
Wie bereits erwähnt besitzt HTML keine automatisierte Silbentrennung, sondern du musst diese manuell im Text einfügen. Dazu gibt es folgende Befehle, die du nutzen kannst:
(Word Break)
Das zu trennende Wort wird ohne Trennstrich umgebrochen, wenn nicht ausreichend Platz zur Verfügung steht.
Veranstaltungs<wbr>informationsdienst (Soft Hyphen)
Das zu trennende Wort wird mit Trennstrich umgebrochen, wenn nicht ausreichend Platz zur Verfügung steht.
Veranstaltungs­informationsdienst(Non Breaking Space)
Wenn ein Umbruch zwischen zwei Wörtern vermieden werden soll, muss ein geschütztes Leerzeichen eingefügt werden.
WordPress TutorialsSilbentrennung mit CSS
Um die automatisierte Silbentrennung mit CSS verwenden zu können, muss die Eigenschaft hyphens verwendet werden:
body{
hyphens: auto;
}
Damit die Silbentrennung auch wie gewünscht funktioniert, muss zwingend der HTML-Language Code korrekt auf der Webseite angegeben sein. Ansonsten wird nach einer anderen Sprache getrennt, was zu Trennungsfehlern führt und somit aus unserer Sicht schlimmer ist als gar keine Trennung.
Browser Support für hyphens
Welche Browser die Eigenschaft hyphens unterstützen kannst du der nachfolgenden Tabelle entnehmen:
Feedback & Ergänzungen
Wir hoffen dir hat unser Beitrag zum Thema „Wie kann ich Silben auf meiner Webseite trennen?“ geholfen. Weitere hilfreiche Beiträge findest du in unserer Rubrik Tipps & Tricks. Wenn du Anmerkungen, Verbesserungen oder konstruktive Kritik äußern möchtest hiterlasse uns gerne einen Kommentar.
Weitere Artikel
Hinterlasse einen Kommentar
An der Diskussion beteiligen?Hinterlasse uns deinen Kommentar!