Das ganze beruht darauf, dass Textabschnitte, die z. B. als Überschrift <h1> ausgezeichnet werden, beim Aufbau der Seite automatisch durch einen dynamischen Flash-Film ersetzt werden, in den die gewünschte Schrift eingebettet ist.

Der Release Candidate 4 von sIFR 2.0 (sprich: »siffer«) steht auf Davidsons Website zum kostenlosen Download bereit.

Nach einem kurzen Test und der Inspizierung einiger Websites, die die neue Technik bereits anwenden, kann ich zunächst ein sehr positives Fazit ziehen: Endlich können Web-Designern für Überschriften und kurze Teaser-Texte die Schrift ihrer Wahl einsetzen. Womöglich die Hausschrift des Kunden? Oder einen krassen Grunge-Font? Und das alles vollautomatisch, sogar über mehrere Zeilen hinweg und ohne GIF-Bilder oder seltsamen, browserspezifischen Techniken.

Wie funktioniert das?

sIFR (scalable Inman Flash Replacement) ist eine Kombination aus mehreren Web-Technologien. Die Grundlage ist ein konventionelles (X)HTML-File, welches die üblichen CSS-Selektoren zur Schriftformatierung enthält, jedoch zusätzlich einige spezielle CSS-Selektoren, mit denen bei gelungenem Flash-Replacement die alten Überschriften unsichtbar gemacht werden. Natürlich können diese Styles auch in ein externes File ausgelagert werden.

Des Weiteren wird eine externe JavaScript-Datei (»sifr.js«) eingebunden und am Ende des HTML-MarkUps noch einmal ein Abschnitt mit weiteren JavaScript-Befehlen eingefügt, in denen man die Parameter für die neuen Überschriften festlegen kann. Abgerundet wird der Reigen der enthaltenen Dateien durch zwei externe Actionscript-Files (»customize_me.as« und »dont_customize_me.as«).

Der Trick ist folgender: Bei eingeschaltetem Javascript und installiertem Flash-Player 6+ wird sIFR aktiv und ersetzt die definierten HTML-Tags (wie <h1> oder <p id="teaser">) durch die Flash-Schriftenfiles, welche mit dem darzustellenden Text innerhalb der Tags gefüttert werden.

Das eigentliche Rendering der Schriften erledigt folglich Flash. Für jeden verwendeten Font muss eine eigene .swf-Datei angelegt werden. Kinderleicht, denn eine Vorlage in Form einer .fla-Datei (ab Flash 6) wird mitgeliefert. Man öffnet diese, ändert die einzubettende Schrift nach Wunsch, fügt alle benötigten Sonderzeichen hinzu und exportiert das Ganze unter einem sinnigen Namen (z. B. »schmelvetica.swf«).

Der Clou: Alle Module des sIFR-Systems kommunizieren miteinander, nur wenige Parameter müssen statisch angelegt werden. Somit bleibe ich als Web-Designer flexibel, und Änderungen an Text oder Layout sind sofort sichtbar – fast so, als ob ich mit gewöhnlichen HTML-Schriften hantieren würde.

Aber was ist mit der Validität?

Keine Angst, alles wird gut! Das MarkUp ist komplett valide und besteht jeden W3C-Test. Wenn entweder Flash oder JavaScript nicht auffindbar ist, bleibt alles beim alten: HTML-Text, der mittels CSS gestylt wird. Es ist also eine optische Verbesserung für alle, die es nutzen können, aber kein inhaltlicher Nachteil für Flash- oder Javascript-Verweigerer.

Und wie steht’s mit der Kompatibilität?

Zugegeben: Flash ist eine propietäre Technologie. Doch im Gegensatz zu den anderen beiden Versuchen, Fonts in HTML-Dokumente einzubetten, kann fast jeder die Vorteile nutzen. Wir erinnern uns; Bitstream hat seine WebFont-Technologie inzwischen aufgegeben, und Microsoft hatte sowieso niemals vor, seinen @font-face Ansatz auf anderen Browsern als dem IE zu ermöglichen.

Flash und Javascript sind hingegen auf über 80% der heutigen Rechner aktiv, und laut Mike Davidson funktioniert sIFR 2.0 somit auf jedem modernen Browser unter jedem Betriebssystem – Internet Explorer ab 5.0 eingeschlossen, wie schön.

Sind das dann alles Raupkopien? (Nachtrag am 18.2.2005)

Man kommt nun schnell an den Punkt, an dem man sich über mögliche rechtliche Probleme Gedanken macht. Denn wenn ich einen Font in das sIFR-Flash-Format einbette, ist diese Datei ja grundsätzlich überall nutzbar, und jedermann kann sie von meinem Webspace herunterladen. Somit würde man diesen Font praktisch zum Download anbieten – wenn auch nicht direkt als TrueType oder PostScript, sondern quaasi in einem neuen Font-Format, dass dann eben nur in HTML nutzbar ist.

Das alles wäre kein Beinbruch, wenn es nur um Freefonts oder Systemfonts ginge. Doch natürlich lassen sich mit sIFR auch kommerzielle Schriften einbetten, die eigentlich nicht jeder herunterladen und selber einsetzen können soll. Glücklicherweise wurde hierfür eine clevere Lösung gefunden! Beim Erstellen der .swf-Datei kann man nämlich den Einsatz der Schrift auf ganz bestimmte Web-Domains beschränken. Sobald dann jemand versucht, die »raubkopierte« Schrift auf einer anderen Website (einem anderen Server) zu betreiben, verweigert sIFR die Darstellung. Somit ist man auf der sicheren Seite, was den Einsatz von kommerziell vertriebenen Fonts angeht – vorausgesetzt natürlich, man besitzt selber eine Lizenz und der Font ist prinzipiell für die geschützte Einbettung in Flash freigegeben.

Fazit

Ich halte sIFR für einen faszinierenden Ansatz. Die Umsetzung ist so sauber, wie sie nur sein kann: Validierender Code, vergleichsweise einfache Handhabung durch Script-Kommentare, Alternativplan bei Inkompatibilität. Der Entwickler hat sogar daran gedacht, die Buchstaben der Flashüberschriften mit der Maus markierbar zu machen, was ich sehr schätze. Natürlich wird es wieder Meckerer aus dem Lager der Puristen geben, aber ich denke, dass man diese Argumente relativ leicht entkräften kann. Und wenn es doch berechtigte Kritikpunkte gibt: Mr. Davidson arbeitet weiter dran und vielleicht gibt es ja bald schon Version 3.0.

Beispiele von sIFR in der Praxis

• ABCNews.com
• Design by Fire
• jukebo.cx
• Prosper – The Business Magazine
• Je Reinste Onzin
• base-box.de
• Brian Sweeting
• Six Apart

update: Nachteile/Probleme

Einige kluge Menschen haben hier Kommentare zum Thema gemacht. Es folgt eine Liste mit Problemen, die es beim Einsatz von sIFR geben könnte:

• Das Anpassen der Laufweite (letter-spacing) ist nicht möglich. Sehr schade!
• Die sIFR-Texte werden beim Textzoom zunächst nicht mitskaliert, erst nach einem Reload der Seite.
• Text und Überschrift lassen sich nicht mehr gemeinsam markieren.
• Bei Layouts mit variabler Breite ändern sich die Flash-Objekte nicht mit, wenn man die Größe des Fensters ändert.
• Verlinkte sIFR-Texte können nicht per Kontextmenü (rechte Maustaste) kopiert oder anderweitig verwendet werden.
• Überschriften erscheinen erst deutlich nach dem Rest des Inhalts. Bei Einbettung von Flickr-Fotos ist dies besonders unangenehm.
• 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).