Geschrieben von Christian Schnettelker

Schlagwörter:

Webdesign-Tipps 7: Silbentrennung im Browser

Im Mai 2014 hatte ich im Rahmen des Artikels „Schlechtes Deutsch“ bereits einmal die Worttrennung nach Silben angesprochen. Bisher war eine solche Trennung für mich hinsichtlich Responsive Webdesign tabu, da man ja nie sagen kann, wie breit der Textbereich letztlich ist.

Kürzlich wurde mir bei einem Ausflug zu anderen Webseiten bewusst, dass schlaue Köpfen inzwischen eine Möglichkeit ersonnen haben, die Worttrennung per „Stylesheet“ zu automatisieren. Diese praktische Funktion steht in modernen Bowsern über die CSS3-Eigenschaft „hyphens“ zur Verfügung.

In den Beispielen im Netz wird der Code meist wiefolgt angewendet:

body { -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

Von dieser „globalen“ Lösung nahm ich allerdings relativ schnell Abstand, da die Silbentrennung für body bei jeder Textstelle einer Webseite erfolgt, also auch z.B. für alle Überschriften. In meinem Webdesign-Blog beispielsweise würde dann die Titelzeile „Web & Webdesign Blog“ uU als „Web & Web- design Blog“ getrennt, was ich aber vermeiden möchte.

Auch die Trennung in Überschriften sieht meist nicht so gut aus, daher setze ich persönlich die Eigenschaft momentan nur für den Haupttext, z.B. so:

#content .content-wrapper .maintext p { -webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Das Ganze bringt zwar für die Suchmaschinenoptimierung gar nichts, das Textbild sieht damit mE nun schöner und professioneller aus. Ein weiterer großer Vorteil ist hinsichtlich Text auf den kleinen Displays eines Smartphones zu erkennen, hier wird der knappe Platz durch die Worttrennung besser ausgenutzt.

Die berühmten Haken

Die Sache halt allerdings (wie immer) einen Haken, hier sogar drei:

  • Erstens wird die Silbentrennung bisher nur von aktuellen Versionen des Firefox, IE und Safari unterstützt, Chrome hinkt hier hinterher und kann damit bis dato gar nichts anfangen. Das ist so ziemlich das erste Mal, dass ich Google rügen muss, denn sonst ist Chrome mein erklärter Lieblingsbrowser. Die fehlende Unterstützung ist allerdings dann auch nicht negativ, es bleibt einfach alles, wie es ist.
  • Zweitens ist mir aufgefallen, dass exotische Wörter manchmal gar nicht getrennt werden, hier versagt der Algorithmus noch, was aber zu verkraften ist. Manchmal kommt es auch zu unschönen Trennungen, z.B. am Textende, wo es optisch besser aussehen würde, das Wort einfach ungetrennt in die nächste Zeile zu übernehmen, aber auch das ist zu verschmerzen.
  • Drittens müssen leider nach wie vor sogenannte „Browser-Präfixe“ für Webkit, Microsoft und Mozilla verwendet werden, für die beispielsweise der W3C CSS Validierungsdienst eine Warnung „Unbekannte Erweiterung des Herstellers“ auswirft.

Natürlich muss, damit die Trennung stimmt, die Sprache korrekt als HTML-Language Code angegeben sein, was allerdings bei professionellen Webseiten selbstverständlich sein sollte.

Unterm‘ Strich sehen Sie mich begeistert: das Textbild ist schöner, der Text insgesamt besser lesbar und die Anzeige wird in keinster Art und Weise ausgebremst. Daher kann ich den (überlegten) Einsatz von „hyphens“ uneingeschränkt empfehlen.

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Kommentare

Kommentare

Kommentar schreiben

Allgemeiner Hinweis: Bitte kommentieren Sie zum Thema unter Vermeidung von Allgemeinplätzen. Eine gute Rechtschreibung sollte selbstverständlich sein.

Hinweis für SEO-Kommentarschreiber: alle Links sind nofollow und steigern Eure Linkpopularität nicht. Offensichtliche SEO-Kommentare werden nicht oder in anonymisierter Form veröffentlicht.