Silbentrennung mit Javascript
Die WCAG 2 fordert eine Skalierbarkeit der Schriften um 200 Prozent. In meinem letzten Beitrag habe ich schon auf die möglichen gestalterischen Probleme hingewiesen. Gerade im Bereich der Navigation, kann es bei längen Wörtern leicht zu unschönen Überlappungen einzelner Bereiche kommen.
Im englischsprachigen Raum ist diese Forderung weniger problematisch als im Deutschen. Englische Wörter sind in der Regel einfach deutlich kürzer. Wörter wie zum Beispiel „Behindertengleichstellungsgesetz“ gibt es kaum.
Um lange Wörter umzubrechen benötigt man das HTML Sonderzeichen Der Browser erkennt daran, dass er an dieser Stelle umbrechen kann, wenn es nötig wird. Bis dato war der Einsatz von wenig sinnvoll, weil Firefox bis zur Version 3 nichts damit anfangen konnte. Aber das hat sich ein Glück jetzt geändert.
Innerhalb von Contentmagementsystemen ist es häufig so, dass aus Sicherheitsgründen jeglicher HTML- Code aus Texteingabefeldern entfernt wird.
Möchte man zum Beispiel in Joomla einen link erzeugen, steht im Backend ein Texteingabefeld zur Verfügung, dass man mit dem Linktext bestückt. Bindet man zusätzlich HTML-Code ein, wird dieser vom System entfernt.
Ob diese Vorgehensweise gut oder schlecht ist, möchte ich hier nicht diskutieren. Fakt ist jedoch, dass ich im Moment keinen Einfluss auf den Umbruch einzelner Begriffe habe.
An dieser Stelle kann jedoch Javscript einspringen und zur Laufzeit Zeilenumbrüche generieren.
Das Hyphenator- Skript auf der Basis von Frank M. Liangs open office Algorithmus leistet hier gute Dienste und ist relativ einfach in jede Webseite zu integrieren. Dennoch sollte man sich im Klaren sein, dass es im Firefox kleiner Version 3 nicht funktioniert, da es auch auf den Einsatz von zurückgreift.
Das Skript wird im Dokumentenkopf eingebunden und konfiguriert. Seitenbereiche, in denen das Skript zum Einsatz kommen soll, erhalten eine bestimmte CSS- Klasse über die das Script gesteuert wird. Eigentlich einfach, oder?
Ein Beispiel findet Ihr hier oder Ihr schaut direkt auf der Seite der Entwickler.