Eigene Typo im Web dank sIFR

Da ham‘ wirs mal wieder – eine neue seltsame Buchstabenkombination: sIFR! Das ganze steht in Langform für Scalable Inman Flash Replacement, und beschreibt eine interessante Technik mit der individuellere Typografie fern der ausgetrampelten Pfade von Verdana, Arial und Co möglich gemacht wird.
Neben sIFR wird derzeit zumeist auf das serverseitige Rendern von Schriften in JPGs oder andere Bildformate gesetzt um im Web auch mal andere Buchstaben als die der Systemshriften zu sehen – die gleiche Technik setze ich derzeit auch noch für meine Headlines ein.
Doch sIFR ist anders: hier wird durch eine Kombination von Javascript CSS und Flash der zu ersetztende HTML-Text dynamisch durch eine Flash-Datei ersetzt. Der Vorteil dabei ist natürlich, daß die SWF’s vom Datenumfang meist kleiner sind als JPGs und daß man die Flash-Texte auch mit dem Cursor markieren und sogar kopieren kann. Es erscheint fast etwas magisch wenn man sich das einmal anschaut und man fragt sich, ob man denn die Schrift die einem vorgesetzt hat nicht doch installiert hat. Ohne Javascript oder Flash sieht der Besucher der Seite die Seite ganz normal ohne individuelle Extras.

Zunächst zu der Image Render Technik

Die meisten etwas größeren Webseiten werden inzwischen ja mit einem Content-Management System mit Inhalten gefüttert. Eine sehr feine Sache, braucht man doch weder Spezialsoftware noch besondere Kenntnisse um Inhalte in eine Website einzupflegen. Es ist je nach CMS System fast so einfach eine Email mit GMX zu schreiben – wenn nicht gar einfacher –, wie einen neuen Beitrag auf eine Internetseite zu stellen. Der Weblog-Hype zeigt uns nur zu gut, wie einfach es dank eines einfachen CMS Systems sein kann, und jede Weblog-Software ist ja eigentlich nichts anderes als ein kleine CMS.
Der große Nachteil ist jedoch, daß es CMS Systeme (ich glaube fast immer) reine HTML-Seiten erstellen, in denen man trotz moderner CSS-Technik ja nur die Schriftem verwenden kann, die auch auf dem Rechner des Surfenden installiert sind, eben meist Verdana, Arial, Times und Co. Um individuelle Typografie in der Schrift der Wahl auf eine Internetseite zu bekommen ist es notwendig diese in Form von Pixelbildchen zu erstellen, also im klassischen Fall Photoshop zu öffnen, und ein entsprechendes JPG o.ä. zu erstellen, welches anschließend auf den Server gespielt wird. Das ist jedoch für jede X-Beliebige Headline einer Internetseite dann doch eine Menge Handarbeit, und man hat sich oft darauf beschränkt die Navigationspunkte oder andere eher feste Bestandteile einer Internetseite mit individuellerer Typografie zu versehen.

Die Image-Render-Technik hat hier Abhilfe geschaffen, denn dank entsprechender PHP Module ist der Server auf dem die Seite liegt dazu in der Lage Texte in ihm zur Verfügung gestellten TrueType Schriften zu schreiben und ein Pixelbild auszuspucken welches anschließend anstelle der gewöhnlichen HTML-Headline dargestellt wird. Sinnvollerweise wird das Bild mit einem Alt-Tag versehen, damit auch Screenreader, Google u.a. die Headline lesen können. Das alles geschiet automatisch im Hintergrund ohne daß der Schreiberling der seine Beiträge auf die Seite stellt seinen Finger krumm machen müsste. Schon eine wirklich feine Geschichte. Das gleiche PHP-Modul sorgt übrigends auch auf vielen Webseiten dafür kleine Vorschaubildchen von hochgeladenen Fotos zu erstellen – hier auf 72Quadrat ürbigends auch.

Ich finde jedoch schade daß man es der Seite anmerkt, daß einem eigentlich ein Bild vorgesetzt wurde. Man kann den Text mit dem Cursor einfach nicht mehr markieren, und für jeden Rollover-Effekt o.ä. wird ein neues Bild benötigt. Das kann einen schwachen Server schon schnell in die Knie zwingen.

Und nun sIFR

