Silbentrennung

Mit dem Zeilenumbruch haben Internetseiten in englischer Sprache nicht so arge Probleme wie hierzulande unsere Webseiten auf Deutsch. Das ist vermutlich der Grund, warum das Thema der Silbentrennung auf HTML-Seiten viele Jahre lang stiefmütterlich behandelt wurde. Obwohl deutschsprachige Texte mit ihren zusammengesetzten Hauptwörtern längst eine Lösung verlangt hätten. Wörter wie „Datenschutzerklärung“, die auf jeder deutschen Website vorkommen, sorgen dafür, dass die Darstellung im Browser oft nicht sonderlich gut aussieht.

Verschärft wurde das Problem durch die schmalen Bildschirme von Smartphones. Immerhin kommen mittlerweile zwei Drittel aller Webseitenaufrufe von Smartphones. Hinzu kommt noch der Trend zu gewaltiger Schriftgröße, insbesondere bei Überschriften. Deshalb kommt es jetzt durchaus vor, dass Textzeilen schon auf halber Bildschirmbreite enden, wenn ein längeres Wort nicht mehr in die Restzeile passt und deshalb komplett in die nächste Zeile verschoben wird. Kritisch wird es dann, wenn ein Wort tatsächlich so lang ausfällt, dass es nicht einmal alleine ganz in eine Zeile passt. Solche Wörter brechen Browser dann völlig unvermittelt an irgendeiner Stelle um, ohne Trennstrich und ohne auf Silbentrennungsregeln zu achten.

Wer auf eine ansprechende Darstellung seiner Texte Wert legt, war lange Zeit ratlos. Doch mittlerweile gibt es Möglichkeiten, die Silbentrennung auch auf HTML-Seiten zu beeinflussen.

Manuelle Silbentrennung

Mit dem längst veralteten HTML-Tag <wbr /> sollte man nicht mehr versuchen, lange Wörter umzubrechen. Es gilt nämlich nicht mehr als sicher, dass moderne Browser das Element kennen und richtig interpretieren. Aber selbst wenn Wörter an den richtigen Stellen umgebrochen werden, wird dabei in der Regel am Zeilenende kein Trennstrich angezeigt.

Es gibt eine aktuelle Variante für sogenannte „Soft Hyphens“, die – in der HTML-Ansicht eines Beitrags, einer Seite, oder eines Absatzes – durch eine HTML-Entität innerhalb längerer Wörter eingebaut werden kann:

Sil­ben­tren­nung

­ – oder ­ – sorgen dafür, dass das Wort durch die Mehrzahl der existierenden Browser eben an diesen Stellen umgebrochen wird.

Silbentrennung nach Rechtschreibregeln erkauft man sich dabei allerdings mit gigantischem Aufwand. Denn um einen längeren Text mit Soft Hyphens zu versehen, müssen Hunderte oder Tausende von ­-Entitäten über die HTML-Ansicht im Word­Press-Editor an allen richtigen Stellen eingefügt werden. Eine wahre Sisyphusarbeit, und fehleranfällig noch dazu!

Aber für einzelne Wörter, besonders in Überschriften ist das durchaus eine Lösung, die man in Betracht ziehen kann.

Automatische Silbentrennung

Wer diesen Text auf einem schmalen Smartphonebildschirm liest, wird sich an dieser Stelle vermutlich fragen: Hat er tatsächlich alle Silbentrennstellen per ­ manuell eingefügt? – Antwort: Nein, hat er nicht.

Automatische Silbentrennung wurde 2011 in die Gestaltung mit Cascading Style Sheets (CSS) eingeführt und wird mittlerweile von der Mehrzahl der Browser unterstützt. Auf älteren Geräten und mit in die Jahre gekommenen Browsern schlägt die Automatik jedoch noch immer fehl: Silben werden dort nicht getrennt. (Tatsächlich bricht sogar die aktuelle Desk­top-Ver­sion des Opera-Browsers Silben nicht automatisch um.)

