Automatische Silbentrennung mit Hyphenator

Inhaltsverzeichnis

 

1. Vorwort Inhalt

Es war mir in einigen Artikeln aufgefallen, dass bei bestimmten Schriftgrößeneinstellungen im Webbrowser lange Wörter , die am Ende der Zeile nicht mehr hinpassen, vollständig in die nächste Zeile rutschen. Das gibt einen unschönen Effekt des „Flattertextes“ bei linksbündiger Anordnung oder, bei blocksatzorientierter Anordnung große Lücken zwischen einzelnen Wörtern. Es fehlt also eine automatische Silbentrennnung, die aus langen Wörtern schön umgebrochenen, getrennten Fließtext macht.

2. Theorie Inhalt

Zu Textsatz und Silbentrennung existiert hier ein sehr guter Artikel, der auch auf die universelle Silbentrennung, erfunden bzw. erarbeitet von Frankling Mark Liang im Jahr 1983, eingeht. Der Autor hat diesen Algorithmus dann in JavaScript umgesetzt und liefert auch die entsprechenden Musterdateien für viele Sprachen mit.

Ich möchte die Quelle kurz zusammenfassen und einige Gedanken festhalten:

  1. Schriftgrößen sind im Internet (HTML, CSS) variabel, sofern die Seite „gut“ programmiert ist, und hängen allein vom darstellenden Programm oder Gerät ab.
  2. Je nach Schriftgröße ändert sich die Anzahl der Wörter, die in eine Zeile passen: je größer die Schrift, desto weniger Worte pro Zeile
  3. Damit ein Webbrowser ein Wort oder ein Wortteil in eine neue Zeile rückt, muss es vom Rest abtrennt werden, sonst rutscht das gesamte Wort eine Zeile tiefer.

3. Notwendige Schritte Inhalt

Es muss dem Webbrowser folglich mitgeteilt werden, an welchen Stellen ein Wort umgebrochen werden kann. Allerdings ergeben sich einige Schwierigkeiten:

  1. Aktuelle Schriftgröße und -Art sind weder dem Webserver noch dem DOM (JavaScript) des Browsers bekannt. Man kann nicht herausbekommen, wieviele Pixel breit ein bestimmtes Wort ist, um eventuell die Pixelbreite für alle Wörter pro Zeile zu ermitteln.
  2. Damit Suchfunktionen erhalten bleiben, kann der Datenbestand auf dem Server nicht verändert werden, sondern muss als ungetrennter, zusammenhängender Fließtext verbleiben.
  3. Es existiert keine CSS(2)-Property „hyphenate“ oder ähnlich.
  4. Eine Trennung mittels „hart“ codiertem Trennstrich „-“ kommt wegen 1) nicht in Frage.

Glücklicherweise gibt es einen Ausweg. Das Zeichen lautet „­“ und zeigt dem Webbrowser an, wo ein Wort getrennt werden kann. Gleichzeitig aber wird es von der Darstellung ausgenommen und hat keinen Einfluß auf die Wortbreite. Als Beispiel würde man das Wort „Silbentrennung“ im HTML-Quelltext korrekt

schreiben und der Webbrowser könnte korrekt umbrechen.

4. Lösung Inhalt

Nun wäre der erste mögliche Schritt, einfach nach den Regeln des Herrn Liang die Texte in der Datenbank zu verändern und entsprechende „­“s in jedes Wort einzufügen. Das würde aber den Verlust der Suchfunktionalität oder zuminedest einige Performance-Einbußen nach sich ziehen, da die Shy-Tags für jede Suche wieder entfernt werden müssen.

Eine bessere Lösung läßt sich mit JavaScript realisieren. Man muss einfach „nur“ über einen gegebenen Text iterieren, die einzelnen Wörter mit mehr als x Zeichen (getrennt durch Whitespace, also Leerzeichen, Tabulator, neue Zeile, etc.) nach Herrn Liangs Regeln trennen, und für jede Trennung ein „­“ Tag einfügen. Danach schreibt man den Text mit neuen Tags wieder über .innerHTML=“$newText“; zurück in den HTML-Quelltext.

Der Webbrowser kann dann selbst anhand von Schriftgröße und -Art entscheiden, welches Wort wann und wo umzubrechen ist. Leute ohne JavaScript sehen den Text ganz normal ohne Umbrüche.

5. …und in WordPress Inhalt

Eine Schwierigkeit hatte ich, den Hyphenator zum Laufen zu bekommen. Zuerst hatte ich ihn manuell in mein Theme installiert, also JavaScript-Datei und Patterns kopiert, das DIV-Tag mit Klasse „entry“ noch um „hyphenate“ erweitert und die Darstellung probiert.

