Silbentrennung im Browser

Wenn Texte in schmalen Spalten angeordnet werden sollen, dann ist die Verwendung irgendeiner Form von Silbentrennung notwendig. Dies sind drei Möglichkeiten, die alle ihre Vor- und Nachteile haben.

Silbentrennung mit CSS

Mit Hilfe von CSS hyphens kann man die Silbentrennung vom Browser erledigen lassen, denn viele Browser haben ein Regelwerk, welches dafür genutzt werden kann. Die Unterstützung fällt jedoch sehr unterschiedlich aus und eine Garantie für die Funktion gibt es nicht. Auch können die zugrundliegenden Regeln kaum beeinflußt werden. Wenn die Silbentrennung aufgrund des Layouts zwingend benötigt wird, dann ist dies der falsche Weg.

hyphens: auto

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht, ein geradezu unorthographisches Leben.

hyphens: none

Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht, ein geradezu unorthographisches Leben.

Für die Silbentrennung mit CSS muss der korrekte Language Code definiert sein.

<html lang="de">

Für die eigentliche Trennung muss nur noch die Eigenschaft hyphens auf das gewünschte HTML-Element angewendet werden.

.content p { 
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -khtml-hyphens: auto;
}

Silbentrennung mit Javascript

Mit der Open-Source-Lib Hyphenator.js von Mathias Nater kann man die Silbentrennung mit Hilfe von Javascript erzeugen. Der Hyphenator ist wesentlich weiter entwickelt als die CSS-Funktion, denn er verwendet dafür die Algorithmen von LaTeX. Ferner unterstützt er viele Sprachen und ist konfigurierbar. Es können also eigene Regeln und Ausnahmen definiert werden. Der Nachteil ist seine nicht unerhebliche Größe und der damit verbundene Performance-Verlust.

Drei Textspalten mit JS-Hyphenator

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg.

Zunächst muß die JS-Lib geladen werden.

<script src="/hyphenator.js"  type="text/javascript"></script>

Es gibt eine Reihe von Konfigurations-Optionen, die man bei Bedarf setzen kann. In der Default-Konfiguration wird die Trennung auf alle Elemente angewendet, die die CSS-Klasse »hyphenate« besitzen.

<p class="hyphenate">Es ist ein paradigmatisches..</p>

<script type="text/javascript">
    var hyphenatorSettings = {
        displaytogglebox :  true,
        togglebox :         function (hyphenate) {
            var myelem = document.getElementById('hyphenationbutton');
            myelem.onclick = Hyphenator.toggleHyphenation;
        }
    };
    Hyphenator.config(hyphenatorSettings);
</script>

Silbentrennung mit PHP

Um die Performance-Nachteile der Javascript-Version des Hyphenator zu vermeiden gibt es den phpHyphenator. Die PHP-Version ermöglicht, die Trennung serverseitig vornehmen zu lassen. Der Code für die Trennung mit den umfangreichen Mustern muß also nicht mehr zu dem Client übertragen werden.

Die Verwendung ist ebenfalls sehr einfach. Anders als bei der JS-Version müssen einige Parameter definiert werden. Dies sind die Pfade zu den Dateien und einige Variablen für die Trennung.

$GLOBALS["language"] = "de";
$GLOBALS["path_to_patterns"] = "patterns/";
$GLOBALS["dictionary"] = "dictionary.txt";
$GLOBALS["hyphen"] = "&shy;";
$GLOBALS["leftmin"] = 2;
$GLOBALS["rightmin"] = 2;
$GLOBALS["charmin"] = 2;
$GLOBALS["charmax"] = 10;
$GLOBALS["allowed_tags"] = array("p");
$GLOBALS["exclude_tags"] = array("code", "pre", "script", "style");

include("hyphenation.php");

Nun kann die Trennung auf Variablen mit Inhalten angewendet werden.

$Content = "Es ist ein paradigmatisches...";

echo hyphenation($Content);

Falls der Inhalt für die Silbentrennung nicht in Form von Variablen vorliegt, sondern auf Dateien angewendet werden soll, dann kann man diese leicht in Variablen einlesen.

ob_start();
include_once($ContentFile);
$Content = ob_get_contents();
ob_end_clean();

echo hyphenation($Content);

Hier sollte man auf das verwendete Trennzeichen achten. Mit dem falschen Zeichen werden die Texte für Suchmaschinen fast unlesbar. Mit &shy; als Trennzeichen bleiben die Texte maschinenlesbar, wird stattdessen ein Trennstrich verwendet (z. B. &#173;), dann kann dies Nachteile für Lesbarkeit für Suchmaschinen bedeuten.