Was mit einem „Lorem Ipsum„-Platzhaltertext oft noch prima aussieht, entpuppt sich beim Befüllen mit deutschen Texten oft als gestalterischer und typografischer Fauxpas: Blocksatz auf Webseiten. Der Grund dafür ist die fehlende Silbentrennung (Hyphenation) bei der Darstellung von Texten in Webbrowsern – lange Wörter rutschen, wenn sie das Ende der Zeile überschreiten, komplett in die nächste Zeile. Die Lücke, die diese langen Wörter beim Sprung in die nächste Zeile hinterlassen, wird anschliessend mit den verbleibenden Wörtern aufgefüllt. Das Ergebnis sind übergroße Wortabstände die nicht nur unschön aussehen sonder auch das Lesen des Textes erschweren.
Dank einer Reihe server- und clientseitiger Techniken wie PHP oder Javascript lässt sich dieses Problem aber zumindest annähernd in den Griff bekommen.
Natürlich wäre es besser, komplett auf Blocksatz zu verzichten so lange die Browser keinen nativen Support für die Trennung langer Wörter mit sich bringen. Aber man muss sich auch eines vor Augen halten: Wenn niemand Blocksatz auf seinen Seiten verwendet, verringert sich auch der Druck auf die Browserhersteller, dahin gehend etwas zu tun. Und irgendwann wird man dann vielleicht „text-align: justify“ komplett aus den CSS-Spezifikationen entfernen. Ich bin der Meinung, dass das schon ein enormer Verlust für die Gestaltungsfreiheit wäre. Gerade mehrspaltige Texte machen im Blocksatz (zumindest in Print-Produkten) den deutlich besseren Eindruck.
Und auch auf Webseiten bedeutet der Verzicht auf den Blocksatz oft ein Zurückstecken in Sachen Design zugunsten der Lesbarkeit. Um hier den Bogen zu schlagen, wäre eine Implementierung direkt im Browser überaus wünschenswert – und eigentlich schon lange überfällig.
Da wir aber nicht in absehbarer Zeit mit einer Lösung dieser Problematik rechnen dürfen, kann es sinnvoll sein, die Silbentrennung mittels anderer Techniken zu realisieren.
Unter der URL http://yellowgreen.de/hyphenation-in-web sind eine Reihe von Methoden zur Hyphenation, basierend auf PHP, JS, AJAX, Ruby, Java oder Python gelistet.
Auch ich hatte auf meiner (dieser) Website das Problem, dass in manchen Artikeln der Textfluss durch hässliche Lücken gestört wurde. Tests mit linksbündigen Text machten aber klar, dass dies nur eine mangelhafte Alternative sein kann. Also musste eine Lösung her.
Da ich ein CMS auf PHP-Basis verwende, aber keine Lust hatte allein für die korrekte Trennung langer Wörter in den Quelltext einzugreifen, um serverseitige Hyphenation zu integrieren, fiel mein Wahl auf „Hyphenator.js“ welches die Silbentrennung im Browser via Javascript realisiert.
Einbindung in eigene Seiten
Die Implementierung ist denkbar einfach und auf der Projekt-Seite von Google Code gut dokumentiert. Bei der Verwendung eines CMS muss man sich die Arbeit auch nur einmal im Template machen:
1. Skript herunterladen
http://code.google.com/p/hyphenator/downloads/list
2. Entpacken und Kopieren
Das Skript wird als ZIP-File ausgeliefert. Dieses File muss zunächst entpackt, der Inhalt in das eigene Skript-Verzeichnis kopiert werden. (z.B. http://ihreDomain.com/pfad/).
Wichtig sind dabei das Skript selbst „Hyphenator.js“ und die „patterns“ für die unterstützten Sprachen (enthalten Trenn-Regeln für die einzelnen Sprachen). Wer Platz auf seinem Server sparen möchte, kann alle nicht benötigten Patterns aus dem Ordner „patterns“ entfernen – für deutsch würde „de.js“ ausreichen.
3. Sicherstellen, dass die Seitensprache im Head definiert ist
Die Auswahl der nötigen Trennregeln ermittelt „Hyphenator.js“ anhand der Sprachangabe im Head der Seite. Für deutsche Seiten sollte dieser so aussehen:
<meta name="language" content="de"/>
Außerdem muß die Seite als UTF-8 kodiert sein.
4. Skript im Head einbinden
<script src="http://ihreDomain.com/pfad/Hyphenator.js" type="text/javascript"> </script>
5. Konfigurieren und starten (Beispiel)
Hyphenator.run() führt die Hyphenation aus. Zuvor können verschiedene Einstellungen vorgenommen werden, welche auf der How-To-Seite zu Hyphenator.js dokumentiert sind.
<script type="text/javascript">
Hyphenator.setMinWordLength(4);
Hyphenator.setDisplayToggleBox(true);
Hyphenator.run();
</script>6. Zu trennenden Textbereich mit der Klasse „hyphenate“ kennzeichnen
<div id="haupttext" class="hyphenate"> ... Hier erfolgt die Ausgabe des Textes ... </div>
Im der oben gezeigten Konfiguration (5.) wird die Eigenschaft „Hyphenator.setDisplayToggleBox(true);“ festgelegt. Diese Einstellung erzeugt eine Hyphenator-Schaltfläche am Bildschirmrand, rechts oben, welche es erlaubt, die Silbentrennung wahlweise abzuschalten.
Fazit
Solange die Hersteller von Internet Explorer, Firefox, Opera, Safari und Co. keine eigene Unterstützung für Silbentrennung bieten, sind alternative Verfahren wie das vorgestellte sicher eine überaus sinnvolle Alternative.
Ich habe das Hyphenator-Skript erst heute in mein Page-Template eingebunden und bin gespannt, wie es sich in Zukunft so schlägt. Problematische Wörter wie Ur-instink / Urin-stink oder Nonnen-kloster / Nonnenklo-ster kann das Skript naturgemäß natürlich nicht alle ausfindig machen. Es besteht aber die Möglichkeit, derartige Speziallfälle gesondert zu behandeln (Hyphenator.addExceptions(‚Ur-instinkt‘);)
Wenn man diese Besonderheiten der deutschen Sprache beachtet, kann die Verwendung von Blocksätzen auf Webseiten endlich wieder Spaß machen!
Weiterführende Informationen: