Schriften ohne Schranken

sIFR steht für “Scalable Inman Flash Replacement” und bezeichnet eine Technik, die jeden beliebigen Text dynamisch und automatisch durch ein Flash-”Bild” ersetzen kann. Das Schöne dabei ist, dass es auf diese Weise möglich ist, so ziemlich jede (entsprechend aufbereitete) Schrift an so ziemlich jeder gewünschten Stelle in seinem Design einzusetzen - Jedem Besucher wird der ersetzte Text ohne optische Abstriche in genau dieser gewählten Schrift angezeigt - auch wenn man sein Layout mit noch so exotischen Fonts gestaltet. Völlig unabhängig davon, welche Schriften auf dem Rechner des Besuchers vorhanden sind.

Außerdem bleibt der mittels sIFR ersetzte Text anwählbar und verhält sich auch sonst wie normale Bildschirm-Fonts, so dass nicht etwa die Überschriften fehlen, wenn man Seiteninhalte kopieren und beispielsweise in eine Mail einfügen möchte. Die Ersetzung funktioniert mit jedem halbwegs aktuellen Browser, sofern JavaScript zugelassen und ein Flash PlugIn installiert ist.

Die grundlegende Funktionsweise von sIFR

  1. Zunächst wird die normale HTML-Seite geladen
  2. Im Header wird bei installiertem Flash PlugIn ein JavaScript ausgeführt, das erst prüft, ob Flash installiert ist und dann die Seite nach den zu ersetzenden HTML-Tags bzw. CSS-Klassen oder IDs absucht
  3. Wenn im Quelltext etwas auftaucht, was ersetzt werden muss, wird der dortige Text eingelesen und eine .swf-Datei weitergegeben, in der die gewünschte Schrift eingebettet ist
  4. Ein weiteres Script wird (ebenfalls nur, falls Flash vorhanden ist) ausgeführt und sorgt dafür, dass mittels eines zusätzlichen Stylesheets die zu ersetzenden Textstellen ausgeblendet und die passenden Flash-Bilder drübergelegt werden können.
  5. Ganz am Schluss erst tauscht das dritte Script die gewünschten Textstellen endgültig aus, ohne dabei den ursprünglichen HTML-Quelltext verändern zu müssen
  6. Statt des Textes werden dann Flash-”Bilder” angezeigt. Und zwar in der selben Größe, die der “normale” Text stattdessen gehabt hätte. Dabei wird die Ersatzschrift entsprechend skaliert und in der gewünschten Farbe angezeigt

Und so sieht’s dann aus.

Sauber gelöst sind etwaige Kompatibilitäts-Probleme: Erfüllt der Browser des Besuchers nicht die technischen Voraussetzungen für sIFR, geht kein Inhalt verloren. Kann gar nicht. Die Scripte arbeiten nur, wenn sie ein Flash-PlugIn erkannt haben. Und die Ersetzungs-Funktionen können ohne JavaScript nicht greifen, da sie ja selbst Scripts sind.

In diesem Fall würde man im Beispiel statt dieser “kritzeligen” Spezialschrift die gleiche Schrift wie in der Seitenüberschrift sehen. Nur ein bisschen größer.

 

sIFR einsetzen - Allgemein

Im Folgenden wird der Einsatz von sIFR im Allgemeinen beschrieben. Anleitung und Downloads zum Einsatz mit xt:Commerce finden Sie weiter unten auf dieser Seite.

Zunächst müssen alle nötigen Dateien auf dem Server vorhanden sein. Die derzeit aktuelle Version sIFR 2.02 kann bei Mike Davidson kostenlos heruntergeladen und unter Beachtung der üblichen GPL-Richtlinien beliebig eingesetzt werden.

Man erhält dort das Komplettpaket mit diversen Anleitungen und Einsatzbeispielen, dazu den gesamten unkomprimierten Quellcode, zwei vorbereitete Schrift-Dateien sowie die Flash-Vorlage “sifr.fla”, mit der man “seine eigenen” Schriften für sIFR aufbereiten kann.

1) Hochladen

Nötig für den Einsatz sind folgende Dateien aus dem Original-Paket:

  • “sifr.js” sowie
  • “sifr-addons.js” - als Hauptfunktionen
  • “sIFR-print.css” - um beim Drucken man beim Ausdrucken der Seite wieder normale Bildschirm-Schrift zu zeigen
  • “sIFR-screen.css” - das zusätzliche Stylesheet zum Ausblenden der Original-Schriften
  • “tradegothic.swf” oder “vandenkeere.swf” - als Beispiel-Schriftart

2) Referenzieren

