Grafische Überschriften ohne Javascript und Flash

Immer häufiger kommt der Wunsch auf, auch im Web die typografischen Freiheiten aus dem Printbereich zu haben. Ohne Hilfsmittel ist die Auswahl jedoch eher begrenzt.

Für einzelne Überschriften eignen sich Image-Replacement-Techniken wie die «Gilder-/Levin-» oder «Phark-Methode», welche sich einfach mit CSS und (X)HTML realisieren lassen.
Sollen die grafischen Überschriften jedoch über die gesamte Website genutzt werden, müssen diese Methoden automatisiert werden. Hier kommen «Dynamic Text Replacement»-Scripte zum Einsatz.
Neben Flash- und Javascript-Lösungen gibt es mittlerweile reine CSS/PHP-Scripte. Diese haben den Vorteil, dass Sie keine technischen Anforderungen an den Betrachter stellen.
«pcdtr» bietet alles, was das Herz begehrt:

  • individuelle Schriftfamilie
  • Schriftgrösse
  • Schriftfarbe
  • Hintergrundfarbe
  • Hover-Zustand
  • Textdekoration bei Links
  • Text-Transformation

Bis vor kurzem gab es noch einen grossen Nachteil. Akzeptierte der Besucher der Website keine Cookies, wurden keine Überschriften angezeigt.
Nach einem Bugreport an den Entwickler dauerte es nicht lange bis zur Version 1.6. Diese behebte diesen «Fehler» und zeigt bei deaktivierten Cookies die alternativ eingetragene Schriftart an. Mehr noch: mit der neuen Version ist auch die Vergabe von Klassen möglich. Ab Version 1.8 werden sämtliche CSS-Selektoren unterstützt. Damit vereinfacht sich der Umgang mit typografischen Schriften noch einmal um ein gutes Stück.

Achtung, Fertig …

Die Installation von «pcdtr» gestaltet sich äusserst einfach. Als Erstes gilt es, sich die neuste Version zu besorgen.
Nachdem der Ordner «pcdtr» heraufgeladen wurde, muss die PHP-Datei im eigenen Layout integriert werden:

In der ersten Zeile mit

<?php include 'pcdtr/php/class.php'; ?>

und am Ende des Dokumentes mit

<?php ob_end_flush(); ?>

Danach die CSS-Datei mit

<link href="pcdtr/styles.css" rel="stylesheet" type="text/css" />

ins Layout eintragen.

Je nachdem, wo der Ordner «pcdtr» hochgeladen wurde, muss die erste Zeile sowie die Datei php/class.php (ab Zeile 20) angepasst werden.
Das ist dann schon alles.

… Los!

Nun kann die gewünschte Truetype- oder Opentype-Schrift ins dtr-Verzeichnis hochgeladen und in der CSS-Datei eingetragen werden. Aber Achtung: Die Schriftfamilie muss mit dem Dateinamen der Schrift übereinstimmen. Ebenso wichtig ist es, die Schriftgrösse in Punkt zu Definieren. Ausserdem gilt es zu beachten, dass viele Gratisschriften von amerikanischen Websites keine Umlaute beinhalten.
Falls statt der Überschrift die Meldung «Error: The server could not create this heading image» erscheint, muss die Datei image.php noch angepasst werden.

Geschrieben von

Als typografischer Gestalter in der eigenen Grafikagentur erzähle ich aus meinem Agenturleben. Neue Apps welche mir den Alltag erleichtern können schaue ich mir immer wieder gerne an. Zur Entspannung geniesse ich die Zeit mit meinem Big Green Egg® und erzähle dazu gerne Grillgeschichten hier oder in der Community Green Grillers.

Kommentar verfassen

Close

Entdecke mehr von aportmann

Jetzt abonnieren, um weiterzulesen und auf das gesamte Archiv zuzugreifen.

Weiterlesen