Frisch notiert!

Die neusten Artikel aus unserem Blog.

Automatische Silbentrennung im Internet? Dank Hyphenator kein Problem!

Zuletzt aktualisiert am 19/08/2016 von Gino Cremer
12 Kommentare
Netzwelt, Webdesign
/ Netzwelt / Webdesign / 12

Haben Sie es bemerkt? Auch unser Blog arbeitet mit einer automatischen der deutschen Sprache angepassten Silbentrennung. Nein, per Hand wurden alle Trennungen gewiss nicht gesetzt. Hierbei setzen wir auf „Hyphenator“, einer Javascript-Anwendung, die browserübergreifend Silben sauber trennt.

Schielten Webautoren noch vor wenigen Jahren neidisch auf Print-Designer, die problemlos – ja sogar gezwungenermaßen – zur Silbentrennung griffen, ist eine Trennung der Silben im Web weiterhin eine Seltenheit. Vorallem die deutsche Rechtschreibung stellt oftmals eine Hürde dar. Sauber zu trennen ist eine Kunst für sich.

Ist Hyphenator als Javascript nicht problematisch?

Nein. Der Vorteil der eingebundenen „hypenator.js“-Datei bzw. deren Funktionsweise ist, dass der Quellcode unberührt bleibt. So bleibt die Barrierefreiheit gewahrt und auch Suchmaschinen können den Quellcode problemlos durchforsten und Inhalte indexieren.

Vorteile und Nachteile von Hyphenator

Eigentliche Nachteile sind in diesem Zusammenhang nicht zu nennen. Ausser, dass wirklich typographische Sonderfälle nicht berücksichtigt werden können und ganz alte Browser die Silben nicht trennen. Aus der Not macht Hyphenator in diesem Falle eine Tugend: Es ist schlichtweg egal! Wer einen alten Browser einsetzt, bekommt die Website ganz normal ohne Silbentrennung angezeigt. Punkt. Und dank der stetigen Weiterentwicklung, profitieren ganz moderne Browser zudem von der zukunftsträchtigen CSS3-Silbentrennung, die in ein paar Jahren Einzug finden soll.

Ein weiteres Plus ist die quelloffene LGPL-Lizenz: Dadurch ist es jedem Webdesigner möglich, Hyphenator selber auf seiner Website einzusetzen.

Sie fanden diesen Beitrag nützlich? Ich freue mich über Kritik, Anregungen und Kommentare und über einen Direkt-Link zu meinem Beitrag.

Hyphenator-Website: http://code.google.com/p/hyphenator/

Wer sich für das Thema „Typographie im Web“ interessiert, kann folgenden Blogbeitrag konsultieren: http://www.elmastudio.de/webdesign/lange-texte-mit-typografischen-tricks-auflockern/

Gino Cremer

Ich bin Geschäftsführer der auf Weblösungen spezialisierten Agentur Pixelbar aus dem belgischen Eupen. Ich habe langjährige Erfahrung mit CMS-basierten Kundenprojekten, vornehmlich auf WordPress-Basis und bin ein Webdesigner der ersten Stunde. Daneben arbeite ich auch als Dozent und Berater am WIFI Wien im Bereich Social Media und Webdesign.

Weitere Beiträge von gino anzeigen

12 Kommentare

  1. Hallo, Gino – habe deinen Link bei Elmastudio gesehen ist recht interessant – da ich selber auch eher auf mediaquerries gehe. Bisher zumindest

    Ps.: der link zur Hyphenator-Website: nicht correkt

    grüsse nach Eupen

    1. Hallo Cythux! Vielen Dank für dein positives Feedback. Toll, dass du dem Link gefolgt bist. Ich habe den Link soeben korrigiert, danke für den Hinweis. Ich denke beide Ansätze haben Ihre Vor- und Nachteile, da muss man von Fall zu Fall entscheiden. Es ist klar, dass eine reine Javascript Lösung mit Restriktionen verbunden ist. Allerdings ist selber eine CSS-Lösung mit Nachteilen verbunden. Früher oder später wird sich natürlich reines CSS durchsetzen (Wink mit dem Zaunpfahl nach Redmond).

    1. Hallo Klaus, danke für dein Feedback. Das Script ist in der Tat recht klein und kann daher durchaus verwendet werden, zumal es nicht aktiv auf den Quellcode Einfluss nimmt und diesen „verschandelt“. Viel Erfolg, vielleicht kannst du beizeiten deine Erfahrungen schildern.

    1. Hallo Hody, ich denke da müsstest Du dich schon an den Entwickler selber wenden. Schau mal ob JavaScript-Fehler ausgegeben werden wenn das Plugin im Einsatz ist. Idealerweise sollte das JavaScript im Footer der Seite(ganz unten) geladen werden, um nicht den Ladevorgang der Seite unnötig zu verlangsamen. Vielleicht daher auch mal prüfen wo das JavaScript ausgeführt wird im Quellcode…
      Wichtig ist auch dass ganz oben das „Language Attribut“ im HTML-Start Tag angegeben worden ist, zb , ansonsten kann es sein dass Hyphenator die Sprache der Seite nicht korrekt erkennt und ins „Stottern“ gerät (sollte dann zwar einen Fehler ausgeben aber kann auch sein dass das Script dann streikt). Ansonsten effektiv direkt an den Entwickler wenden…

    1. Hallo Hody, danke für dein Feedback. Also Hyphenator ist auch super einfach ohne Plugin zu implementieren. Im Prinzip besteht das ja nur aus einer Javascript-Datei, die eingebunden werden muss. Ruft man beim Seitenaufruf das Script auf, kümmert sich das Hyphenator-Javascript um alles andere. Würde daher manuell ohne Plugin einbinden und gar nicht erst auf ein Plugin-Update warten.

    1. Hallo Hody, unter http://code.google.com/p/hyphenator/ findest du das entsprechende Javascript. Der genaue Download-Link lautet: http://code.google.com/p/hyphenator/downloads/list

      Hier kannst du ein Beispiel von den Entwicklern sehen und anhand des Quellcodes nachvollziehen wie es eingebunden wird: http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/WorkingExample.html

      Im Prinzip ist es einfach. Zuerst muss das Javascript eingebunden und aufgerufen werden und anschließend den jeweiligen HTML-Elementen die Class „hyphenate“ zugewiesen werden. Fertig.

      PS: Immer dem HTML-Tag oben in deiner Seite ein Sprachenattribut mitteilen, z.B.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert