get out of my internet!

Es soll ja den ein oder anderen geben, dem es nicht egal ist, wie Texte auf Websites fließen. Zumindest in bestimmten Situationen, wenn auch Copytext zum Design beitragen soll. Es gibt auch viele Kunden, vor allem Designer aus dem klassischen Bereich, die sich der Typografie ihres Auftritts sehr bewusst annehmen. Das Thema Silbentrennung spielt hierbei eine große Rolle und eine automatische Silbentrennung, das ist im Internet noch immer so eine Sache.

Zuerst muss man abwägen, wann eine Silbentrennung überhaupt Sinn ergibt. Bei extrem langen Wörtern, wie Fußbodenschleifmaschinenverleih, die in recht schmale Container gesteckt werden, ja. Aber auch bei Blocksatz, den man allerdings auf Websites sehr bedacht einsetzen sollte. Wenn man Blocksatz und ein responsive Layout verwendet, dann ist eine automatische Silbentrennung quasi ein Muss. Oder man steht auf extrem gezogene Leerstellen zwischen den Wörtern.

Mit CSS3 ist die sogenannte Hyphenation jetzt möglich. Gibt man einem Element die Methode hyphens mit, wird der Text getrennt. Dabei gibt es drei values, die man angeben kann: none, manual und auto. In der Praxis sähe das so aus:

1
2
3
4
5
6

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

Dabei ist es wichtig, dass das CSS weiß, in welcher Sprache hier getrennt werden soll. Also gibt man dem Dokument logischerweise eine Sprache mit. Eine Übersicht der Sprachkürzel und Deklarationen des HTML- bzw. XML-Dokuments, gibt es hier.

Textbaustein ohne und mit der hyphens-Methode

Alternative

Wer es auf allen Browsern haben will, der kann mit einer “soften” Silbentrennung nachhelfen. Dafür bedient man sich einfach dem HTML-Entity ­ und platziert diesen im entsprechenden Wort:

1

Fußboden­schleif­maschinen­verleih

Das sieht im Code nicht gut aus, hat aber keine Auswirkungen auf die Außenansicht. Auch werden Texte ganz normal kopiert. Ich habe das bei meinem Portfolio so angewandt und werde diese dann entfernen, sobald der Browser-Support auch Chrome erreicht hat. Einen Tod muss man ja sterben.

Tweet