Silbentrennung mit CSS3 oder JavaScript

Blocksatz ohne anständige Silbentrennung sieht in den meisten Fällen einfach nur schlecht und unprofessionell aus. Das wird sicher jeder wissen, der schon mal einen Text geschrieben hat. Blocksatz in Webseiten zu verwenden, ist seit je her ein großes Problem, denn die automatische Worttrennung ist dort so eine Sache. Daher setzen sehr viele auf Flattersatz. Ich persönlich bin kein Freund davon. Also, was tun?

CSS3 bringt die Silbentrennung mit

Mit CSS3 kommt nun endlich die Eigenschaft "hyphens", welche sich sehr einfach einbauen lässt. Dazu sind lediglich im Stylesheet die folgenden Angaben nötig:

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

Im HTML-Dokument muss dann natürlich noch die Sprache richtig definiert werden: <html lang="de"> Fertig? Leider nicht, denn jetzt kommt das große ABER.

Silbentrennung via CSS funktioniert aktuell nur mit Mozilla Firefox, Microsoft Internet Explorer 10 und Apple Safari. Google Chrome, Opera und die meisten mobile Browser unterstützen diese Funktion praktisch gar nicht. Daher ist es auch äußerst ärgerlich, das man zu einer anderen Lösung greifen muss. Diese sieht es vor, die Worttrennung mittels JavaScript zu erledigen.

Hyphenator trennt zuverlässig

Bei meinen Recherchen zu diesem Thema stieß ich auf Hyphenator. Mit dieser Scriptbibliothek lassen sich Wörter sehr schön trennen. Genauso, wie es auch CSS machen würde. Mittels des Online-Generators ist die notwendige Datei rasch erstellt und eingebunden. Eine kurze Anleitung und ausführliche Dokumentation stellt der Entwickler bereit.

<script src="http://yourdomain.com/path/hyphenate.js" type="text/javascript"></script>

Nach Erfolgreichem hinzufügen, arbeitet das Script auch schon munter drauf los. Allerdings hat auch diese Option einen Haken. Die Filegröße beträgt schlappe 100 KB und ist damit keine performante Möglichkeit mehr. Angeblich soll Hypher noch etwas schneller arbeiten und auf Hyphenator aufbauen. Aber selbst dieses Konzept sollte nicht wesentlich schlanker sein.

Kennt ihr weitere Alternativen?

Stellt sich nun die Frage, was sich sonst anbieten würde. Ich habe zwar noch ein paar andere Ansätze gefunden, aber die waren auch nicht gerade das Wahre. Der Entwickler von phpHyphenator rät von seiner reinen PHP Variante ab und empfiehlt eine Kombination aus PHP und Ajax Code zu verwenden. Trotzdem ergibt sich daraus kein nennenswerter sinnvoller Ansatz, da ebenfalls sehr viele große Dateien eingebunden werden müssten.

Bleisatz
Bleisatz (Quelle: the justified sinner, Liz. CC BY-NC-SA 2.0)

Das Projekt Sweet Justice wäre eine Problembeseitigung gewesen, wenn das Script die deutschen Wörter richtig trennen würde. Tut es nur nicht, da es ausschließlich auf englische Worterkennung ausgelegt wurde. Die Scriptgröße von knapp 5 KB wäre unschlagbar fair.

Habt ihr vielleicht noch ein paar Ideen, um eine vernünftige Silbentrennung browserübergeifend zu ermöglichen?


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.