@charak
terziffer

Silbentrennung im Browser

In gedruckten Büchern ist es völlig normal, Wörter falls angebracht am Zeilenende zu trennen. Auf Internetseiten ist das noch eher die Ausnahme. Dabei hätte Silbentrennung auch online ihre Vorteile: Sie ermöglicht einen ruhigeren Zeilenfall (bei linksbündigem Text) oder eine gleichmäßigere Textverteilung (im Blocksatz).

Besonders in schmalen Textspalten ist Silbentrennung oft unverzichtbar. Hier gibt es sehr häufige Zeilenwechsel und ein unruhig flatternder Text würde das Lesen stark erschweren. In deutschsprachigen Texten gibt es teilweise lange Wörter, die ohne Trennung große Lücken in den Text reißen können.

Technisch spricht heutzutage übrigens nichts mehr dagegen, Silbentrennung auf Websites anzuwenden. Sie erschwert weder das Kopieren von Texten (hier tauchen keine Trennstriche auf) noch verhindert sie die Suche nach Begriffen (Trennstriche werden ignoriert). Und in Browsern, die Silbentrennung nicht unterstützen, bleibt es einfach bei ungetrenntem Text.

Umsetzung mit Javascript

Hier in meinem Blog nutze ich das JavaScript-Programm Hyphenator.js. Man definiert dazu zunächst die Sprache der Website: <html lang="de">

Alle Elemente, die von der Silbentrennung erfasst werden sollen, stattet man in der HTML-Datei mit der Klasse .hyphenate aus (beispielsweise <body class="hyphenate">, Kind-Elemente werden automatisch mitverarbeitet). Elemente, die nicht getrennt werden sollen (z. B. Überschriften), bekommen die Klasse .donthyphenate.

Mit Hilfe der Seite merge+pack (engl.) stellt man sich jetzt sein gewünschtes Hyphenator-Skript zusammen. Man wählt unter anderem die benötigten Sprachmuster aus und ob Trennstriche beim Kopieren entfernt werden sollen. Meine eigene Hyphenator-Datei für deutsche Texte hat knapp 100 kB (eine zusätzliche Datei dieser Größe könnte ein Nachteil sein, Ladezeit!). Die js-Datei bindet man nun am Ende seiner HTML-Seite ein (vor dem </body>):

<script src="http://deine-adresse.de/PFAD/hyphenator.js" type="text/javascript"></script>

Alternative: Die CSS-Eigenschaft „hyphens“

Einfacher funktioniert die Silbentrennung mit CSS. Auch hier legt man zunächste die Sprache der Website fest. Dann öffnet man seine CSS-Datei und gibt den zu trennenden Elementen (z. B. allen p-Absätze) die Eigenschaft:

-ms-hyphens: auto; -webkit-hyphens: auto;
-moz-hyphens: auto; hyphens: auto;

Laut caniuse.com wird die CSS-Eigenschaft hyphens leider bisher nur von Firefox (≥ 26), dem Internet Explorer (≥ 10) und Safari (≥ 7.0) unterstützt (jeweils mit Prefix) – also nicht von Chrome, Opera oder dem mobilen Android-Browser. Deswegen nutze ich hier auch noch die Javascript-Lösung.

Was nicht funktioniert

mmmiii Türklinke Übungen wörtlich künftige öffentlich Überschriften überempfindlich

Natürlich kann man die Silbentrennung auf Webseiten bei weitem (noch) nicht so genau steuern wie in Printprodukten. Zum Beispiel kann man nicht festlegen, wie viele Trennungen am Zeilenende aufeinander folgen dürfen. Es ist auch sehr aufwendig, genaue Trennstellen zu definieren – so kann es zu unschönen Trennungen kommen wie Spargel-der oder Urin-sekten.

Und manchmal sind in bestimmten Browservarianten auch die falschen Trennmuster verlinkt. So erzeugt mein Firefox (Version 28, canonical 1.0), der bei meinem Betriebssystem Ubuntu 12.04 der Standard-Browser ist, im Beispiel links lauter falsche Trennungen. Habe dazu einen Fehlerbericht auf Launchpad eingereicht, aber bislang bin ich wohl der einzige, dem der Bug aufgefallen ist.

Dennoch: Ich würde empfehlen, die Silbentrennung zu aktivieren. Die Wahrscheinlichkeit für störende Fehler ist in der Regel geringer als der Nutzen eines gut lesbaren Textflusses.

UP­DATE: Eine wei­te­re (und tod­si­che­re) Me­tho­de ar­bei­tet mit &shy; – das sind be­ding­te Trenn­stri­che, die nur dann an­ge­zeigt wer­den, wenn ein Wort am Zei­len­en­de tat­säch­lich um­bricht. Ein­fach ma­nu­ell im Quell­text an den po­ten­zi­el­len Trenn­stel­len ein­fü­gen: Bei&shy;spiels&shy;wei­se so.
Dan­ke für den Tipp von Ana­tol Bro­der (@pe­ni­belst)!

---
Rubrik(en):  #methodik  #typografie 

Artikel kommentieren

Kommentare werden überprüft, bevor sie veröffentlicht werden. Alle Angaben sind freiwillig, es gibt keine Pflichtfelder (außer das Kommentarfeld selbst).

 (Pseudonym möglich)
 (wird nicht veröffentlicht)

Formatierungen mit HTML sind möglich, z. B. <em>betont</em>, <strong>hervor­gehoben</strong> oder <code>Quelltext</code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt=Bildbeschreibung">).

← Krimigeschichten mit Richter Di

Subtile (Un)wahrheiten →