Leider hat das mit dem Plugin highlight-source-pro nicht zusammengepaßt, die Quelltexte waren nicht mehr in der Schriftart Courier.

Der zweite Versuch mit dem WordPress-Plugin „Hyphenator“ war dann von Erfolg gekrönt. Man muss zwar noch immer im DIV-Tag „entry“ die Klasse „hyphenate“ ergänzen, es scheint sich aber nicht mehr auf die PRE-Tags von highlight-source-pro auszuwirken. Ich habe die genaue Ursache allerdings nicht erforscht; dass es so funktioniert, hat schon gereicht 🙂

Einziger Wehrmutstropfen: FireFox 2 unterstützt die Tags nicht und behält die Wörter ohne Umbruch bei.

5 Kommentare zu “Automatische Silbentrennung mit Hyphenator”

1.   Kommentar von Manuel
Erstellt am 22. August 2009 um 13:18 Uhr.

Ich wusste gar nicht, dass es sowas gibt, aber genau solch ein Plugin habe ich immer gesucht. Denn ich verwende bei mir auf der Seite auch den Blocksatz und habe deshalb manchmal riesen Löcher zwischen den Wörtern. Weil mich das stört, habe ich die Sätze dann so lange umformuliert, bis es gepasst hat…eine ziemliche Arbeit! 😀

Das Plugin nimmt mir die ganze Arbeit ab, und ich kann endlich wieder normal schreiben. 🙂

Allerdings habe ich in meinem IE 8 immer folgenden Fehler:

siehe hier -> http://www.tvfacts.de/news/

Hyphenator.js says:
An Error ocurred: ‚window.prompt(…)‘ ist Null oder kein Objekt

Im Firefox klappt alles ohne Probleme. Ich habe das schon andere Testen lassen und da erschien auch kein Fehler. Ich glaube mittlerweile es liegt an der Einstellung „Kompatiblitätsansicht“ im IE. Schalte ich diese für meine Seite aus, erscheint die Fehlermeldung nicht mehr. Aber irgendeine Ursache muss das ja haben. Möchte nicht, dass andere Besucher meiner Seite auch so eine Fehlermeldung sehen.

Habe die Kompatibilitätsansicht für deine Seite mal aktiviert, und da kam auch keine Fehlermeldung. Deshalb bin ich etwas überfragt. Habe sonst alles genauso eingebunden wie bei dir.

Hast du vielleicht eine Idee? Ich kann sonst nicht mehr ruhig schlafen… 😛

Beste Grüße,
Manuel

2.   Kommentar von McSeven
Erstellt am 22. August 2009 um 14:28 Uhr.

Hi, ich hab’s mir grad angeschaut, das muss an einer Sicherheitseinstellung liegen, weil’s bei mir auch im IE7 den Fehler gibt, zumindest bei Deiner Seite. Ich hab gerade mal kurz gesucht, es scheint mit IE7 eingeführt zu sein: http://www.google.de/search?q=ie7+window.prompt

Konsistent wäre dann, dass die Kompatibilitätsansicht den Fehler nicht produziert.

Die einzige Frage ist dann noch, weswegen die Methode window.prompt() auf Deiner Seite aufgerufen wird und bei mir nicht, nachdem’s doch das gleiche Plugin ist.

Ich glaube, es liegt daran, dass Hyphenator die eingestellte Textsprache nicht bestimmen kann und mit window.prompt() den User fragen möchte. Schau mal in den Einstellungen zum Plugin, da kann man für alle Texte der WP-Installation die Sprache festlegen. Dann sollte es klappen.

3.   Kommentar von Manuel
Erstellt am 22. August 2009 um 14:57 Uhr.

Hey danke für den Tipp mit der Sprache! Daran lag es glaube. Im Plugin selber hatte ich zwar alles auf DE eingestellt, aber im Header hatte ich folgende Zeile:

Daraus habe ich gemacht und nun scheint es zu klappen. Vielleicht könntest du mir das auch nochmal kurz bestätigen. Wäre dir echt dankbar! 🙂

4.   Kommentar von McSeven
Erstellt am 22. August 2009 um 15:03 Uhr.

Hi, grad angeschaut. Tut auf Deiner Seite einwandfrei; ich hab keinen Fehler mehr bekommen…

5.   Kommentar von Manuel
Erstellt am 22. August 2009 um 15:07 Uhr.

Ach da bin ich ja beruhigt! Nun kann ich doch wieder unbesorgt schlafen… 😉

Vielen Dank nochmal und schönes Rest-Wochenende!

Manuel

Einen Kommentar hinterlassen