hyphenator.js: Silbentrennung auf Web-Seiten per JavaScript

image 

Warum benutzen fast alle Websites Flattersatz? Weil Blocksatz im Web unansehnliche und schlecht lesbare Texte erzeugt. Aber warum ist das so? Weil ein Browser keine automatische Silbentrennung bietet und deshalb – besonders bei schmalen Textspalten – übergrosse und sehr unregelmässige Wortzwischenräume entstehen.

Was wir seit rund 15 Jahren als gegeben hinnehmen, ist allerdings kein Naturgesetz. Wie man bei Textverarbeitungsprogrammen sieht, kann man einer Software durchaus die Trennregeln unterschiedlicher Sprachen beibringen. Grundsätzlich könnten auch Web-Browser mit Silbentrennung ausgestattet werden, nur hat das bisher kein Browser-Hersteller getan. Das einzige, was heute alle wichtigen Browser bieten, ist die Unterstützung des weichen Trennzeichens (­ = Soft Hyphen, in Microsoft Word “bedingter Trennstrich” genannt): Enthält ein Wort, das nicht mehr auf eine Zeile passt, ein weiches (unsichtbares) Trennzeichen, so ersetzt es der Browser durch ein normales (sichtbares) Trennzeichen und bricht die Zeile an dieser Stelle um.

So weit, so gut – aber wer fügt diese weichen Trennzeichen in den HTML-Code ein? Hierzu gibt es zwei Ansätze:

  • Client-side: Das JavaScript hyphenator.js des Schweizer Entwicklers Mathias Nater fügt die Soft Hyphens ein, nachdem die Seite vom Browser geladen wurde. Weil dieses JavaScript auch in Form eines Bookmarklets genutzt werden kann lässt es sich grundsätzlich auf jede Website anwenden.
  • Server-side: Das PHP-Skript phpHyphenator ist eine Portierung des obigen JavaScripts und fügt die Soft Hyphens vor der Auslieferung der Seite ein. Eine solche Lösung muss zwingend vom Website-Betreiber implementiert werden.

Es ist beeindruckend, was hyphenator.js leistet. Trotzdem hat diese Lösung prinzipbedingt einige Schwächen. Zunächst wird die Website etwas langsamer, weil sowohl das Laden des JavaScripts als auch das Einfügen der weichen Trennzeichen Zeit beansprucht. Zudem lassen sich gewisse Suchmaschinen und Screen Readers (siehe hier) von weichen Trennzeichen irritieren und erkennen nur noch die Wortteile statt die ganzen Wörter. Und schliesslich ist zu sagen, dass die Worttrennung von hyphenator.js zwar gut, aber nicht perfekt ist und man bei Sonderfällen die Trennung nicht manuell übersteuern kann.

Offenbar wird Firefox 6.0 erstmals eine integrierte Silbentrennung besitzen. Bis es so weit ist (und bis auch die anderen Browser nachgezogen haben) ist hyphenator.js fast die einzige Alternative.

7 Gedanken zu „hyphenator.js: Silbentrennung auf Web-Seiten per JavaScript“

  1. Zu einem vernünftigen und gut lesbaren Blocksatz gehört mehr als Trennungen. Wie man an dem obigen Beispiel gut sehen kann, ist der Blocksatz trotz der Trennungen unausgewogen und löchrig und schlechter lesbar als Flattersatz.

  2. Hallo

    Danke für den ausführlichen Artikel. Ich freue mich immer wieder, wenn ich etwas über Hyphenator.js lese und vor allem wenn das Script gebraucht wird…

    Ich habe noch ein paar Bemerkungen:
    Safari auf iOS unterstützt seit iOS 4.2 (also seit November 2010) CSS3-Hyphenation: -webkit-hyphens: “auto”
    Allerdings nur für die jeweils eingestellte Systemsprache.
    Ich arbeite zur Zeit an einer Version, die diese modernen Browser berücksichtigen.

    Suchmaschinen kommen gut zurecht mit Hyphenator.js (da dieser die Soft Hyphens ja erst im Browser einfügt). Nicht so gut funktionierts mit der Suchfunktion in einigen Browsern, die sich nicht an den Unicode-Standard halten.

    Wenn Hyphenator.js eine Fehltrennung vornimmt, kann man das sehr wohl manuell übersteuern: http://code.google.com/p/hyphenator/wiki/en_DealingWithInaccurateHyphenation

    Bei Fehltrennungen von Deutschen Wörtern wäre ich um eine kurze Mitteilung sehr froh. Dann kann ich das der Gruppe, die die Trennmuster produziert weiterleiten.

    Stets,
    Mathias

Hinterlassen Sie einen Kommentar