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

Demonstration des SHY-Special-Chars
Sil­ben­tren­nung

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.