Da ham‹ wirs mal wie­der – eine neue selt­same Buch­sta­ben­kom­bi­na­tion: sIFR! Das ganze steht in Lang­form für Scalable Inman Flash Repla­ce­ment, und beschreibt eine inter­es­sante Tech­nik mit der indi­vi­du­el­lere Typo­gra­fie fern der aus­ge­tram­pel­ten Pfade von Ver­dana, Arial und Co mög­lich gemacht wird.
Neben sIFR wird der­zeit zumeist auf das ser­ver­sei­tige Ren­dern von Schrif­ten in JPGs oder andere Bild­for­mate gesetzt um im Web auch mal andere Buch­sta­ben als die der Sys­temshrif­ten zu sehen – die glei­che Tech­nik setze ich der­zeit auch noch für meine Head­lines ein.
Doch sIFR ist anders: hier wird durch eine Kom­bi­na­tion von Java­script CSS und Flash der zu ersetz­tende HTML-Text dyna­misch durch eine Flash-Datei ersetzt. Der Vor­teil dabei ist natür­lich, daß die SWF’s vom Daten­um­fang meist klei­ner sind als JPGs und daß man die Flash-Texte auch mit dem Cur­sor mar­kie­ren und sogar kopie­ren kann. Es erscheint fast etwas magisch wenn man sich das ein­mal anschaut und man fragt sich, ob man denn die Schrift die einem vor­ge­setzt hat nicht doch instal­liert hat. Ohne Java­script oder Flash sieht der Besu­cher der Seite die Seite ganz nor­mal ohne indi­vi­du­elle Extras.

Zunächst zu der Image Ren­der Technik

Die meis­ten etwas grö­ße­ren Web­sei­ten wer­den inzwi­schen ja mit einem Content-Management Sys­tem mit Inhal­ten gefüt­tert. Eine sehr feine Sache, braucht man doch weder Spe­zi­al­soft­ware noch beson­dere Kennt­nisse um Inhalte in eine Web­site ein­zu­pfle­gen. Es ist je nach CMS Sys­tem fast so ein­fach eine Email mit GMX zu schrei­ben – wenn nicht gar ein­fa­cher –, wie einen neuen Bei­trag auf eine Inter­net­seite zu stel­len. Der Weblog-Hype zeigt uns nur zu gut, wie ein­fach es dank eines ein­fa­chen CMS Sys­tems sein kann, und jede Weblog-Software ist ja eigent­lich nichts ande­res als ein kleine CMS.
Der große Nach­teil ist jedoch, daß es CMS Sys­teme (ich glaube fast immer) reine HTML-Seiten erstel­len, in denen man trotz moder­ner CSS-Technik ja nur die Schrif­tem ver­wen­den kann, die auch auf dem Rech­ner des Sur­fen­den instal­liert sind, eben meist Ver­dana, Arial, Times und Co. Um indi­vi­du­elle Typo­gra­fie in der Schrift der Wahl auf eine Inter­net­seite zu bekom­men ist es not­wen­dig diese in Form von Pixel­bild­chen zu erstel­len, also im klas­si­schen Fall Pho­to­shop zu öff­nen, und ein ent­spre­chen­des JPG o.ä. zu erstel­len, wel­ches anschlie­ßend auf den Ser­ver gespielt wird. Das ist jedoch für jede X-Beliebige Head­line einer Inter­net­seite dann doch eine Menge Hand­ar­beit, und man hat sich oft dar­auf beschränkt die Navi­ga­ti­ons­punkte oder andere eher feste Bestand­teile einer Inter­net­seite mit indi­vi­du­el­le­rer Typo­gra­fie zu versehen.

Die Image-Render-Technik hat hier Abhilfe geschaf­fen, denn dank ent­spre­chen­der PHP Module ist der Ser­ver auf dem die Seite liegt dazu in der Lage Texte in ihm zur Ver­fü­gung gestell­ten True­Type Schrif­ten zu schrei­ben und ein Pixel­bild aus­zu­spu­cken wel­ches anschlie­ßend anstelle der gewöhn­li­chen HTML-Headline dar­ge­stellt wird. Sinn­vol­ler­weise wird das Bild mit einem Alt-Tag ver­se­hen, damit auch Screen­re­a­der, Google u.a. die Head­line lesen kön­nen. Das alles geschiet auto­ma­tisch im Hin­ter­grund ohne daß der Schrei­ber­ling der seine Bei­träge auf die Seite stellt sei­nen Fin­ger krumm machen müsste. Schon eine wirk­lich feine Geschichte. Das glei­che PHP-Modul sorgt übri­gends auch auf vie­len Web­sei­ten dafür kleine Vor­schau­bild­chen von hoch­ge­la­de­nen Fotos zu erstel­len – hier auf 72Quadrat ürbi­gends auch.

