EpicWEB.pl

webdesign, programowanie, phat lewt!

Ostatni projekt

ddrpl.com

Ostatnie wiadomości

Arial, Tahoma i cała ta reszta - @font-face w praktyce

Każdy z nas zapewne niejednokrotnie otrzymał od klienta / grafika projekt strony w którym zastosowano czcionki z poza grupy tzw. "web safe". Czcionki "web safe" to takie, co do których mamy pewność, że posiada je u siebie odwiedzający i wyświetlą się one poprawnie - najczęściej jest to Arial, Verdana czy Tahoma. Zwykle w przypadku kiedy konieczne było zastosowanie jakiejś "nietypowej" czcionki aby mieć pewność, że będzie ona wyglądać poprawnie wstawialiśmy obrazki.

Początek rewolucji

Mimo, że większość przeglądarek (w tym nawet archaiczne IE6) pozwalało w ten czy inny sposób używać czcionek zdefiniowanych przez programistę nie było to ani proste ani skuteczne. Jako pierwszy problem pozwolił nieco zniwelować skrypt zwany sIFR (ang. Scalable Inman Flash Replacement). Jak można się domyśleć po nazwie - było to rozwiązanie oparte na technologii Flash. Za pomocą kilku magicznych linijek nasz tekst zamieniany był na elementy Flash i wyświetlany zdefiniowanym przez nas krojem tekstu. Minusem rozwiązania było oczywiście poleganie na Flash, ale bardziej przeszkadzał efekt "podmiany" tekstu na element Flash, który dało się zauważyć gołym okiem. Ten sam problem dotykał także kolejnego rozwiązania - Cufón. Tym razem zamiast generować pliki SWF skrypt generował dane w postaci ścieżek wektorów i wyświetlał tekst jako <canvas> lub VML (ang. Vector Markup Language) (dla przeglądarek IE). Poza wspomnianym wcześniej problemem ze "Wskakiwaniem" nowej czcionki Cufón posiada inne ograniczenia (tj. brak poprawnej obsługi text-align czy text-decoration).

Nadejście (użytecznego) @font-face

Z biegiem czasu oraz coraz lepszą implementacją standardów rzeczy zaczęły się zmieniać. Coraz więcej osób zaczęło dostrzegać możliwości i potencjał jakie niesie ze sobą @font-face Za pomocą tego elementu CSS możemy w "prosty sposób" definiować własne czcionki:

@font-face {
        font-family: Delicious;
        font-weight: bold;
        src: url('http://example.com/Delicious-Bold.ttf');
}

b.delic {
	font-family: 'Delicious';
}

I już - jeżeli nasza przeglądarka obsługuje @font-face wskazany tekst zostanie wyrenderowany pogrubioną wersją czcionki 'Delicious'. Oczywiście nic w naszym życiu nie jest aż tak proste. Powyższy kod zadziała tylko dla przeglądarek obsługujących standard TrueType (.ttf). Żeby mieć pewność, że tekst wyświetli się poprawnie pod IE, Firefox, Opera, Chrome ... i to jeszcze w każdej "w miarę" popularnej wersji musimy zastosować format odpowiedni dla każdej z tych przeglądarek:

