Joomla@jogger.pl

Cufon - typowe problemy

Możliwość osadzania czcionek w CSS wciąż jest dość odległą perspektywą ze względu na brak wsparcia w przeglądarkach używanych przez znaczną część internautów. Czasem jednak istnieje potrzeba wykorzystania w layoucie czcionki znacząco odbiegającej wyglądem od grupy czcionek, które są powszechnie dostępne na komputerach internautów. Pewnym rozwiązaniem tego problemu jest skrypt Cufon.

Od razu muszę napisać, że osobiście nie jestem zwolennikiem tego typu rozwiązań, ale w chwili obecnej jest to jeden z nielicznych i względnie uniwersalny sposób obejścia problemu z nietypowymi czcionkami.

Jako, że sporo szablonów, które współtworzyłem zawiera wsparcie dla Cufon-a chciałbym zwrócić uwagę na kilka kwestii, które są często poruszane przez klientów/developerów.

Bez JavaScript ani rusz

Cufon to skrypt, zatem możemy zapomnieć o naszych pięknych czcionkach zdobiących layouty w przeglądarkach, które mają wyłączony JavaScript. Na szczęście osób wyłączających skrypty jest mało, zwłaszcza w stosunku do osób, które mają przeglądarki nieobsługujące osadzania czcionek.

Z pustego i Salomon nie naleje

Bardzo często poruszanym problemem jest brak konkretnych liter charakterystycznych dla różnych języków. W tym wypadku trzeba pamiętać o dwóch kwestiach:

1. duża część czcionek ma dość ograniczoną ilość znaków - dlatego z reguły trzeba wybrać inną czcionkę, która znaki charakterystyczne dla danego języka wspiera;
2. gdy mamy już taką czcionkę to musimy ją jeszcze odpowiednio wygenerować - generator plików czcionek dla Cufon-a zawiera sekcję "Include the following glyphs (if available)", która pozwala nam na wybór stosownej grupy znaków do załączenia w pliku czcionki. Należy przy tym bezwzlędnie pamiętać, że każda dodatkowa grupa znaków znacząco zwiększa rozmiar pliku czcionki - stąd należy starać się jak najbardziej ograniczyć ilość znaków w pliku czcionki by nie spowolnić procesu ładowania strony.

Rozmiar ma znaczenie

Cufon działa naprawdę szybko i z reguły w przeglądarkach typu Firefox czy Chrome wręcz nie zauważamy, kiedy zwykły tekst jest podmieniany na tekst napisany inną czcionką. Należy jednak pamiętać, że dużo zależy tu od rozmiaru plików czcionek - jeżeli będą one duże to przynajmniej podczas pierwszego ładowania użytkownik łatwo dostrzeże podmianę tekstu. Dlatego tym bardziej dla potrzeb tzw. pierwszego wrażenia, warto zadbać o rozmiary wygenerowanych dla Cufon-a czcionek.

Problematyczny line-height

Jednym z najważniejszych parametrów dla tekstu jest wysokość linii określana w CSS poprzez właściwość line-height. Niestety Cufon ma pewne problemy z tym parametrem - w wypadku gdy np. nasz szablon jest napisany w (X)HTML Transitional w większości przeglądarek zmiana wysokości linii po prostu nie zadziała. Osobiście w takiej sytuacji stosowałem czasem marginesy dla elementów typu cufon, które są generowane przez skrypt do reprezentacji liter.

Inne efekty CSS też powodują problemy

Generalnie jeżeli potrzebujemy dla tekstu zastosować jakieś bardziej nietypowe efekty takie jak przezroczystość, cienie itd. to warto najpierw zapoznać się z częścią dokumentacji odnoszącą się do stylowania tekstu wygenerowanego przez Cufon.

Cufon a inne skrypty

Cufon nie bazuje na żadnym frameworku stąd jest raczej bezproblemowy w wypadku gdy stosujemy go na stronach wykorzystujących np. MooTools czy jQuery. Warto za to pamiętać, że tekst stworzony przez Cufon nie jest dynamiczny. Czyli jeżeli będziemy potrzebowali zmodyfikować tekstową zawartość kontenera wypełnionego tekstem z Cufon-a, to po tej modyfikacji tekst wyświetli się z zastosowaniem czcionki wynikającej ze styli CSS. Aby tekst był dalej zapisany naszą czcionką musimy wywołać po zmianach następujący kod:

Cufon.refresh();

Funkcja refresh pobiera opcjonalnie jako argument selektor więc w sytuacji gdy mamy dużo tekstów wygenerowanych przez Cufon-a, możemy wyrenderować czcionkę tylko dla konkretnego elementu.

Podsumowanie

I to by było na tyle w kwestii często występujących problemów, które mogą się pojawić podczas wykorzystywania Cufon-a na naszych stronach. Zainteresowanym polecam oficjalną dokumentację projektu.

Gdy MooTools powoduje problemy

Ponieważ mam możliwość obserwowania ogromnej ilości stron bazujących na Joomla! wiem, że od czasu wprowadzenia do tego CMS-a nowej wersji MooTools 1.2.* często pojawia się problem kompatybilności.

Niektórzy developerzy już dostosowali swoje produkty do MooTools 1.2.*, inni nie. Ja osobiście w nowych wersjach modułów planowałem dodanie w opcjach parametru wyboru wersji MooTools używanej w module.

Jednak po dokładnej analizie doszedłem do wniosku, że nie jest to idealne rozwiązanie. Czasem zdarza się, że jakiś komponent na stronie gdzie normalnie używa się MooTools 1.1 "na siłę" dołącza nowszą wersję MooTools i wtedy problem mamy gotowy.

Dlatego postanowiłem skorzystać w tej sytuacji z dobrodziejstw istnienia obiektu MooTools, który przechowuje informacje o wersji frameworka. Wystarczy stworzyć dwa skrypty: jeden dla MooTools 1.1 a drugi dla wersji 1.2 i następnie w głównym skrypcie naszego szablonu/modułu dodać następujący kod:

window.addEvent('load', function() {
        if(MooTools.version.contains('1.1')){
                new Asset.javascript('moo11.js');
        } else {
                new Asset.javascript('moo12.js');
        }
});

Należy pamiętać o tym, że skrypty w plikach moo11.js i moo12.js powinny być tak napisane by wykonywały się od razu (czyli już bez dodawania funkcji obsługi zdarzenia onLoad).

Oczywiście zamiast zdarzenia load możemy wykorzystać zdarzenie domready, ale to już zależy od tego co dokładnie robi skrypt, bo w niektórych wypadkach domready nie spełni naszych oczekiwań.

News Show Pro GK4 dla Joomla! 1.5 i Joomla! 1.6

Dziś małe ogłoszenie parafialne: jeżeli ktoś chciałby pomóc w rozwoju darmowego modułu dla Joomla!: News Show Pro GK4 to zapraszam do rejestracji na stronie pm.gavick.com. W chwili obecnej zapraszam do testowania modułu News Show Pro GK4 w wersji 2.0 dla Joomla! 1.5 oraz w wersji 1.0 dla Joomla! 1.6.

W najbliższym czasie powinny się też pojawiać nowe wersje innych modułów. Wszelkie znalezione błędy, opinie, uwagi oraz sugestie są bardzo miło widziane :)