Welche Verzeichnisse auf dem Server benutzt werden, kann man frei entscheiden, es müssen nur die beiden Script- und die beiden CSS-Dateien im HTML-Header aufgerufen werden - Der Pfad zu ihnen muss also ebenso bekannt sein, wie der Pfad unter dem die Schrift-Dateien zu erreichen sind.

In den Kopfbereich der Seite also beispielsweise folgenden Code einfügen:


<!-- sIFR -->
<link rel="stylesheet" href="http://www.meineseite.de/meinestylesheets/sifr-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.meineseite.de/meinestylesheets/sifr-print.css" type="text/css" media="print" />
<script src="http://www.meineseite.de/meinescripts/sifr.js" type="text/javascript"></script>
<script src="http://www.meineseite.de/meinescripts/sifr-addons.js" type="text/javascript"></script>
<!-- // sIFR -->
	

3) Auszutauschenden Text bestimmen

Dann legt man fest, welche HTML-Tags bzw. welche CSS-Klassen oder IDs mit einer Spezialschrift ausgetauscht werden sollen. Dazu könnte man sich beispielsweise <h1 class="Ersatzschrift">Text</h1> aussuchen und alle h1-Überschriften dieser CSS-Klasse von sIFR gestalten lassen.

Damit nicht versehentlich zu viel (oder gar nichts) ausgetauscht wird, empfiehlt es sich, eindeutige CSS-Bezeichner zu wählen (und natürlich gegebenenfalls den Quelltext entsprechend umarbeiten).

4) Schriftaustausch aufrufen

Um alle gewünschten h1-Überschriften schließlich beispielsweise durch die Schrift “vandenkeere” in Rot zu ersetzen, muss in diesem Fall am Ende der Seite folgender Code eingefügt werden.


<script type="text/javascript">
<!--
if (typeof sIFR == "function") {
	sIFR();
	sIFR.replaceElement("h1.ersatzschrift", named({sFlashSrc: src="http://www.meineseite.de/meineschriften/vandenkeere.swf", sColor: "#990000", sWmode: "transparent"}));
};
// -->
</script>
	

Dabei muss die Schrift-Datei unter angegebener Adresse erreichbar sein. Danach können weitere Parameter wie Farbe, Hintergrundfarbe u.ä. bestimmt werden. Was dabei mit welchen Anweisungen erreicht wird, ist in den Hilfedateien zu lesen.

5) Ausblenden der Originalschrift ermöglichen

Zusätzlich muss dafür gesorgt werden, dass der normale Text dieser Überschriften auch ausgeblendet wird, denn sonst werden Bildschirmschrift und Flash-Text gleichzeitig angezeigt. Hierzu muss man sein Stylesheet um den zu ersetzenden Style erweitern, diesen Stil in die Klasse .sIFR-hasFlash bringen das Ganze auf “unsichtbar” stellen. Für unser Beispiel müsste man schreiben:

.sIFR-hasFlash h1.ersatzschrift {
visibility: hidden;
}

Der Übersichtlichkeit halber empfiehlt es sich, eine eigene CSS-Datei dafür zu benutzen.

Weitere Beispiele

Für jedes weitere zu ersetzende Element muss am Ende der HTML-Seite ein weiterer Funktionsaufrufe eingefügt und eine weitere entsprechende CSS-Anweisung erzeugt werden. Beispiel: Wenn wir zusätzlich alle h4-Überschriften innerhalb des DIVs mit der ID “NaviSpalte” ersetzen wollen - diesmal mit der Schrift tradegothic in Grau - dann sieht unsere HTML-Seite am Ende folgendermaßen aus:


<script type="text/javascript">
<!--
if (typeof sIFR == "function") {
	sIFR();
	sIFR.replaceElement("h1.ersatzschrift", named({sFlashSrc: src="http://www.meineseite.de/meineschriften/vandenkeere.swf", sColor: "#990000", sWmode: "transparent"}));
	sIFR.replaceElement("div#NaviSpalte h4", named({sFlashSrc: src="http://www.meineseite.de/meineschriften/tradgothic.swf", sColor: "#666666", sWmode: "transparent"}));
};
// -->
</script>
	

… und im Stylesheet steht dann:

.sIFR-hasFlash h1.ersatzschrift {
visibility: hidden;
}
sIFR-hasFlash div#NaviSpalte h4 {
visibility: hidden;
}

 

sIFR auf dynamischen Seiten

Das oben beschriebene Procedere funktioniert natürlich auch mit allen Datenbank basierten Internet-Auftritten. Allerdings sollte man dafür sorgen, dass die richtigen Verzeichnispfade und Dateien automatisch gefunden werden. Wenn man das hingekriegt hat, steht auch einem xt:Commerce-Shop mit ungewöhnlich aufwändiger Schriftgestaltung nichts mehr im Wege.