Ich finde jedoch schade daß man es der Seite anmerkt, daß einem eigent­lich ein Bild vor­ge­setzt wurde. Man kann den Text mit dem Cur­sor ein­fach nicht mehr mar­kie­ren, und für jeden Rollover-Effekt o.ä. wird ein neues Bild benö­tigt. Das kann einen schwa­chen Ser­ver schon schnell in die Knie zwingen.

Und nun sIFR

Bei sIFR schaut es ganz anders aus. Hier wird die Typo nicht in Form von Bil­dern dar­ge­stellt son­dern mit­hilfe von Flash, der Ein­bau der Flash-Files geschiet mit einem wun­der­sa­men Java­script, wel­ches die Tex­t­e­le­mente die in einer bestimm­ten Typo gesetzt wer­den sol­len, durch Flas­h­ele­mente ersetzt. Wohl­ge­merkt, die Seite bleibt im Grunde genom­men ganz klas­si­sches HTML mit ganz nor­ma­ler Typo­gra­fie, nur wer­den durch das Java­script nach dem Laden der Seite eben bestimmte HTML-Stücke durch Flash ersetzt. Natür­lich checkt das Java­script zunächst ob der Sur­fer über­haupt Flash hat, doch das ist inzwi­chen in wohl 90% der Fälle gege­ben, und wenn Java­script aus­ge­schal­tet wurde, wird die Seite schlicht als ganz nor­male HTML-Seite dar­ge­stellt. Die Seite bleibt also bar­rie­re­frei und ist auch von Google und Co kom­plett les­bar – eine schöne Sache!
Ganz Neben­bei hat Flash aber noch zwei beson­dere Fein­hei­ten im Ver­gleich zu Pixel­bild­chen zu bieten:

• Kleine Daten­men­gen dank Vektoren
• Aus­wähl­bare und kopier­bare Typo

Der erste Vor­teil liegt auf der Hand, denn JPG’s und GIF’s ver­klei­nern den Pixel­hau­fen zwar schon ganz gut, doch funk­tio­niert dies ins­be­son­dere mit weich­ge­zeich­ne­ten Antialias-Fonts nicht beson­ders gut. GIF’s mögen es ein­fach gern, wenn das Bild aus mög­lichst weni­gen Far­ben mit mög­lichst gro­ßen zusam­men­hän­gen­den Flä­chen besteht – was bei Typo­gra­fie oft nicht ganz der Fall ist (Aus­nahme die ehe­mals tren­di­gen Pixel­schrif­ten). Tja und JPG kom­pri­miert zwar groß­ar­tig zeigt jedoch bei schar­fen Kon­tu­ren und Kon­tras­ten leicht seine häss­li­che Seite in Form von blo­cki­gen Arte­fak­ten auf der Typo.
Da eine Schrift aber eigent­lich aus Vek­to­ren besteht und als Infor­ma­ti­ons­menge eigent­lich nur die not­wen­di­gen Vek­tor­in­for­ma­tio­nen aller Buch­sta­ben benö­tigt, ist es mit Flash ein leich­tes Schrift auf das not­wen­dige Mini­mum her­un­ter­zu­rech­nen, und schließ­lich müs­sen diese Infor­ma­tio­nen auch nur ein ein­zi­ges Mal gela­den wer­den, anschlie­ßend muß nur noch die Infor­ma­tion gela­den wer­den wel­che Buch­sta­ben denn nun anein­an­der gereiht wer­den sol­len, fer­tig. Klar bei sIFR kom­men da noch ein paar Zei­len Java­script hinzu, doch auch die wer­den ja nur ein­mal geladen.

