Sprung zum Inhalt [/] Tastaturkürzel / Accesskeys [0]

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

Hyphenation - automatische Silbentrennung

Donnerstag, 18. August 2011

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites.

schreibt das FONTDECK Blog.
Warum Websites keine Silbentrennung einsetzen, ist schnell erklärt: Weil die Laufweite der Zeilen, anders als im Print, nicht bekannt ist. Sie hängt nämlich von den Benutzereinstellungen ab.
HTML bietet in diesem Fall eine Art Automatik - den bedingten Trennstrich “soft hyphens” - an: ­ - inzwischen unterstützen alle modernen Browser das.
Das manuelle Setzen von soft hyphens rechtferigt den Aufwand aber nur in wenigen, speziellen Fällen. Deshalb gibt es Techniken, das Setzen von soft hyphens automatisch von JavaScript erledigen zu lassen. Am bekanntesten dürfte Hyphenator.js sein.

Wann macht automatische Silbentrennung Sinn?

  1. Wenn Blocksatz eingesetzt wird.
  2. Bei extrem kurzen Zeilenweite, z. B. wenn Text Bilder umfließt.

Die Ergebnisse mit Hyphenator.js sind ordentlich. Mit einer gravierenden Einschränkung: Screen Reader (nicht alle, aber die meisten) “verschlucken sich” an den soft hyphens. Das Ergebnis ist unverständlich bis unzumutbar. Wer Wert darauf legt, dass seine Seiten für Screen Reader zugänglich sind, muss auf automatische Silbentrennung mittels Hyphenator.js verzichten.

Ein erster Schritt in die richtige Richtung

Puristen hätten längst eingewendet:
Silbentrennung hat nichts im Markup zu suchen (Markup ist Inhalt), und auch nichts im JavaScript (JavaScript ist zuständig für das Verhalten einer Webseite). Silbentrennung ist Darstellung, und gehört ins CSS! Und dort hat es jetzt, mit der CSS3-Deklaration “hyphens:auto” auch Einzug gefunden. Bisher unterstützen diese Deklaration der brandneue Firefox 6, und Safari 5.1 bzw. Safari / iOS. Und beide Browser auch nur mit Vendor-Prefix. Der CSS Code muss also lauten:

.hyphen {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Damit ist der Safari bedient.
Für den Firefox ist zusätzlich lang="en” für das entsprechende Element (oder ein Elternelement) nötig. Jawohl: “en", auch wenn die Sprache des Dokument eine andere ist. Also

<div class="hyphen" lang="en" >

Das funktioniert. Zumindest auf dem Monitor. Aber es ist natürlich ein absolutes No-Go - nicht nur wegen des Kauderwelsch’, das Screen Reader dann ausgeben.

Was bleibt? - Fazit

Also alles noch Spielerei, nicht in der Praxis einsetzbar?
DOCH!
Es gibt einen Anwendungsfall, der geradezu nach “hyphens:auto” schreit: Das iPhone! Dort sind die Zeilen kurz, und das iPhone versteht die Deklaration.
Also ran ans CSS:

body {
    -webkit-hyphens: auto;
}

Das versteht nur der Safari, und es erfordert kein Verbiegen der Dokumentensprache. Und, weil die Silbentrennung jetzt dort ist, wo sie hingehört, nämlich im CSS, “verschluckt” sich auch der Screeen Reader (VoiceOver) nicht. Wer das Ergebnis sehen will, hier ein Testcase.
Hinweis: Die Testseite ist mit < body lang="en” > ausgezeichnet. Die Anzeige funktioniert also auch im Firefox 6. Wer sich die Seite mit VoiceOver im Safari anhört, weiß, warum das ein No-Go ist.

Nachtrag 08.11.2011

Firefox in der Version 8 versteht jetzt -moz-hyphens:auto, auch ohne die Vergewaltigung mittels lang="en". Und ältere Versione ignorieren diese Auszeichnung einfach. Weil das niemandem schadet, habe ich es sofort in meine Seiten eingebaut.

Nachtrag 19.11.2011

Und auch Safari/Mac in der aktuellen Version 5.1.1 kann jetzt Hyphenation. Ohne Die oben genannten VoiceOver-Probleme.

Kuriositäten im Firefox

Nobody is perfect. “Merkwürdige” Trennungen im Firefox, die mir so untergekommen sind.

  • iPho-ne
  • VoiceO-ver
  • vi-elleicht
  • App-le
  • Seitende-sign
  • JavaS-cript


2 Kommentare

  1. Coole Sache! Macht echt Sinn für das iPhone. Hoffe das in Zukunft da noch mehr passiert, da nicht nur einmal Kunden gemeint haben, dass wie unbedingt Blocksatz auf Ihrer Website haben wollen.

    Kommentar von Christoph Batik — Donnerstag, 18. August 2011 - 16:42 Uhr

  2. @lang="en” für deutsche Texte zu setzen ist in der Tat ein No-Go. Das funktioniert nämlich nicht. Der 6er Firefox würde dann zwar automatische Silbentrennung anwenden, aber nach völlig falschen Regeln (nämlich den englischen) und fürs Deutsche ungeeignete Ergebnisse liefern.
    Gerade bei automatischer Silbentrennung ist es essentiell, dass die Textsprache korrekt angegeben* ist (@lang/@xml:lang).
    Bei @lang="de” tut der 6er Firefox dann eben einfach nichts, so wie es von der Spezifikation verlangt wird: “Correct automatic hyphenation requires a hyphenation resource appropriate to the language of the text being broken. The UA is therefore only required to automatically hyphenate text for which the author has declared a language (e.g. via HTML lang or XML xml:lang) and for which it has an appropriate hyphenation resource.”
    Man kann also schon -moz-hyphens: auto; im Stylesheet zu stehen haben, und mit dem nächsten oder übernächsten Update wird der Firefox auch die deutschen Silbentrennungsregeln implementiert haben und sie dann anwenden.

    * Der Link funkioniert noch nicht, aber in Kürze.

    Kommentar von Gunnar Bittersmann — Donnerstag, 8. September 2011 - 13:57 Uhr

Einen Kommentar abgeben

XHTML erlaubt: <a href="" title="" rel=""> <abbr title=""> <b> <blockquote> <code> <em> <i> <strike> <strong>

Code-Beispiele
Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Ältere Beitäge:

Kategorien:

Creative Commons Lizenzvertrag
Alle Artikel des Blogs Creative Commons CC BY-NC-SA 3.0 DE

Tastaturkürzel

zum Seitenanfang