Für Wordpress gibt es sIFR bereits als PlugIn von Robert Tinsley. Die Installation erspart etliche Fehlerquellen - Handarbeit bleibt es natürlich weiterhin, in oben beschriebener Weise Schriftnamen anzugeben und die CSS-Dateien zu anzupassen bzw. zu erstellen. Aber die Möglichkeiten, falsche Pfade zu erwischen, sind weitgehend ausgeschaltet.

Update: Das sIFR PlugIn hab ich auf der neuen Ostton-Website eingesetzt. Dort sind die Überschriften mit sIFR gestaltet, um den “Kritzel-Look” der Flyer auch im Internet wiedergeben zu können.

 

sIFR für xt:Commerce

Ein angepasstes sIFR-Set für xt:Commerce gibt’s bei mir. Dabei habe ich eine Lösung gewählt, die mit Änderungen am Shop-Template auskommt. Zugegeben, mein Probeshop ist noch eine wilde Baustelle - aber dort habe ich das sIFR-Set im Einsatz: Hier der Link zu meiner Test-Installation.

Wie man sieht, werden h1-Überschriften im Content sowie h4-Überschriften in der Sidebar mittels sIFR neu gestaltet.

 

Installation und Hinweise

1) Dateien-Set herunterladen und entpacken

Download: xt_sIFR.zip (bzw. die v2, wenn Sie einen Server mit Safe Mode haben)
xt_sIFR_v2.zip - Der Rest bleibt für beide Versionen gleich - Folgende Dateien sind enthalten:

  • “templates/DeinTemplate/javascript/add-this-to-general-js-php.txt”
    Diese Zeilen müssen ans Ende der Datei “general.js.php” des aktiven Templates angefügt werden
  • “templates/DeinTemplate/sifr/fonts/tradegothic.swf” und
    “templates/DeinTemplate/sifr/fonts/vandenkeere.swf”
    Die beiden Beispielsschriften aus dem sIFR 2.02-Paket
  • “templates/DeinTemplate/sifr/LGPL.txt”
    Die für die sIFR-Technik gültigen Lizenzhinweise
  • “templates/DeinTemplate/sifr/sifr-addons.js” sowie
    “templates/DeinTemplate/sifr/sifr.js”
    Die unveränderten Original-Scripts
  • “templates/DeinTemplate/sifr/sifr-print.css” und
    “templates/DeinTemplate/sifr/sifr-screen.css”
    Diese Stylesheets brauchen nicht bearbeitet zu werden
  • “templates/DeinTemplate/sifr/sifr-exchange.css”
    ist die Datei, in die man der Übersicht wegen am besten die CSS-Anweisungen fürs Ausblenden der Originalschriften einfügen sollte. In dieser Datei sind in auskommentierter Form außerdem (hoffentlich verständliche) Beispiel-Styles.
  • “templates/DeinTemplate/sifr/sifr-exchange.php”
    Hier werden der Austausch der Schriften aufgerufen und die Schriftarten festgelegt. Ebenfalls mit einigen Beispiel-Zeilen.
  • “templates/DeinTemplate/add-this-to-index-html.txt”
    Diese Zeile ist ans untere Ende der “index.html” des aktiven Templates zu schreiben.
    » Bitte beachten Sie Nachtrag!

2) Upload

Den gesamten Ordner “sifr” in den Template-Pfad laden.

3) Zwei Dateien ändern

Einfach die Anleitungen in den beiden “add-this”-Textdateien befolgen, die bearbeiteten Dateien speichern. Natürlich (wie immer) nach vorheriger Sicherheitskopie.

4) Fertig

Jetzt sollte man eigentlich nur noch loslegen und die Schriften austauschen. Ausgerechnet das kann allerdings eventuell zum schwierigsten Teil werden, da man je nach Template und je nachdem, welche der vielen “Tabellen-Katastrophen” davon man bei sich im Einsatz hat unter Umständen jede einzelne Template-Datei anfassen “darf”, bis man sämtliche Textstellen mit vernünftig strukturiertem HTML-Text und wirklich eindeutigen CSS-Bezeichnern versehen hat.

Vor allem das Standard-Template “XTC4″ ist vom Quelltext her im Grunde genommen fast schon als “Frechheit” zu bezeichnen - und für sIFR kaum oder nur nach umfassenden Bearbeitungen zu gebrauchen. Auf die Nutzer von in ähnlichem Stil geschriebener Templates kommt vermutlich ein nicht ganz unerheblicher Haufen nerviger Handarbeit zu.

 

Wichtige Info zum Thema Schriften