Bei sIFR schaut es ganz anders aus. Hier wird die Typo nicht in Form von Bildern dargestellt sondern mithilfe von Flash, der Einbau der Flash-Files geschiet mit einem wundersamen Javascript, welches die Textelemente die in einer bestimmten Typo gesetzt werden sollen, durch Flashelemente ersetzt. Wohlgemerkt, die Seite bleibt im Grunde genommen ganz klassisches HTML mit ganz normaler Typografie, nur werden durch das Javascript nach dem Laden der Seite eben bestimmte HTML-Stücke durch Flash ersetzt. Natürlich checkt das Javascript zunächst ob der Surfer überhaupt Flash hat, doch das ist inzwichen in wohl 90% der Fälle gegeben, und wenn Javascript ausgeschaltet wurde, wird die Seite schlicht als ganz normale HTML-Seite dargestellt. Die Seite bleibt also barrierefrei und ist auch von Google und Co komplett lesbar – eine schöne Sache!
Ganz Nebenbei hat Flash aber noch zwei besondere Feinheiten im Vergleich zu Pixelbildchen zu bieten:

  • Kleine Datenmengen dank Vektoren
  • Auswählbare und kopierbare Typo

Der erste Vorteil liegt auf der Hand, denn JPG’s und GIF’s verkleinern den Pixelhaufen zwar schon ganz gut, doch funktioniert dies insbesondere mit weichgezeichneten Antialias-Fonts nicht besonders gut. GIF’s mögen es einfach gern, wenn das Bild aus möglichst wenigen Farben mit möglichst großen zusammenhängenden Flächen besteht – was bei Typografie oft nicht ganz der Fall ist (Ausnahme die ehemals trendigen Pixelschriften). Tja und JPG komprimiert zwar großartig zeigt jedoch bei scharfen Konturen und Kontrasten leicht seine hässliche Seite in Form von blockigen Artefakten auf der Typo.
Da eine Schrift aber eigentlich aus Vektoren besteht und als Informationsmenge eigentlich nur die notwendigen Vektorinformationen aller Buchstaben benötigt, ist es mit Flash ein leichtes Schrift auf das notwendige Minimum herunterzurechnen, und schließlich müssen diese Informationen auch nur ein einziges Mal geladen werden, anschließend muß nur noch die Information geladen werden welche Buchstaben denn nun aneinander gereiht werden sollen, fertig. Klar bei sIFR kommen da noch ein paar Zeilen Javascript hinzu, doch auch die werden ja nur einmal geladen.

Der zweite Vorteil ist aber noch bemerkenswerter, und hat zumindest für mich schon etwas von einem WOW-Effekt. Ich habe eigentlich immer einfach mal auf einer Seite ein bissel mit dem Cursor herummarkiert, um zu sehen was denn alles in Wirklichkeit Bildelement oder Flash auf einer Seite ist, doch man kann ja in Flash Text auch auswehlbar machen. Wenn man über eine Seite mit sIFR Typo mit dem Cursor geht glaubt man seinen Augen kaum: Alles ist auswählbar, in die Zwischenablage kopierbar und doch wird einem eine Schrift vorgesetzt, die man wohl nicht installiert hat – Erstaunlich.

Das ganze ist dabei auch noch komplett W3C Valid und ordentliches HTML

Nachteile?

