siFR bietet als Lösung eine Kombination aus mehreren Web-Technologien. Beim „scalable Inman Flash Replacement“ werden Adobe Flash, JavaScript und CSS auf ein konventionelles (X)HTML-Dokument angewendet. Der typische Ablauf bei einer mit sIFR ausgestatteten Webseite ist folgender:

• Das (X)HTML-Dokument wird normal vom Browser verarbeitet.
• Nach erfolgtem Laden des DOM greift das sIFR-JavaScript ein und ersetzt vorher definierte Elemente (wie z. B. <h1> oder auch <h3 class=“subheader“>) durch einen Flashfilm.
• Dieser Film bekommt per JavaScript den Inhalt des Elements (also den Text) übergeben und stellt ihn in der gewählten, eingebetteten Schriftart dar.

Diese Technik ermöglicht validen Quellcode und selbst wenn entweder Flash oder JavaScript nicht auffindbar sind, gibt es kein Problem: Die Seite wird dann als normales, CSS-gestyltes (X)HTML-Dokument dargestellt. Inzwischen wurde die aktuelle Beta2 von sIFR3 vorgestellt, auf deren Basis nun eine Anleitung zur Integration dieser Technik vorgestellt wird.

Die Bearbeitung und das Exportieren der Flash-Dateien benötigt mindestens Version 8 der Flash IDE (eine Testversion können Sie bei Adobe [1] herunterladen), außerdem den Editor Ihrer Wahl und das aktuelle Release von sIFR [2]. Nach Entpacken des Pakets liegt folgende Ordnerstruktur vor:

• css
• demo
• flash
• js

Das vorliegende JavaScript ist komprimiert, die unkomprimierten Originaldateien liegen in „js/source/“.

Öffnen Sie zunächst den Flashfilm „sifr.fla“ in der Flash IDE. Dort sehen Sie erstmal nur eine weiße Fläche; nach einem Doppelklick darauf sollte der Text „Bold Italic Normal“ angezeigt werden. Markieren Sie den Text und wählen Sie unter „Eigenschaften“ die Schrift Ihrer Wahl aus. Wenn Sie spezielle Zeichen benutzen wollen, zum Beispiel Akzente oder Klammern, müssen Sie diese mittels „Einbetten“-Button zusätzlich in den Flashfilm integrieren.

Jetzt kann der Film unter einem passendem Namen exportiert werden, es bietet sich der Name der Schrift an. Achten Sie beim Exportieren auf folgende Einstellungen:

• Ladereihenfolge: „nach oben“
• Actionscript Version: 2.0
• Film vor Import schützen und komprimieren
• „Trace“ übergehen, „Debugging“ nicht erlauben

Damit ist der der Flash-Teil abgeschlossen, nun bereiten wir die (X)HTML-Datei(en) vor.

Um sIFR korrekt verwenden zu können, müssen Sie im Kopf Ihrer Dateien Referenzen setzen. Zuerst binden wir die erforderlichen CSS-Dateien ein, in diesem Beispiel [3] folgende:

<link rel="stylesheet" xhref="css/t3n-main.css" type="text/css" media="all" />
<link rel="stylesheet" xhref="css/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" xhref="css/sIFR-print.css" type="text/css" media="print" />

Achten Sie auf den korrekten Pfad zur CSS-Datei und stellen Sie sicher, dass der Medientyp korrekt gesetzt ist. Jetzt referenzieren wir noch die essenziellen Javaskripte:

<script xsrc="js/sifr.js" type="text/javascript"></script>
<script xsrc="js/sifr-debug.js" type="text/javascript"></script>
<script xsrc="js/sifr-config.js" type="text/javascript"></script>

Achten Sie auch hier auf die korrekten Pfadangaben und setzen Sie nicht das „defer“-Attribut.

In den JavaScript-Dateien passiert das Wesentliche: Die Ersetzung des Browsertextes mit dem bereits vorbereiteten Flashfilm. Nach dem nächsten Schritt sehen Sie die ersten Ergebnisse, auch wenn für ein optisch zufriedenstellendes Ergebnis noch Anpassungen am CSS nötig sind. Öffnen Sie „sifr-config.js“ und spezifizieren Sie die Flash-Datei, die Sie verwenden möchten, in unserem Beispiel „helvetica.swf“:

var helvetica = {
	src: 'swf/helvetica.swf'
};

Der Pfad der Flash-Datei ist relativ zu der Seite, in der er dargestellt wird. Um Probleme zu vermeiden, empfiehlt sich die Verwendung von absoluten Pfaden.

