Mathias Schäfer (molily): Tipps & Tricks: Typographische Korrekturen

Artikel von Manuel Strehl über das automatische Ersetzen von Sonderzeichen mittels JavaScript

Bei der Gestaltung von Websites legen Webautoren und Designer zunehmend Wert auf die Mikrotypographie, darunter die Verwendung von speziellen, ansehnlichen Satzzeichen. Insbesondere möchten Autoren "Zollzeichen", welche als Anführungszeichen zweckentfremdet werden, durch typographisch korrekte Anführungszeichen ersetzen. Dabei ergeben sich einige Hindernisse:

  • Die Sonderzeichen sind in der Regel nicht einfach über die Tastatur einzugeben, sofern kein spezielles Tastaturlayout eingesetzt wird oder das Betriebssystem von Haus aus entsprechende Tastenkombinationen anbietet (wie etwa MacOS X).
  • Die Sonderzeichen sind nicht im Zeichenvorrat der üblichen Zeichenkodierung ISO-8859-1 vorhanden.

In der Regel umgeht man beide Probleme, indem man im HTML-Code die passenden Zeichen-Entity-Referenzen anstelle der Sonderzeichen eingibt, zum Beispiel „ für das linke doppelte Anführungszeichen. SELFHTML bietet dazu eine Liste aller Zeichen-Entities in HTML. Eine andere Lösung ist die Benutzung eines Unicode-fähigen Editor und eines Zusatzprogrammes, mit dem sich das Zeichen finden, kopieren und einfügen lässt – unter Windows etwa die »Zeichentabelle«, unter MacOS die »Zeichenpalette« und so weiter. Im Web finden sich ebenfalls diverse Unicode-Datenbanken. Komfortable Editoren integrieren solche Funktionen bereits, oder es gibt entsprechende Plugins. Ähnliches gilt auch die Content-Mangement-Systeme.

Für den Fall, dass diese Lösungswege verstellt sind, bietet Manuel Strehl ein JavaScript an, welches ein fertiges Dokument im Moment der Darstellung im Browser automatisch korrigiert:

Tipps und Tricks: Typographische Korrekturen mit JavaScript

Das Script verwendet beispielhaft verschiedene JavaScript-Techniken, die es zu einem Studienobjekt machen:

  • Das Script schaltet sich automatisch nach dem fertigen Laden des Dokuments ein. Dabei findet die verbreitete, robuste addLoadEvent-Funktion Anwendung. Alternativ können neuere Methoden verwendet werden, um auf den DOM-Knotenbaum zuzugreifen, bevor alle eingebundenen Dateien geladen sind – Stichwort DOMContentLoaded.
  • Fortgeschrittene Reguläre Ausdrücke regeln das intelligente Ersetzen der Zeichen.
  • Obwohl das Script ASCII-kodiert ist, sind darin trotzdem über die Umschreibung \uXXXX Strings mit beliebigen Unicode-Zeichen notiert.
  • Das Script benutzt das bisher recht unbekannte DOM-Modul Traversal, um bestimmte Knoten zu finden und zu durchlaufen. Das TreeWalker-Interface wird bereits von verschiedenen Browsern unterstützt – wenn zum Teil auch nicht ganz korrekt.

Korrekturen und Kommentare zum Artikel werden gerne unter molily@selfhtml.org entgegengenommen.