sIFR – korzystaj z czcionek do woli!

W ostatnim projekcie, nad którym pracowałem (htmluj.pl) wykorzystałem powszechnie znaną technikę sIFR (ang. Scalable Inman Flash Replacement). Polega ona na podmienianiu tekstowych elementów strony (np. nagłówków, bloku tekstu) automatycznie na dynamicznie generowany element Flash. Dzięki temu na stronie można wyświetlać dowolne kroje czcionki, niekoniecznie tylko te popularne, wbudowane w system (Arial, Verdana, Times New Roman, itp.) bez potrzeby ręcznego tworzenia obrazków z żądanym tekstem. Rozwiązanie takie jest z pewnością świetną sprawą dla designerów, pragnących w pełni realizować swoje wizje.

Jak to działa

Technika jest połączeniem JavaScriptu, CSSa i Flasha. Jest bardzo prosta w implementacji i działa wszędzie tam gdzie jest zainstalowany Flash (przy wyłączonym Flashblocku rzecz jasna) i włączony JavaScript. Technologia wykorzystuje Flasha (za pomocą ActionScript) do osadzenia czcionki i JavaScript do wstawienia elementów w odpowiednie miejsca. Jeśli Flash nie jest zainstalowany, czcionki wyświetlają się w wersji standardowej, możliwej do ustawienia w CSSie. Krój czcionki definiuje się z góry w dostarczonym pliku Flash.

Pierwsze problemy

sIFR jest projektem open source, co oznacza, że jest dostępne za darmo i każdy użytkownik może przyczynić się do jego rozwoju. Obecnie sIFR jest wydany w wersji oznaczonej numerem 3 beta. Wersja 2.0.7 jest bardzo stabilna i nie sprawia większych problemów. Kwestie, które na początku sprawiły problem i wymagały przeszukania sieci to:

• Ustawienie interlinii tekstu sIFR. W tym przypadku przy zmianie wartości znacznika line-height nic się nie dzieje. Rozwiązaniem jest ustawienie znacznika leading.

  sIFR.replace(zamien, {
    css: '.sIFR-root { leading: 1.5; }'
  });
   

  Jednakże w przypadku kiedy mamy tylko jedną linię tekstu (przy nagłówkach) zmiana leading nic nie daje. Pozostaje ostylować element podmieniony, ustawić zerowy margines i eksperymentować z height.
• Każdy element sIFR z float bezpośrednio na nim musi mieć określoną wartość width, niestety nie jest ona określana wtedy poprawnie względem długości tekstu. Elementy maja wartość dispaly:block;. Dodanie znacznika

  <h1><span>Nagłówek</span></h1>

  powoduje to ustalenie właściwości inline. Później występuje tylko kwestia przejścia do nowej linii.
• Float może powodować różne nieprzewidziane zachowania. Problem może rozwiązać display:inline; lub np. position : absolute; w pojemniku ustawionym jako relative. W zależności od sytuacji trzeba szukać rozwiązania.
• W przypadku tworzenia linków sIFR cały znacznik

  <a href="">link</a>

  należy umieścić w znacznik uruchamiający podmianę np.

  <span><a href="">link</a></span>

• Lepiej jest określać wielkość czcionki za pomocą pikseli, a nie relatywnie – em
• Wewnątrz elementu z float, sIFR zachowuje się „dziwnie” i potrafi znaleźć się nie na swoim miejscu
• Wykorzystywanie techniki clear:both; w oddzielnym elemencie div jest wskazane i ułatwia dopasowanie elementów sIFR
• Zrenderowany tekst nie jest płynny, technologia najlepiej spisuje się w nagłówkach
• Trzeba pamiętać o zagnieżdżeniu polskich znaków w pliku Flash

Wady i zalety sIFR

Oczywiście sIFR nie jest doskonały, oprócz wspomnianych problemów można mu zarzucić braki w dostępności i użyteczności. Przekształcony tekst zaznacza się dużo toporniej, strona, na której występuje sprawia wrażenie „ciężkiej”, nie jest skalowalny przez przeglądarkę. Pozytywne cechy tej technologii to, pierwsza i oczywista to realna możliwość wykorzystania dowolnej czcionki na stronie. Kolejne to: „kompatybilność” z SEO, tekst można zaznaczyć i skopiować, możliwa dynamiczna zmiana tekstu, co oznacza szybszą edycję, przy braku Flasha i JavaScriptu strona nie traci funkcjonalności.

W następnym odcinku…

W kolejnej części tego tematu przedstawię alternatywy dla sIFR, będzie to FLIR (Face Lift Image Replacement) oraz Cufon (Typeface.js)

Zbiór linków

W trakcie pracy z sIFR znalazłem wiele ciekawych stron poświęconych tej technice. Oto one:

• Pobierz sIFR
• sIFR Documentation & FAQ sIFR dokumentacja i faq
• The Joyent Community Forum o sIFR, sprawdź, na pewno ktoś miał problem podobny do Twojego
• Mike industries Ogólne informacje o projekcie
• perishablepress.com Przykłady wykorzystania argumentów