Jetzt weisen wir sIFR an, sich zu aktivieren und den Flashfilm zu laden:

sIFR.activate(helvetica);

Auch mehrere Flashfilme können spezifiziert werden:

sIFR.activate(helvetica, acaslon);

Schließlich befehlen wir sIFR, die gewünschten Elemente unserer Seite mit dem Flashfilm zu ersetzen:

sIFR.replace(helvetica, {
	selector: 'h1'
		,css: [		  
		'.sIFR-root { text-align: center; font-weight: bold; }'
		,'a { color: #990000;text-decoration: none; }'
		,'a:hover { color: #000000;text-decoration: underline; }'		]
});

Der Selektor verhält sich analog zu den bekannten CSS-Selektoren, auch komplexe Strukturen wie „#secondary-content h2“ oder „#content h3.subheader“ sind möglich. An diesem Punkt ist es zum ersten Mal sinnvoll, die Seite im Browser zu öffnen. Sie sollten jetzt bereits den Flash-Text sehen können.
Falls der Text merkwürdig aussieht, abgeschnitten oder mit zuviel Raum drum herum, wird die Seite vielleicht von Ihrem lokalen Rechner geladen. Testen Sie direkt auf einem Webserver, auf der lokalen Festplatte
verhindern die Sicherheitseinstellungen von Flash eine korrekte
Ausführung von sIFR. Möglicherweise müssen Sie auch ein wenig an den Einstellungen herumspielen – Tipps dazu finden sich auf der Projektseite.

Zum Schluss kümmern wir uns noch um den CSS-Teil von sIFR. Öffnen Sie „sIFR-screen.css“ (in unserem Beispiel) und ergänzen sie den Inhalt um die folgenden Zeilen:

.sIFR-active h1,
.sIFR-active h2,
.sIFR-active h3, {
		visibility: hidden;
		font-family:Verdana;
		line-height:1em;
}

Die Klasse .sIFR-active wird nur gesetzt, wenn sIFR aktiviert wurde – also nur wenn JavaScript aktiviert und das Flash-Plugin vorhanden ist. Das erlaubt uns, spezielle CSS-Anweisungen nur für sIFR zu spezifizieren. Wir setzen also „visibility:hidden;“, um sicherzugehen, dass der normale Text nicht im Browser dargestellt wird. Als Schriftart wird die Verdana gewählt, da sie auf fast jedem System der Welt vorhanden ist und sich somit die Texttransformationen verlässlich voraussagen lassen.

Die wichtigste Anweisung ist hier „line-height:1em;“: sie sorgt dafür, dass die Zeilen genauso hoch sind wie der Text, das ist von Bedeutung für die Textgrößenberechnungen im Java- und ActionScript. Nach diesen Vorbereitungen können gewünschte Textgrößenänderungen im Flashfilm einfach über das font-size-Attribut gesteuert werden.

Dieser Artikel kann nur einen Bruchteil der Möglichkeiten von sIFR aufzeigen, die offizielle Liste umfasst Features wie:

• FlashCSS: Verwendung mehrerer Farben und unterschiedlicher Textstile. Auch Linkstile sind möglich.
• Kontrolle über Kerning, Leading und Zeilenhöhe.
• Dynamische Schriftgrößenveränderung.
• Besserer FlashBlock-Support.
• Ausschluss einzelner Elemente von der Ersetzung.
• Verwendung von Flash8-Filtern.
• Hintergrundbilder im Flashfilm.

sIFR, in seiner aktuellen Version, ist eine der brauchbarsten Methoden, um ansprechende Typografie standardkonform in Webseiten zu integrieren. Es ist umfangreich konfigurierbar, schlank und skaliert Schriften dynamisch.

Der Autor

Benjamin Niediek ist Mediengestalter für Digital- und Printmedien und studiert Medieninformatik & Gestaltung an der Universität Bielefeld. Er arbeitet seit 5 Jahren bei der Firma HDNET GmbH & Co. KG als Creative Director und ist dort vornehmlich für das Screendesign und die Frontendprogrammierung umfangreicher TYPO3-Projekte verantwortlich.

Alexander Heinze ist ebenfalls Mediengestalter für Digital- und Printmedien und strebt ein berufsbegleitendes Studium im Bereich Informatik an. In der Firma HDNET GmbH & Co. KG ist er seit vier Jahren als Mediengestalter angestellt und widmet sich dort hauptsächlich der Frontend-Programmierung umfangreicher TYPO3- und Social-Network-Projekte.