sIFR 3 Alpha ujrzał światło dzienne

W poprzedniej wersji (sIFR 2) należało wyczyniać cuda na kiju, żeby wielkość czcionki nie zwiększała się wraz z długością napisu, co było mankamentem tamtego sposobu skalowania. Teraz już jest prościej, a szereg usprawnień jest dość imponujący. Korzystając z okazji opiszę jak używać Scalable Inman Flash Replacement.

• W paczce zamieszczony jest plik sifr.fla, otwieramy go korzystając z Flash 8 (trial jest dostępny na stronie Adobe).
• Klikamy parę razy w dokumencie aż pokaże się tekst.
• Zaznaczamy go i wybieramy odpowiedną czcionkę w panelu na dole (jak go nie widać to Ctrl + F3).
• Jeśli nie chcemy możliwości wyświetlania tekstu pogrubionego albo kursywy kasujemy odpowiednią część tego przykładowego tekstu. Można skasować wszystko, aby rozmiar pliku pozostał jak najmniejszy.
• Klikamy przycisk Embed i wybieramy wszystko od Uppercase [A..Z] do Punctuation [!@#$...] oraz Latin I i Latin Extended A - aby polskie krzaczki się pokazały.
• Wybieramy Export → Movie (Ctrl + Shift + Alt + S) z menu File i zapisujemy - raz jako Flash 8 (dostajemy autokerning i lepszy antyaliasing) drugi raz jako Flash 7.
• Load order ma być ustawiony na Bottom up a wersja ActionScript na 2.0. Wypada jeszcze skompresować (Compress movie) i zaznaczyć Protect from import.

Potem na stronie którą chcemy upiększyć - niech będą to nagłówki h2 - wstawiamy relację do plik JS z paczki.

1. <script type="text/javascript" src="sifr.js"></script>

Następnie w pliku skryptów albo od razu na stronie (w <script/>) I wywołanie zamiany. Po kolei:

1. sIFR.prefetch({
2. src: 'nazwafonta-7.swf',
3. highsrc: 'nazwafonta-8.swf'
4. });

Prefetching plików dla Explorera i Safari (szybsze ładowanie). Tutaj ustawiamy te dwie wersje - jedną zwykłą i jedną lepszą dla Flasha 8. Gdyby Flash 7 nas nie obchodził należy dodać tą linijkę przed podanym wyżej kodem:

1. sIFR.useAdvancedModeOnly();

Następnie powinniśmy włączyć kompatybliność z starszymi wersjami Mozilli, Opery i Safari - nowy algorytm określania rozmiarów czcionek tego wymaga. Kolejnym krokiem jest aktywacja skryptu.

1. sIFR.compatMode = true;
2. sIFR.activate();

Gdybyśmy musieli wyłączyć sIFR na jakiś czas wystarczy wykomentować tą drugą linijkę. Wracając jednak - pozostaje już tylko zacząć zamieniać tekst. Dla nas są to nagłówki h2:

1. sIFR.replace({
2. selector: 'h2',
3. src: 'nazwafonta-7.swf',
4. highsrc: 'nazwafonta-8.swf',
5. css: {
6. '.sIFR-root': { 'font-weight': 'bold', 'leading': -5, 'background-color': '#FFFFFF' }
7. }
8. });

Początek jest raczej jasny. Jako selektorów można używać #identyfikatora, .klasy oraz > potomka. Można także wypisać parę reguł oddzielając je przecinkami. Dalej mamy wskazanie na pliki Flasha (jak wyżej) oraz dodatkowy opis wyglądu. Tutaj można ustawić pogrubienie albo kursywę oraz odstępy między wierszami przez leading. Należy także ustawić kolor tła, jeśli nie używamy domyślnego - białego.

Kawałek kodu z sIFR.replace() możemy wywoływać ile razy chcemy dla ilu chcemy elementów. Oczywiście sIFR nie służy do zamiany całych akapitów - co najwyżej nagłówki albo specjalnie wyeksponowane kawałki tekstu.

Następnie należy określić już w CSS wielkość renderowanych napisów. Bardzo ważne jest też aby nadać wysokość linii wartość 1em (równą wielkości tekstu). Dzięki temu zadziała bezproblemowo ten nowy sposób renderowania.

1. h2 {
2. font-family: Candara, sans-serif;
3. font-size: 1.63em; /* 26px */
4. font-weight: bold;
5. }
6. .sIFR-hasFlash h2 {
7. font-size: 26px;
8. line-height: 1em;
9. }

Należy zaznaczyć, że aktywacja sIFR-a oraz funkcje podmieniające zwykły tekst na Flasha mogą być umieszczone w <body/> i uruchomić się od razu albo w <head/> i uruchomić się dopiero po załadowaniu całego dokumentu.

Demo jak to wszystko wygląda. W prezentacji użyłem dość ciężkich plików .swf, ale na pewno da się je bardziej skompresować (choćby przez zmniejszenie jakości JPG w eksportowaniu albo zmniejszeniu ilości dołączanych znaków). Więcej na temat konfiguracji sIFR można poczytać w dokumentacji wersji 2.x oraz w How-To wersji 3.0.

W sIFR 3.0 znalazłem jeden błąd (?) - mianowicie gdy klikniemy na napis i zaczniemy scrollować myszką mając kursor nad nim tekst zniknie (pojawi się, jeśli przescrollujemy w drugą stronę) - tak jakby przewijano zawartość tego bloku. A tak poza tym to wszystko działa i bardzo ładnie wygląda. Polecam, to tak naprawdę jedyny tak dobry sposób na pokazanie ładnych napisów swoją czcionką.