@font-face {
        font-family: Delicious;
        font-weight: bold;
        src: url('http://example.com/Delicious-Bold.eot'); /* IE9 w trybie kompatybilności */
	src: url('http://example.com/Delicious-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
		url('http://example.com/Delicious-Bold.woff') format('woff'), /* Nowoczesne przeglądarki */
		url('http://example.com/Delicious-Bold.ttf') format('truetype'), /* Przeglądarki oparte na Webkit */
		url('http://example.com/Delicious-Bold.svg#EASSansRegular') format('svg'); /* Starse wersje iOS */

}

Tak przygotowany kod wymaga oczywiście wygenerowania czcionek w każdym z tych formatów. Z pomocą przychodzi nam tu doskonały serwis Font Squirrel. W serwisie tym znajdziemy setki czcionek gotowych do pobrania i użycia na naszej stronie. Domyślnie każda czcionka dostępna jest w standardzie TTF, EOT, SVG i WOFF. Dodatkowo, za pomocą generatora możemy wygenerować paczkę dla naszej wyjątkowej czcionki. W takim wypadku należy jednak upewnić się, że zezwala na to licencja na jakiej rozpowszechniana jest dana czcionka (pamiętaj - jeżeli nie chcesz być stratnym, nigdy ślepo nie akceptuj czcionki od klienta, a i grafik nie zawsze musi wiedzieć, czego używa).

Alternatywą dla generowania czcionek jest skorzystanie z platformy udostępniającej gotowe czcionki w odpowiednim formacie. Najpopularniejszą z których jest Google Web Fonts. W przypadku tej usługi dobieranie i wysyłanie odpowiedniego formatu czcionki leży po stronie Google - my ograniczamy się do dodania jednej linijki HTML:

	<link href='http://fonts.googleapis.com/css?family=Enriqueta' rel='stylesheet' type='text/css'>

I już możemy w naszym CSS użyć zapisu font-fmily: 'Enriqueta; by wyświetlić tekst odpowiednim krojem. Zaletą Google Web Font jest niewątliwie przekazanie obowiązku serwowania czcionki na serwery CDN firmy Google, co skutkuje zwiększeniem prędkości ładowania strony i zmniejszeniem transferu. Minusem jest niewątpliwie niewielki wybór czcionek, który zmniejsza się jeszcze bardziej gdy zależy nam na czcionce posiadającej polskie znaki diakrytyczne.

Czy @font-face jest rozwiązaniem doskonałym?

Chociaż @font-face może wydawać się idealnym sposobem na zakończenie zabawy w wyświetlanie tekstu jako grafiki na skutek kilku szczegółów nie jest nim (a przynajmniej nie dziś). Do minusów @font-face zaliczyć można na pewno:

  • niejednolite renderowanie tekstu w różnych przeglądarkach, systemach operacyjnych - czcionka może być renderowana z odpowiednim wygładzeniem krawędzi i nie mamy na to większego wpływu
  • zablokowana obsługa pobierania i wyświetlania czcionek w przeglądarce użytkownika
  • brak obsługi kerningu (odległości pomiędzy poszczególnymi glifami - letter-spacing zmienia odległości pomiędzy każdym ze znaków, kerning pozwala na ustalenie jej dla pojedynczego znaku w tekście)
  • konieczność generowania odpowiednich plików czcionki dla:
    1. różnych przeglądarek
    2. różnych typów kroju (oddzielna dla zwykłego, oddzielna dla pogrubionego, kolejna dla tekstu pochylonego)

Kiedy więc najlepiej stosować @font-face? Wszędzie tam, gdzie tekst jest dynamiczny - w treści stron, pozycjach menu etc. Elementy, co do których mamy pewność, że nie będą zmieniane przez długi czas od umieszczenia na stronie (np. nagłówki sekcji) najlepiej wciąż umieszczać jako grafika.

Symbol Typeface - ikonki pod kontrolą

Nie ważne czy wierzysz w badania nad przyzwyczajeniami i skojarzeniami, chcesz by Twoja strona była przyjemna dla oka odwiedzających, czy też po prostu chcesz by użytkownicy mogli szybko dowiedzieć się do czego służy dany element - w tej czy innej postaci na Twojej stronie pewnie znajdują się jakieś ikonki.

Moje logo musi być większe!

Każdy kto tworzył kiedykolwiek stronę internetową wie ile wiąże się z tym problemów - często koncepcja zmienia się parokrotnie, raz zmieniamy kształt, raz kolor, innym razem dodajemy cień. Dla polepszenia wydajności strony montujemy nasze ikonki w sprite by przeglądarka nie musiała pobierać dziesiątek obrazków. W takim wypadku zmiana ciągnie za sobą konieczność zmiany sprite, a nie daj Bóg klient wymyśli sobie, by ikonka była większa - nasz idealnie wykalkulowany sprite wziął w łeb i dopychamy kolejny symbol. No i nie wspominajmy już o problemie skalowania - często obrazki wykorzystane w tle po prostu nie chcą skalować się tak, jak byśmy tego oczekiwali.

Z pomocą przychodzi nam stosowanie czcionek, w których zamiast liter (pozwolę sobie na takie uproszczenie) autorzy osadzili różne często wykorzystywane ikony czy logotypy. Jedną z takich czcionek jest WebSymbols.

Jeżeli zajrzymy na stronę projektu - a nasza przeglądarka obsługuje @font-face - ujrzymy zestawienie symboli i logotypów. Nie są to jednak obrazki, ale glify (znowu upraszczam) ze wspomnianej czcionki - każdy zastępuje jedną literę, znak czy cyfrę.

Ok, ale po co mi kolejny "sprite"?

Dzięki takiemu rozwiązaniu możemy utworzyć coś na kształt spritu obrazków, jednak zawierać będzie on tylko symbole. Co ciekawsze, możemy zmieniać ich rozmiar (font-size), kolor (color) oraz tło (background). Możemy także pójść na całość - dodać cień, albo proste animacje (na powyższej stronie animacja "ładowania" to po prostu element, którego zawartość zamieniana jest na kolejne cyfry z zestawu 1 - 7). Oto przykład ze strony powyżej:

Zestaw elementów graficznych wykonanych przy pomocy Symbol Typeface

Każdy z tych elementów wyświetlony został bez użycia obrazków - dodatkowy efekt wygładzenia zależny jest od konfiguracji przeglądarki i systemu operacyjnego.

Dodatkowo, czcionka w najpopularniejszym (pod wzg. obsługi przez przeglądarki) formacie - TTF - to jedyne 12kb - dużo mniej niż umieszczenie wszystkich tych symboli jako grafika.

Jedno ale ...

Niestety, jeżeli czcionka nie zawiera interesującego nas elementu mamy 3 wyjścia:

  • znaleźć inną, która będzie go zawierać (np. Fico, rozwiązanie płatne)
  • zastosować element graficzny
  • przygotować własny zestaw glifów i stworzyć własną czcionkę

Przyznam, że osobiście nie miałem jeszcze okazji wykorzystać tego rozwiązania w większym projekcie, ale podczas testów wewnątrz firmy nie napotkałem żadnych problemów ze stosowaniem tej techniki.

Dyrektywa 2009/136/EC - czy Twoja strona jest gotowa?

25 maja 2011 wchodzi w życie dyrektywa Unii Europejskiej o nr. 2009/136/EC.

Dla nas najciekawsza jest informacja z pkt zatytułowanego art. 5 ust. 3 otrzymuje brzmienie:

Państwa członkowskie zapewniają, aby przechowywa­nie informacji lub uzyskanie dostępu do informacji już prze­chowywanych w  urządzeniu końcowym abonenta lub użytkownika było dozwolone wyłącznie pod warunkiem że dany abonent lub użytkownik wyraził zgodę zgodnie z  dy­rektywą 95/46/WE po otrzymaniu jasnych i wyczerpujących informacji, między innymi o  celach przetwarzania. Nie sta­nowi to przeszkody dla każdego technicznego przechowy­wania danych ani dostępu do nich jedynie w celu wykonania transmisji komunikatu za pośrednictwem sieci łączności elektronicznej, lub gdy jest to ściśle niezbędne w celu świad­czenia usługi przez dostawcę usługi społeczeństwa informa­cyjnego, wyraźnie zażądanej przez abonenta lub użytkownika.”;

W telegraficznym skrócie - zapis ten nakłada na Usługodawcę obowiązek poinformowania o celu i uzyskania wyraźnej, świadomej zgody Odwiedzającego na przesłanie mu pliku cookie. Z zapisu tego wyłączone są pliki, których jedynym celem jest obsługa mechanizmu e-commerce (zakupy online) oraz do celów realizacji usługi zamówionej przez Odwiedzającego

Po co? Głównym celem było uniemożliwienie śledzenia naszych poczynań w internecie w celu przygotowywania reklamy personalizowanej pod wzg. naszych zachowań, preferencji oraz historii aktywności.

Od razu zaznaczę, że nie jestem prawnikiem, ale wygląda na to, że jeżeli w regulaminie serwisu (lub polityce prywatności) opisujesz, do czego wykorzystywane są ciasteczka w ramach zamawianej usługi (tj rejestracja w serwisie) - jesteś kryty. Jeżeli jednak wykorzystujesz pliki cookies do innych celów - musisz poinformować o tym użytkownika i otrzymać jego zgodę - nie wystarczy samo wyświetlenie treści.

Jak będzie wyglądać egzekwowanie tego postanowienia oraz jak zmieni się oblicze Europejskiego internetu przyjdzie nam się przekonać już całkiem niebawem.

Dodatkowo - nie sprecyzowano, co Ustawodawca miał na myśli, pisząc o Odwiedzającym - co z komputerami w kafejkach internetowych, w których ciastko zostało wysłane innemu użytkownikowi, niż aktualnie korzystający z przeglądarki?

PS. - zagadka - czy mogę wysłać użytkownikowi cookie, w celu identyfikacji go jako użytkownika, któremu zadałem już pytanie o udzielenie prawa do wysyłania plików cookie w celu nie wyświetlania mu tegoż pytania ponownie, w przypadku, kiedy odpowiedział on przecząco? ;-)

[PHP/CSS/HTML] Kilka zakurzonych przykładów

Przy okazji porządków na serwerze znalazłem kolekcję swoich starych skryptów i innych dokumentów publikowanych jeszcze na starym blogu. Ponieważ wiem, że niektóre z nich jeszcze mogą się komuś przydać postanowiłem pomóc Google, które linkuje niemiłosiernie do nie istniejących już adresów i wrzucić skrypty do sieci.

Chciałbym przypomnieć, że skrypty te mogą być nie aktualne, mogą nie odzwierciedlać aktualnie stosowanych metod, nie działać czy też być proste do odtworzenia w totalnie lepszy sposób - jest to do przewidzenia, zważywszy, że większość z nich ma ponad dwa lata.

Poniżej lista z krótkimi opisami:

Jeszcze raz - to są stare skrypt, które mogą być już nie aktualne - proszę o nie wytykanie błędów ;-)