Mit SIIR jede beliebige Schrift auf seiner Webseite einsetzen

Gestalter sind beim Webdesign gegenüber den Printmedien bei der Auswahl einer Schrift recht eingeschränkt. Es gibt nur ein etwa ein Dutzend Schriften, die standardmäßig sowohl auf PC als auch auf dem Mac installiert sind und somit im Browser anzeigbar sind. Darunter fallen etwa die Verdana, Tahoma, Times New Roman. Zwar kann man exotische Schriften auf gut Glück einsetzen und hoffen, dass die Schrift auf dem Computer des Seitenbesuchers installiert ist, oder jeden Textabschnitt als statisches Bild einbetten, doch gibt es mittlerweile bessere und flexiblere Möglichkeiten. Im folgendem Abschnitt möchte ich die sogenannte Scalable Inline Image Replacement Methode vorstellen.

SIIR ist eine 2004 von Ryan Petrellos entwickelte Bildersatztechnik, basierend auf PHP und JavaScript. Bei dieser Technik werden Überschriften durch generierte Images mit eigenen Fonts ersetzt. Sind JavaScript und die Anzeige von Bildern deaktiviert, wir ein ALT-Text des Bildes angezeigt. Da SIIR die bereits generierten Bilder in einem seperaten Ordner cached, entstehen keine langen Ladezeiten.

SIIR OrdnerstrukturDie Installation von SIIR sieht folgendermaßen aus:
Als erstes lädt man sich die siir_files.zip herunter und enpackt sie in den Ordner /siir. In diesem Ordner wiederum muss nun der Ordner "cache" erstellt und mit den CHMOD Besitzerberechtigungen "Lesen Schreiben Ausführen" (Wert 700) freigegeben werden. Im cache-Verzeichnis werden später über das PHP-Script die Bilddateien erstellt und gespeichert. Im /siir-Ordner müssen nun auch die Font-Dateien, die man verwenden möchte, im .ttf-Format abgelegt werden. Um die eigene HTML- oder PHP-Seite zu konfigurieren, fügt man im <head> die Zeilen

<script language="JavaScript" type="text/javascript" src="siir/external.js"></script>

ein. Um das Script zu starten, muss im HTML- oder PHP-Dokument vor den abschließenden </body> und </html> Tags folgendes geschrieben werden:

<script type="text/javascript">
SIIR_init();
</script>

Nun kann man ganz normal Überschriften einsetzen, etwa so:

<h1>Testüberschrift</h1>

Eine Beispieldatei würde nun wie folgt aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SIIR Test</title>
<script language="JavaScript" type="text/javascript" src=siir/external.js"></script>
</head>
<body>
<h1>Testüberschrift</h1>
<script type="text/javascript">
SIIR_init();
</script>
</body>
</html>

In der external.js muss der absolute Pfad zum siir-Ordner angegeben werden. Man muss dazu im Script die Zeile

var path = "http://www.path.to/siir/";

suchen und den Pfad durch den entsprechenden ersetzen.

Um das Aussehen, also Schriftgröße, Schriftfarbe, Antialiasing, Schatten Transparenz etc. der einzelnen <h1> bis <h4> Tags zu definieren, muss man jeweils die Zeilen:

settings["h1"]["padding"] = 1; // Abstand
settings["h1"]["bgcolor"] = "FFFFFF"; // Hintergrundfarbe einstellen
settings["h1"]["transparentbg"] = 0; // Transparenter Hintergrund? (1=Ja, 0=Nein)
settings["h1"]["font_color"] = "000000"; // Schriftfarbe
settings["h1"]["shadow_color"] = "E2E2E2"; // Farbe des Schriftschattens
settings["h1"]["font_file"] = "FFFGALAX.TTF"; // Name der Schrift
settings["h1"]["font_size"] = 44; // Schriftgröße
settings["h1"]["antialias"] = 1; // Antialiasing? (1=Ja, 0=Nein)

suchen und anpassen.

In der Dokumentation von SIIR wird empfohlen, den cache-Ordner über .htaccess zu schützen. Dadurch soll verhindert werden, dass die Bandbreite des eigenen Servers ausgenutzt wird, um Bilder für eine fremde Webseite zu generieren. Der Inhalt dieser .htaccess sollte gemäß der Dokumentation folgendermaßen aussehen:

IndexIgnore *
RewriteEngine on
RewriteCond %{HTTP_REFERER} ^$ [OR]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourwebsite\.de.*$ [NC]
RewriteRule .* http://yourwebsite.de/dontStealMyBandwidthJerk.html [R,L]

Also einfach diese fünf Zeilen anpassen und als .htaccess im siir-Ordner speichern. Dann wäre SIIR fertig konfiguriert.
datum Monday, March 17. 2008       zeit 10:59     ordner Webdesign       ordner Kommentar verfassen       ordner Trackback hinterlassen All new comments are subject to moderation before being displayed.

Trackbacks

Trackback specific URI for this entry

No Trackbacks

Comments

Display comments as (Linear | Threaded)

  • Plissee says:
    #1 2008-07-02 09:41 (Reply)
    SIIR ist eine sehr gute Alternative. Ich kenne das Problem da ich selbst Mac User bin. Und damit kann man es sich sparen jedes mal statische Teste zu erstellen und es wird trotzdem bei jedem richtig angezeigt

    • Add Comment
     

    Erlaubte Textauszeichnungen: Hervorheben: *wort* und Unterstreichen: _wort_

    Submitted comments will be subject to moderation before being displayed.