CSS3 und Webtypografie: Silbentrennung mit Stil

Aufmerksame Leser unseres Blogs haben es womöglich schon festgestellt: Wir trennen, wo nötig, die Silben in unseren Beiträgen.  Oder besser formuliert: Wir lassen trennen.

Aber wieso das nun plötzlich? Kennen doch alle Gestalter die Faustregel: In Kinderbüchern und im Web werden Wörter nicht getrennt, richtig?

Nun, der Wunsch nach Silbentrennung im Web ist nicht neu und wird noch weiter verstärkt durch die stark zunehmende Relevanz mobiler Endgeräte mit ihren speziellen Anforderungen an die Darstellung von Inhalten, insbesondere hinsichtlich der Lesbarkeit von (langen) Textpassagen.

Tatsächlich bestand zumindest die Möglichkeit der manuell erzwungenen Umbrüche schon seit geraumer Zeit. Man denke hier an den stiefmütterlich unterstützen und selten angewandten ­-Tag, der dem Redakteur das Leben schwerer machte und den Webgestalter unzufrieden zurückließ. Ambitionierter, aber noch etwas exotischer, waren die Versuche der automatisierten Silbentrennung per JavaScript. Wirklich durchsetzen wollte sich dieser technische Kniff aber nie.

Glücklicherweise erkannte das World Wide Web Consortium (W3C) diese Problematik und gab uns mit CSS3 endlich die Möglichkeit an die Hand, den Browser spielend einfach zur automatisierten Silbentrennung zu bewegen.

Und wie funktioniert es also? Zunächst einmal definieren wir in unserem HTML-Dokument die Sprache des Inhaltes:

<html lang=“de“>

Als nächstes erweitern wir in unserer CSS-Datei den Body-Tag um folgende Eigenschaft – einschließlich der Vendor-Prefixes für Webkit, Mozilla und Microsoft:

body {
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

Voilà, die Silbentrennung ist nun aktiviert und automatisiert!

Bleibt nur noch die übliche Frage: Wird diese CSS3-Eigenschaft überhaupt ausreichend unterstützt? Auf caniuse.com/css-hyphens ist zu sehen, welche Browser bereits mitmachen. Und wir stellen fest: Bis auf Chrome und Android sind inzwischen alle relevanten Browser up-to-date. Und auch die letztgenannten werden mit großer Sicherheit schnell nachziehen!

Fazit: Dank der immer breiteren Unterstützung der browserseitigen Silbentrennung ist nun endlich die Zeit reif für automatisierte Umbrüche im Web. Den Webgestalter freut’s!

Ein Gedanke zu „CSS3 und Webtypografie: Silbentrennung mit Stil

Schreibe einen Kommentar

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