Worttrennung im Browser eingebaut

Ein Blogbeitrag von Gerrit van Aaken hat mich darüber informiert, dass die neusten Browser (Firefox 6 und Safari 5.1) die CSS-Eigenschaft hyphens: auto; interpretieren und die Wörter browserseitig trennen.

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

Damit bricht nun die Zeit an, in welcher man im Web auch schmale Textspalten und Blocksatz anwenden kann. Dies klappte bislang nur mit dem Einsatz von schweren Javascript-Bibliotheken (z.B. hyphenator.js).

Einige Hindernisse sind natürlich noch nicht ausgeräumt. Schmale Spalten und Blocksatz kann man natürlich erst dann verwenden, wenn alle verbreiteten Browser die Worttrennung beherrschen. Jedoch kann man es durchaus bereits heute wagen, die Trennungsanweisungen in den Stylesheets einzubauen, so wie ich das auf dieser Website gemacht habe.

Skeptiker murren zwar, dass die Browser nicht richtig und schön trennen könnten, und man deshalb die Finger davon lassen sollte. Nach meinen neu gewonnen Erfahrungen funktioniert richtiges Trennen beim Firefox 6 aber schon recht gut, oder könnt ihr hier irgendwo eine Falschtrennung erkennen? Schönes Trennen hingegen, so wie es Menschen hinkriegen, wird wohl nie ganz automatisch gehen.

So sieht die Silbentrennung aus

So sieht die Worttrennung bei mir (Firefox 6) aus.

Nachtrag, 18.05.2012: Ich habe die automatische Silbentrennung wieder entfernt, da sie doch im Schnitt bei jedem neuen Artikel eine Stelle verursacht hat, die ziemlich hässlich war.

Ich weiche jetzt wieder auf die ältere Lösung aus, manuell ­-Zeichen zu setzen, wenn ich finde, ein Wort solle umgebrochen werden. Wünschenswert wären aber zwei andere Sachen:

  • Mittels CSS zentral sagen zu können, ab wievielen Buchstaben eine Silbe auf einer neuen Zeile stehen darf, und
  • ein Anti-­-Zeichen, um Silbentrennung an einer bestimmten Stelle zu unterbinden.

Schreibe einen Kommentar

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