Goo-
gle

Lange Wörter machen auf Webseiten häufig Probleme, weil die Silben standardmäßig nicht vom Browser getrennt werden. Dadurch entstehen entweder Zeilenumbrüche mit sehr großen „Lücken“ oder das lange Wort wird einfach über die Container-Begrenzung hinaus geschrieben. Heute möchte ich euch einige einige Möglichkeiten aufzeigen, wie man trotzdem eine Silbentrennung realisieren kann.

Via HTML

Ich muss gestehen, dass auch ich erst kürzlich über den bedingten Zeilenumbruch mittels HTML-Befehl „SHY“ gestoßen bin.

Das ist ein SUPER­LANGESWORT

Dieses besagt, dass der Browser die Möglichkeit hat, das Wort bei Bedarf an der mit shy markierten Stelle umzubrechen. Der Browser wird an der betreffenden Stelle den ganz normalen Trennstrich einfügen. Im Netz habe ich ein paar Experimente gefunden, die besagen, dass Google z.b.

key­word

als keyword erkennt, allerdings konnte ich keine konkrete Aussage von Google selbst finden. Bei den anderen großen Suchmaschinen ist es genauso. Einige kleine Suchmaschinen haben aber trotzdem möglicherweise Probleme mit diesem eher selten vorkommenden Befehl.

Vorteile

  • kinderleichter Einbau an jeder beliebigen Stelle durch den Nutzer
  • keine Gefahr der automatisierten Falschtrennung

Nachteile

  • Jede mögliche Trennung muss manuell im Quelltext eingetragen werden => großer Arbeitsaufwand
  • nicht alle Browser unterstützen shy

Via JavaScript

Ich habe die hyphenator-JavaScript-Klasse getestet und muss sagen, dass ich begeistert bin! Um die hyphenator-JavaScript-Klasse zu verwenden müssen die JS-Dateien hochgeladen werden und anschließend folgender Code im HEAD-Bereich eingefügt werden:

        
        
        	Hyphenator.config({
        		displaytogglebox : true,
        		minwordlength : 4
        	});
        	Hyphenator.run();
        

Danach kann man jeden beliebigen Text zur Silbentrennung aktivieren, indem man den Text in einen Container mit der Klasse „hyphenate“. Über den Parameter lang kann man die Sprache des Textes auswählen. Dadurch ist auch möglich Texte aus verschiedenen Sprachen auf einer Seite zu verwenden.

SEHRLANGESWORTDASUNBEDINGTGETRENNTWERDENMUSS

Vorteile

  • automatische Worttrennung (es ist kein Eingriff im Text notwendig)
  • es werden viele Sprachen unterstützt (jede Sprache hat einen anderen Aufbau bei Worttrennungen)
  • der Text steht im normalen Klartext im HTML-Code, d.h. auf Google & Co hat diese Variante keine Auswirkungen

Nachteil

  • aktives JavaScript ist für das Feature der Silbentrennung notwendig (falls JS deaktiviert ist, wird der Text normal dargestellt)
  • es sind zusätzliche JS-Dateien notwendig
    • 1 Klassendatei (unkomprimiert: 65Kb)
    • 1 Datei pro verwendeter Sprache (z.B. deutsch: rund 80Kb)
  • Falls Fehler bei der Trennung auftreten (ich konnte keine Fehler finden), ist ein manueller Eingriff nur in Verbindung mit einem Eingriff in die umfangreiche JS-Klasse möglich