1

Automatische Silbentrennung auf Website (HTML, CSS, Plugin)

Bei der Erstellung von Webseiten mit WordPress kommt es oft vor, dass lange Wörter nicht korrekt dargestellt werden. Abhilfe schafft eine automatische Silbentrennung. Diese langen Wörter ragen oft über den Rand hinaus, obwohl es auf Desktop-Clients korrekt dargestellt wird. WordPress selbst kann keine Silbentrennung, Abhilfe schaffen aber HTML-Tags, CSS, JavaScript oder auch WordPress Templates.

Natürlich könnte man auch die Schriftgröße verringern, aber manchen Wörter werden dann zu klein oder passen nicht zum Design der Website. Aber wie oben schon genannt gibt es verschiedene Möglichkeiten zur automatischen Silbentrennung auf einer Website.

Automatische Silbentrennung

Wie oben schon erwähnt, gibt es verschiedene Möglichkeiten zur Silbentrennung auf Websites.

• CSS
• HTML-Tags
• JavaScript
• WordPress Plugins

Hat man sehr wenig Inhalt oder Überschriften ist das Verwenden von HTML Tags zur automatischen Trennung der Wörter am einfachsten. Möchte man die Silben einer ganzen Seite automatisch trennen, so verwendet man am Besten CSS.

CSS

Die automatische Silbentrennung mit CSS ist die wohl verbreitetste Lösung. Wenn diese ein mal korrekt definiert ist, funktioniert die Trennung der Wörter auf der kompletten Website. Diese Funktion in CSS ist aber neu, daher kann es passieren, dass ältere Browser diese Funktion noch nicht unterstützen. Mit der CSS Eigenschaft hyphens kann man eine Silbentrennung erzwingen. Als CSS Editor kann man auch VS Code verwenden.

Mit folgendem CSS Code, werden alle Überschriften mit H-Tags automatisch getrennt:

/* Silbentrennung Ueberschriften*/
h1, h2, h3, h4, h5, h6 {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

Aber natürlich kann man auch den kompletten Body einer Seite anfassen. Hierzu ändert man lediglich eine Kleinigkeit im CSS Code. Das sollte aber auch mit wenig Kenntnissen machbar sein:

/* Silbentrennung Body*/
body {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
}

HTML-Tags

Möchte man keine automatische Silbentrennung verwenden, sondern stattdessen Wörter manuell trennen, so ist die Verwendung von HTML-Tags sinnvoll. Diese Tags setzt man an die Stelle im Wort, wo es getrennt werden soll. Getrennt wird das Wort aber nur, wenn nicht genug Platz auf der Website ist. Es gibt aber verschiedene Tags.

­­Soft Hyphen
Mit dem Tag erzwingt man eine Trennung des Wortes an der Stelle, an der der Tag eingesetzt wurde. Dort mit mit einem Trennstrich getrennt.

Eisstock­­­­bahn

Word Break
Steht nicht genug Platz für das Wort zur Verfügung, so wird das Wort getrennt, aber OHNE Trennstrich.

Eisstock<wbr>bahn

JavaScript

JavaScript ist inzwischen sehr mächtig und beherrscht daher auch eine automatische Silbentrennung. Um das zu realisieren kann man beispielsweise die freie Bibliothek Hyphenator verwenden, welche auf GIThub bereit gestellt wird. Die JS Bibliothek setzt die HTML Tags automatisch an der richtigen Stelle.

WordPress Plugin

Wer seine Websites mit WordPress erstellt, der kann fertige WordPress Plugins für die automatische Silbentrennung verwenden. Eins der Bekanntesten Plugins zum Trennen von Wörtern ist Typography, welches über 70 Sprachen unterstützt. Der Vorteil bei einem Plugin ist auf jeden Fall, dass keine Kenntnisse in CSS oder HTML benötigt werden.