Bitte achten Sie auf die Urheberrechts-Bestimmungen Ihrer benutzten Schriftarten! In dem bei mir angebotenen Dateien-Set sind übrigens nur die Schriftarten enthalten, die der Programmierer auch in seinem Original sIFR-Paket anbietet.

Wie weiter oben erwähnt, befindet sich im Original-Paket noch eine Flash-Vorlage, mit der man eigene Schriften für die sIFR-Funktionen vorbereiten kann. Dabei werden sämtliche Schrift-Informationen in .swf-Dateien “eingebunden”. Deshalb sollte man seine selbst erstellten .swf-Dateien davor schützen anderswo eingesetzt zu werden - insbesondere, wenn man kommerziell vertriebene Fonts benutzt. Die Anleitung, wie dabei vorzugehen ist, hat Mike Davidson ebenfalls beigelegt.

Weiterer Hinweis: Zum Erstellen eigener sIFR geeigneter Schrift-Dateien ist neben der Flash-Vorlage “sifr.fla” das Programm Macromedia Flash erforderlich.

 

6. April 2007: Nachtrag - Fehler beim “include”

Um sIFR nutzen zu können, müssen auf jeder Seite die entsprechenden JavaScript-Anweisungen ausgegeben werden. Das wird in der “index.html” mit einer include-Anweisung erledigt:


{php}include (HTTP_SERVER.DIR_WS_CATALOG.'templates/'.CURRENT_TEMPLATE. '/sifr/sifr-exchange.php');{/php}
	

“Übersetzt” ergibt das:


include('http://www.beispiel-de/templates/meintemplate/sifr/sifr-exchange.php');
	

Dieser Befehl führt auf Servern mit Sicherheits-Einstellungen à la “safe_mode” zu Fehlermeldungen, da für einen “include” keine HTTP-Adresse benutzt werden darf, sondern nur “eigene” Pfade. Das kann zum Beispiel ein relativer Pfad ausgehend vom Hauptverzeichnis des Shops sein:


{php}include('templates/'.CURRENT_TEMPLATE.'/sifr/sifr-exchange.php’);{/php}
	

… eingebunden wird damit Folgendes:


include('templates/meintemplate/sifr/sifr-exchange.php');{/php}
	

Das funktioniert jedoch bei einigen mod_rewrite-Einstellungen nicht. Beispiel - ShopStat: Diese Erweiterung produziert beispielsweise solche URLs:

http://www.beispiel.de/Kategorie/ProduktName::15.html

Eine relative Pfad-Angabe würde hier zu einer Suche im Ordner “Kategorie” führen - und die Datei wird entsprechend nicht gefunden.

Die sicherste Möglichkeit, die Datei “sifr-exchange.php” zu includen, ist dann wohl die, gleich den Pfad vom Dateisystem des Servers zu benutzen. Den “kennt” xt:Commerce schon aus den config-Dateien.


{php}include(DIR_FS_CATALOG.'templates/'.CURRENT_TEMPLATE.'/sifr/sifr-exchange.php');{/php}
	

… und die so erzeugte Pfad-Angabe (Muster-Beispiel) sollte eigentlich auf jedem Server funktionieren:


include('/home/www/web123/html/xtcommerce/templates/sifr/sifr-exchange.php');
	

 

Nachtrag: Version 2 für Server mit Safe Mode

Das Dateien-Set funktioniert (wie einige Leute hier schon geschrieben haben) nicht auf jedem Server. Jetzt hatte ich die Gelegenheit, die Dateien auf Webspace mit Safe-Mode auszuprobieren - und entsprechend anzupassen. Die Version “xt_sIFR_v2.zip” sollte jetzt auch dort funktionieren.

Aktuell geht die sIFR-Technik in die Dritte Runde, es gibt schon Beta-Versionen von sIFR 3 - Die neuen Gestaltungsmöglichkeiten versprechen, richtig interessant zu werden …

 

 

Die hier veröffentlichten Code-Beispiele und die angebotenen Dateien wurden mit einer Installation von xt:Commerce 3.04 SP1 getestet, funktionieren vermutlich aber auch mit anderen (neueren und älteren) Versionen. Auch wenn keine System-Dateien von xt:Commerce bearbeitet oder verändert wurden, sind Funktionsfehler niemals komplett auszuschließen. Wer nach dieser Anleitung Änderungen an seinem Shop-System vornimmt, handelt also auf eigene Gefahr. Jegliche Haftung für Datenverluste, System-Ausfälle etc. wird hiermit ausdrücklich abgelehnt.

Bitte beachten Sie außerdem unbedingt die allgemeinen Hinweise zu hier veröffentlichten Code-Beispielen!