Wie aktiviere ich automatische Silbentrennung unter Word­Press?

Im Administratormenü der Word­Press-Installation findet man unter Design den Eintrag Customizer. Nach einem Mausklick kann man dann Zusätzliches CSS auswählen. Dort im Eingabefeld könnte man folgenden Eintrag vornehmen:

/* Silbentrennung: */
p, li, .entry-title {
	hyphens: auto;
}

Dieser Eintrag würde dafür sorgen, dass alle normalen Textabsätze (p, li) und Überschriften der Klasse .entry-title automatisch umgebrochen werden. Welche Textelemente man trennen lassen möchte, muss man sich gut überlegen.

/* Silbentrennung: */
body {
	hyphens: auto;
}

Dieser Eintrag würde jeglichen Text auf der Seite umbrechen. Bei manchen Überschriften sieht aber die automatische Trennung nicht besonders gut aus. Da hilft nur eines: Ausprobieren!

Einschränkungen

Die automatische Silbentrennung funktioniert zu einem hohen Prozentsatz gemäß den geltenden Rechtschreibregeln. In wenigen Fällen kommt es dabei jedoch zu Fehlern. Das muss man dann eben hinnehmen, oder die Worttrennung mit ­ manuell korrigieren. Grundvoraussetzung für eine korrekte Trennung ist allerdings die Angabe der richtigen Sprache im Kopfbereich der Webseite:

<html lang="de-DE">

Man sollte also prüfen, ob die eigene Word­Press-Installation aktuell ist und den Sprachhinweis beinhaltet. Sonst endet die Silbentrennung garantiert im Chaos.

Wissenswert ist außerdem, dass bestimmte Wörter nicht erkannt werden. Ein gutes Beispiel dafür ist der Begriff „Word­Press“, der auf diesen Webseiten geradezu inflationär gebraucht wird. Die automatische Silbentrennung berücksichtigt hier keinen möglichen Umbruch zwischen den Buchstaben d und P. Den muss man dann schon manuell mit Hilfe der Entität ­ einfügen, wenn man auch dieses Wort korrekt trennen lassen möchte.
Gleiches gilt leider auch für zusammengesetzte Wörter mit Bindestrich wie zum Beispiel „E-Maildadresse“. Solche Langworte werden automatisch nur am Bindestrich getrennt. Andere Trennstellen müssen in solchen Fällen tatsächlich mit ­ explizit angegeben werden: E-Mail­­adres­­se

Optimal für die Darstellung ist nach derzeitigem Stand der Technik eine Mischung aus automatischer und manueller Silbentrennung.

Spezialfall: Seitentitel

Den Seitentitel Deiner Internetpräsenz, also die Hauptüberschrift, kannst Du nicht mit ­ an den gewünschten Stellen umbrechen lassen. In den allgemeinen Einstellungen Deiner Word­Press-In­stal­la­tion wird dieser Seitentitel angegeben, dort werden HTML-En­ti­tä­ten wie das manuelle Trennelement nicht akzeptiert. Deshalb bleibt Dir dafür nur die Variante mit der automatischen Silbentrennung im Customizer:

/* Silbentrennung des Seitentitels: */
h1 {
	hyphens: auto;
}

Ob Dir die automatische Silbentrennung im Seitentitel optisch zusagt, musst Du selbst entscheiden. Als Alternative bleibt Dir nur die Möglichkeit, den Seitentitel überhaupt nicht als Text anzeigen zu lassen, sondern durch eine Grafik zu ersetzen. Die könnte den Seitentitel als Bild präsentieren und schlimmstenfalls so stauchen, dass die Grafik auf der Bildschirmbreite Platz findet. (Das kannst Du in den Einstellungen der meisten Themes arrangieren.)

---

Hinweis: Dieser Artikel ist größtenteils nicht Word­Press-spe­zi­fisch. Er gilt grundsätzlich – abgesehen vom letzten Textabschnitt „Spezialfall“ – für alle HTML-Code­sei­ten und dazu gehörige Stylesheets.