Obserwując w ciągu kilku ostatnich miesięcy kolejne wdrożenia polskich i zagranicznych agencji, zauważyłem, że w lawinowym tempie zaczęło przybywać tych stron WWW, na których wykorzystuje się Cufon – bibliotekę JavaScript, dzięki której stosowanie niestandardowych fontów w Sieci staje się dziecinnie proste. A do tego – szybsze, bardziej dostępne i stabilne niż sIFR, @font-face i wiele innych. Czy jednak webdeveloperzy mają pełną świadomość wszystkich wad i zalet tego rozwiązania? Jakie ograniczenia na nich czekają i czego jeszcze nie udało się zrobić twórcom?

Jak to działa?

Na wstępie, kilka słów jak w istocie działa Cufon. Użytkownik wybiera font w formacie TTF, OTF itp. Następnie, dzięki aplikacji online, font jest konwertowany najpierw do formatu SVG, następnie do VML, a docelowo do zbioru ścieżek JSON. Zbiór wektorów jest wykorzystywany do rysowania na elemencie canvas. Ot i cała tajemnica. Cały proces jest bardziej złożony, szczegóły na ten temat na stronie dokumentacji Cufon.

Podstawowe zalety

Do momentu powstania Cufon, a należy podkreślić, że jest to po prostu biblioteka wykorzystująca możliwości istniejące w przeglądarkach od kilku dobrych lat, developerzy zwykli byli używać SIFR’a bądź @font-face rodem z CSS3. Dzięki stosowaniu Cufon możliwe jest:

  • stosowanie dowolnego fonta przekonwertowanego do formatu kompatybilnego z Cufon we wszystkich przeglądarkach od IE6 począwszy (w identycznej formie, co w przypadku @font-face w starszych przeglądarkach graniczy z cudem),
  • sensowne wygładzanie fontów,
  • wykorzystywanie standardowych regułek CSS do formatowania tekstów z niestandardowym fontem,
  • stosowanie niewspieranych przez mniej nowoczesne przeglądarki atrybutów tekstu takich jak cienie(text-shadow), kolor z użyciem gradientu itd.,
  • częściowa dostępność (sensowne odczytywanie przez screenreadery dzięki zastosowaniu w DOM treści alternatywnych, dobre interpretowanie przez urządzenia mobilne),
  • wyłączenie JavaScript nie powoduje drastycznych zmian w layoucie – po prostu stosowany jest zadany w CSS font.

Podstawowe wady

Jak większość eksperymentalnych bibliotek, rozwiązań, które z pozoru wydają się doskonałymi świecidełkami, Cufon ma szereg wad. Niektóre z nich mogą się wydawać nieistotne, pozostałe mają duży wpływ choćby na dostępność. Wykonałem kilka prostych testów, które ukazują w jakich sytuacjach należy być ostrożnym w stosowaniu Cufon.

Oto krótki screencast nagrany z użyciem Firefoksa 3.6 oraz czytnika ekranu NVDA.

Zobacz stronę Cufon Experiment

Jak wynika z powyższego screencasta, stosowanie Cufona rodzi takie problemy jak:

  • niezbyt sensowne odczytywanie nagłówków (…Nagłówek 1. „Cufon” Nagłówek 1. „Experiment”…),
  • nieodczytywanie całych zdań po najechaniu myszą – czytanie pojedynczych wyrazów.

O ile w przypadku nagłówków złożonych z jednego-dwóch wyrazów nie ma większego problemu, to jednak oddzielnie odczytywanie wyrażenia złożonego z 3-6 słów może być na dłuższą metę męczące dla osób korzystających ze screenreadera. Co więcej, nie znając tego mechanizmu mogą odczuwać spore zagubienie.

Mimo, że Cufon nie przeszkadza screenreaderowi we w miarę poprawnym czytaniu strony, to jednak w przypadku chęci powiększenia tekstu za pomocą Ctrl++ po prostu nie reaguje (i nic dziwnego, wówczas przeglądarka musiałaby uruchomić za każdym razem Cufon.refresh(), ale o tym zaraz). Przy wyłączonym CSS również nie wygląda to najlepiej. Największą wadą jest jednak brak możliwości zaznaczenia tekstu i skopiowania go. O ile w przypadku nagłówków czy nawigacji nie ma to większego znaczenia, to w przypadku tekstów to fundamentalny błąd usability/accessibility! Stosując Cufona do renderowania dużej ilości tekstów narażamy się na powrót do wad ostro krytykowanego Flasha, który stosowany do budowania całych stron, najczęściej (a to przez błędy programistów) nie pozwalał na zaznaczanie/kopiowanie tekstów. Każdy kij ma dwa końce – to świetne narzędzie, aby zabronić użytkownikom kopiowania tekstów.

Cufon nie lubi jQuery?

Zobacz stronę Cufon Experiment

Proste zastosowania Cufona nie rodzą większych problemów. Schody zaczynają się w sytuacji, gdy na elemencie z niestandardowym fontem chcemy wykonać np. animacje jQuery lub JavaScript-ową zmianę atrybutów CSS. Napisałem kilka przykładów, które w łatwy sposób pokazują problemy w stosowaniu Cufona w relacji z JavaScript, jQuery czy jQuery UI. O ile w przypadku statycznej zmiany atrybutów (np. poprzez $.css(), $.html() itd.) powinno wystarczyć odpalenie metody Cufon.refresh(), to problemy mogą wystąpić przy próbie dynamicznej zmiany atrybutów w dziedzinie czasu (co widać przy próbie animacji za pomocą $.animate()). Dlaczego jednak nie spróbować napisać kodu, dzięki któremu animacje fontów renderowanych z użyciem Cufona będą możliwe? Za jakiś czas rezultaty badań w tym zakresie, bądźcie cierpliwi. Być może w ramach powstającego Lizard Labs powstanie odpowiedni snippet/biblioteka.

Reasumując…

Cufon to dobrze przygotowana, sprawnie działająca biblioteka, dzięki której wachlarz możliwości webdesignerów i developerów zdecydowanie poszerza się. Stosowanie obrazków, które w przypadku wielojęzycznych stron bywają kłopotliwe i czasochłonne przy próbie jakiejkolwiek zmiany, zostanie zapewne z czasem wyparte przez biblioteki typu Cufon. Za kilka lat zapewne takie eksperymentalne rozwiązania nie będą potrzebne, bo stosowanie @font-face będzie ujednolicone i dobrze interpretowane przez wszystkie przeglądarki.

Szczegóły dotyczące Cufon można znaleźć na stronie domowej projektu, a dokładniejsze opisy dla programistów – w dokumentacji.

Paweł Biliński
frontend developer
0

Leave a Reply