Doch bevor jetzt gleich allzu doll gejubelt wird, sIFR ist tatsächlich nicht die Superlösung schlechthin es gibt noch ein paar kleinere Problemchen und Bugs bei sIFR.

  • Das Javascript ist schnell aber nicht unsichtbar
  • Das Kerning der Typo lässt sich nicht einstellen
  • Die sIFR-Texte können nicht per Textzoom (Beisp.: Apfel und +) skaliert werden.
  • Text und sIFR-Überschrift lassen sich nicht gemeinsam markieren.
  • Bei Layouts mit variabler Breite ändern sich die Flash-Objekte nicht mit, wenn man die Größe des Fensters ändert. Auch hier werden die sIFR Texte erst nach einem Reload der Seite angepasst.
  • Wer z.B. das nette Lightbox-Javascript verwendet um seine Bilder darzustellen, wird sich mit ein paar Problemen herumschlagen müssen, da die Flash-Inhalte weiter normal sichtbar bleiben und nicht weggedimmt werden.
  • Verlinkte sIFR-Texte können nicht per Kontextmenü (rechte Maustaste) kopiert oder anderweitig verwendet werden.
  • Überschriften erscheinen erst deutlich nach dem Rest des Inhalts, und manchmal kann es schon ne Weile dauern, bis die ganze Seite geladen wurde. (Anmerkung: Das kann man aber wohl mit sIFR 2.0 inzwischen ändern, so daß zunächst der HTML Text angezeigt wird.
  • User-Stylesheets haben keinen Einfluss auf die sIFR-Texte: Sehbehinderte surfen häufig mit inversen Farben.
  • Wer mit abgeschaltenem CSS, aber mit JavaScript surft, bekommt die Überschriften doppelt zu sehen (Eher unwahrscheinlich).

Eine Frage des Copyrights

Selbstverständlich sollte der Nutzer von sIFR darauf achten, dass er auch die Schrift die er für sIFR verwenden will entsprechend nutzen darf. Hier gibt es ein paar Dinge zu beachten. Im Zweifel hilft hier zum einen meist ein Blick in die Readme Datei die der Schrift beiligt, oder eine Nachfrage beim Fontshop oder direkt bei dem Hersteller der Schrift. Es ist nämlich nicht so, daß man jede Schrift die man erworben hat, auch für diesen Zweck verwenden darf.

Hintergrundinfos zu sIFR gefällig?

Um mehr über sIFR zu erfahren habe ich im folgenden ein paar Links zusammen gestellt. Es gibt im Internet dutzende an Informationsquellen zu sIFR, einfach mal bei Google nachschauen.

sIFR und WordPress? Wie gehts das?

Da war ich dann wirklich erstaunt. Denn für WordPress gibt es ein feines Plugin mit dem man sIFR unheimlich einfach in sein WordPress Weblog integrieren kann. Es werden jedoch nur die beiden Standard-Schriften beigefügt, doch wenn man Flash MX 2004 hat, kann man sich ja auch seine eigenen Schriften für sIFR erstellen. Allerdings sollte man auf die Lizenzrechte der Schriften achten. Ein Tutorial wie man das macht gibt’s natürlich auch schon längst.

Das Plugin für WordPress heißt CG-FlashyTitles und funktioniert wie schon gesagt ausgesprochen einfach. Zumindest hatte ich keinerlei Probleme bei der Installation. Das Plugin lässt sich im Admin-Bereich von Worpress sehr gut einstellen, und es ist möglich verschiedene Selektoren für unterschiedliche „Typo-Ersetzungs-Aufgaben“ anzulegen. Die Sache funktioniert wie sIFR sonst auch auf folgende Weise:

1. Selektor wählen
Man wählt einen HTML Tag dessen Text durch sIFR Text ersetzt werden soll aus. Wenn man beispielsweise den Selektor H2 wählt werden alle Headline-Texte dieser Stufe durch einen sIFR Text ersetzt. Die Schriftgrößenangaben stammen aus der üblichen CSS Datei, in der man ja sicherlich bereits eine Größenangabe für die Headlines angegeben hat. Man kann aber auch ein wenig kombinieren und durch die Wahl eines Selektors wie #content h2 nur die Headlines ersetzen, die sich in dem Content-Div befinden. Weitere Experimente habe ich bisher nich nicht durchgeführt, aber ich muß eingestehen, daß ich das schon für eine ausgesprochen interessante Sache halte, die ich sicherlich auch bald auf meiner Internetseite bringen werde.

2. Schrift auswählen
Direkt nach der Installation sind nur zwei Schriften vorhanden, doch man kann sich ja auch seine eigene Erstellen (siehe dieses Tutorial) oder auch eine der sIFR Fonts von sifrfonts.com (leider offline) herunterladen, allerdings sind die eher von minderer Qualität.

3. Farben und weitere Einstellungen wählen
Nun wählt man die Farben für die Typo aus, wobei der Hintergrund auch transparent sein kann, was sich zwar interessant anhört, doch gibt es bekanntlich einige Probleme mit transparenten SWFs. Neben schwacher Performance funktioniert dies schlicht in manchen Browsern überhaupt nicht. Unter OS9 funktioniert es nicht einmal im Wamcom Mozilla, der sicherlich der modernste OS9 Browser ist den man kriegen kann. Stattdessen wird ein besonders hässlicher grüner Hintergrund in Wamcom dargestellt.

4. Fertig
Ja, das war’s tatsächlich. Man muß keinerlei Änderungen an seinem WordPress-Template vornehmen, da ja einfach die HTML Tags durch das sIFR Javascript ersetzt werden. Nun kann man noch ein paar andere sIFR Selectoren einrichten um noch mehr Typo auf der Seite durch sIFR Texte zu ersetzen, doch sollte man es dabei nicht allzu bunt treiben. Weniger ist bei sIFR wirklich mehr!