Der zweite Vor­teil ist aber noch bemer­kens­wer­ter, und hat zumin­dest für mich schon etwas von einem WOW-Effekt. Ich habe eigent­lich immer ein­fach mal auf einer Seite ein bis­sel mit dem Cur­sor herum­mar­kiert, um zu sehen was denn alles in Wirk­lich­keit Bild­ele­ment oder Flash auf einer Seite ist, doch man kann ja in Flash Text auch aus­wehl­bar machen. Wenn man über eine Seite mit sIFR Typo mit dem Cur­sor geht glaubt man sei­nen Augen kaum: Alles ist aus­wähl­bar, in die Zwi­schen­ab­lage kopier­bar und doch wird einem eine Schrift vor­ge­setzt, die man wohl nicht instal­liert hat – Erstaunlich.

Das ganze ist dabei auch noch kom­plett W3C Valid und ordent­li­ches HTML

Nach­teile?

Doch bevor jetzt gleich allzu doll geju­belt wird, sIFR ist tat­säch­lich nicht die Super­lö­sung schlecht­hin es gibt noch ein paar klei­nere Pro­blem­chen und Bugs bei sIFR.

• Das Java­script ist schnell aber nicht unsichtbar
• Das Kerning der Typo lässt sich nicht einstellen
• Die sIFR-Texte kön­nen nicht per Textzoom (Beisp.: Apfel und +) ska­liert werden.
• Text und sIFR-Überschrift las­sen sich nicht gemein­sam markieren.
• Bei Lay­outs mit varia­bler Breite ändern sich die Flash-Objekte nicht mit, wenn man die Größe des Fens­ters ändert. Auch hier wer­den die sIFR Texte erst nach einem Reload der Seite angepasst.
• Wer z.B. das nette Light­box–Java­script ver­wen­det um seine Bil­der dar­zu­stel­len, wird sich mit ein paar Pro­ble­men her­um­schla­gen müs­sen, da die Flash-Inhalte wei­ter nor­mal sicht­bar blei­ben und nicht weg­ge­dimmt werden.
• Ver­linkte sIFR-Texte kön­nen nicht per Kon­text­menü (rechte Maus­taste) kopiert oder ander­wei­tig ver­wen­det werden.
• Über­schrif­ten erschei­nen erst deut­lich nach dem Rest des Inhalts, und manch­mal kann es schon ne Weile dau­ern, bis die ganze Seite gela­den wurde. (Anmer­kung: Das kann man aber wohl mit sIFR 2.0 inzwi­schen ändern, so daß zunächst der HTML Text ange­zeigt wird.
• User-Stylesheets haben kei­nen Ein­fluss auf die sIFR-Texte: Seh­be­hin­derte sur­fen häu­fig mit inver­sen Farben.
• Wer mit abge­schal­te­nem CSS, aber mit Java­Script surft, bekommt die Über­schrif­ten dop­pelt zu sehen (Eher unwahrscheinlich).

Eine Frage des Copyrights

Selbst­ver­ständ­lich sollte der Nut­zer von sIFR dar­auf ach­ten, dass er auch die Schrift die er für sIFR ver­wen­den will ent­spre­chend nut­zen darf. Hier gibt es ein paar Dinge zu beach­ten. Im Zwei­fel hilft hier zum einen meist ein Blick in die Readme Datei die der Schrift bei­ligt, oder eine Nach­frage beim Font­shop oder direkt bei dem Her­stel­ler der Schrift. Es ist näm­lich nicht so, daß man jede Schrift die man erwor­ben hat, auch für die­sen Zweck ver­wen­den darf.

Hin­ter­grund­in­fos zu sIFR gefällig?

Um mehr über sIFR zu erfah­ren habe ich im fol­gen­den ein paar Links zusam­men gestellt. Es gibt im Inter­net dut­zende an Infor­ma­ti­ons­quel­len zu sIFR, ein­fach mal bei Google nachschauen.

• Die Offi­zi­elle sIFR Site (e)
• wei­ter­ge­hende Infos (e)
• Sehr schö­ner Arti­kel mit einer klei­nen Prä­sen­ta­tion bei Macro­me­dia (e)
• Eine kleine Demons­tra­tion (e)
• deut­sches Tuto­rial vom Köl­ner Blog Büro (offline)
• Das sIFR Forum (e)
• Prägnanz.de Arti­kel zu sIFR (d)
• Für und Wider Dis­kus­sion (e)
• Dr. Web zu sIFR (d)
• noch ein klei­nes Bei­spiel (e)
• Ein paar Free­ware sIFR Fonts (e) (offline)
• Pixel­fonts in sIFR nut­zen (e)

Sei­ten die sIFR einsetzen:
• ABCNews.com
• Design by Fire
• jukebo.cx
• Pros­per – The Busi­ness Magazine
• Je Reinste Onzin
• base-box.de
• Brian Swee­ting
• Six Apart
• Sche­ren­burg­fest­spiele Gemünden

sIFR und Word­Press? Wie gehts das?

Da war ich dann wirk­lich erstaunt. Denn für Word­Press gibt es ein fei­nes Plu­gin mit dem man sIFR unheim­lich ein­fach in sein Word­Press Web­log inte­grie­ren kann. Es wer­den jedoch nur die bei­den Standard-Schriften beige­fügt, doch wenn man Flash MX 2004 hat, kann man sich ja auch seine eige­nen Schrif­ten für sIFR erstel­len. Aller­dings sollte man auf die Lizenz­rechte der Schrif­ten ach­ten. Ein Tuto­rial wie man das macht gibt’s natür­lich auch schon längst.

Das Plu­gin für Word­Press heißt CG-FlashyTitles und funk­tio­niert wie schon gesagt aus­ge­spro­chen ein­fach. Zumin­dest hatte ich kei­ner­lei Pro­bleme bei der Instal­la­tion. Das Plu­gin lässt sich im Admin-Bereich von Wor­press sehr gut ein­stel­len, und es ist mög­lich ver­schie­dene Selek­to­ren für unter­schied­li­che »Typo-Ersetzungs-Aufgaben« anzu­le­gen. Die Sache funk­tio­niert wie sIFR sonst auch auf fol­gende Weise:

1. Selek­tor wäh­len
Man wählt einen HTML Tag des­sen Text durch sIFR Text ersetzt wer­den soll aus. Wenn man bei­spiels­weise den Selek­tor H2 wählt wer­den alle Headline-Texte die­ser Stufe durch einen sIFR Text ersetzt. Die Schrift­grö­ßen­an­ga­ben stam­men aus der übli­chen CSS Datei, in der man ja sicher­lich bereits eine Grö­ßen­an­gabe für die Head­lines ange­ge­ben hat. Man kann aber auch ein wenig kom­bi­nie­ren und durch die Wahl eines Selek­tors wie #content h2 nur die Head­lines erset­zen, die sich in dem Content-Div befin­den. Wei­tere Expe­ri­mente habe ich bis­her nich nicht durch­ge­führt, aber ich muß ein­ge­ste­hen, daß ich das schon für eine aus­ge­spro­chen inter­es­sante Sache halte, die ich sicher­lich auch bald auf mei­ner Inter­net­seite brin­gen werde.

2. Schrift aus­wäh­len
Direkt nach der Instal­la­tion sind nur zwei Schrif­ten vor­han­den, doch man kann sich ja auch seine eigene Erstel­len (siehe die­ses Tuto­rial) oder auch eine der sIFR Fonts von sifrfonts.com (lei­der off­line) her­un­ter­la­den, aller­dings sind die eher von min­de­rer Qualität.

3. Far­ben und wei­tere Ein­stel­lun­gen wäh­len
Nun wählt man die Far­ben für die Typo aus, wobei der Hin­ter­grund auch trans­pa­rent sein kann, was sich zwar inter­es­sant anhört, doch gibt es bekannt­lich einige Pro­bleme mit trans­pa­ren­ten SWFs. Neben schwa­cher Per­for­mance funk­tio­niert dies schlicht in man­chen Brow­sern über­haupt nicht. Unter OS9 funk­tio­niert es nicht ein­mal im Wam­com Mozilla, der sicher­lich der modernste OS9 Brow­ser ist den man krie­gen kann. Statt­des­sen wird ein beson­ders häss­li­cher grü­ner Hin­ter­grund in Wam­com dargestellt.

4. Fer­tig
Ja, das war’s tat­säch­lich. Man muß kei­ner­lei Ände­run­gen an sei­nem WordPress-Template vor­neh­men, da ja ein­fach die HTML Tags durch das sIFR Java­script ersetzt wer­den. Nun kann man noch ein paar andere sIFR Selec­to­ren ein­rich­ten um noch mehr Typo auf der Seite durch sIFR Texte zu erset­zen, doch sollte man es dabei nicht allzu bunt trei­ben. Weni­ger ist bei sIFR wirk­lich mehr!