Silbentrennung auf Webseiten

Silbentrennung im Textverarbeitungsprogramm geht automatisch und ist auch von Hand steuerbar, wenn die Automatik mal Fehler macht.

Silbentrennung auf Webseiten ist eine andere Sache. In CSS 2 war es nicht vorgesehen. Natürlich konnte man von Hand einen harten Trennstrich setzen an den Stellen, wo man es als erforderlich erfand. Das passte dann mit den Einstellungen des Webdesigners. Aber wenn der Seitenbesucher einen anderen Browser benutzte, vielleicht auch noch unter einem anderen Betriebssystem und im schlimmsten Fall mit individuell eingestellter Schriftgröße, dann waren die Trennstriche oft nicht am Ende einer Zeile, sondern irgendwo mittendrin. Sehr hässlich.

Man konnte sich in HTML mit einem soft hyphen (­) behelfen und sogar ein Online-Tool zu Hilfe nehmen: hypho-o. Schön und gut für einen Webdesigner, aber unzumutbar für einen Kunden, der jedesmal seinen geänderten Text durch dieses Werkzeug jagen und dann per copy-and-paste in den Text-Editor einfügen müsste.

Mit CSS 3 leuchtet ein Hoffnungsschimmer am Horizont auf: es ermöglicht Silbentrennung oder hyphenation, wie es im Englischen heißt. Die Browserunterstützung ist allerdings noch nicht sehr gut, und ohne Browser-Präfixe kommt man momentan noch nicht aus. Und so lautet der Code:

p {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Ich habe es in verschiedenen Browsern unter Windows und Linux getestet. Unter Linux habe ich keinen Browser gefunden, unter dem es funktioniert hat. Unter Windows klappt es besser:

Firefox 10.0.2: ja
Seamonkey 2.7: ja
Safari 5.1.2: ja

Chrome 16.0.912.63: nein
Opera 11.61: nein
Internet Explorer 8 und 9: wahrscheinlich nicht; ist mir momentan aber auch ziemlich egal.

3 Antworten zu »Silbentrennung auf Webseiten«

  1. Walter B. Walser sagt:

    Interessanter Beitrag. Habe den Code getestet und kann die Resultate bestätigen. Gibts ggf. noch eine Anweisung für einen geschützten Leerschlag? Jetzt kommt z. b. die Währung und ein Betrag auf zwei Zeilen statt direkt nebeneinander.

  2. Torsten Kelsch sagt:

    Eine automatische oder CSS-Lösung weiß ich dafür nicht. Ich sehe da nur die Möglichkeit, zwischen dem Eurozeichen und dem Betrag von Hand ein non-breaking-space, also ein nicht umbrechendes Leerzeichen zu setzen:  

  3. Walter B. Walser sagt:

    Danke für den Tipp! Funktioniert tadellos.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Mit Absenden dieses Kommentarformulars bestätigst du, dass du die Datenschutzerklärung gelesen hast und dich mit der Speicherung deiner Daten einverstanden erklärst. Deine Daten werden nur benötigt, um dich gegebenenfalls zwecks Beantwortung deiner Anfrage kontaktieren zu können, und werden weder an Dritte weitergegeben noch zu Werbezwecken missbraucht.


Torsten Kelsch