W głąb dostępności

Dzień 26: Używanie względnych rozmiarów czcionek

Strony internetowe, z nielicznymi wyjątkami, koncentrują się na słowach. Nowości, opinie, myśli, pomysły, blogi, historie, pisarstwo, e-biznes: to wszystko słowa. Wygląd graficzny jest oczywiście ważny, ale jeśli ludzie nie są w stanie odczytać Twoich słów, to jaki w ogóle jest sens całej zabawy?

Pod koniec 2000 roku, Jeffrey Zeldman wygłosił słynną opinię, że stosowanie względnych rozmiarów czcionek jest niemożliwe ("Pixels, baby. Or nothing.") z powodu przytłaczającej różnorodności błędów w przeglądarkach, począwszy od Netscape 4 aż po najnowocześniejsze wersje różnych innych programów. Od tego czasu Netscape 4 wcale się nie poprawił, i wcale nie zniknął, ale przynajmniej nauczyliśmy się kilku rzeczy na temat radzenia sobie z przeglądarkami i umiemy spowodować, by ustalanie względnych rozmiarów czcionek stało się rzeczywistością. (Zeldman również - jego Web Standards Project używa techniki opisanej poniżej.)

Technika polega na tym, żeby używać względnych rozmiarów czcionek w przeglądarkach, które potrafią je obsługiwać, natomiast rozmiarów bezwzględnych w Netscape 4, który nie obsługuje poprawnie rozmiarów względnych. Możesz to zrobić nawet jeśli nie używasz wielokrotnych arkuszy stylów specjalizowanych pod konkretne przeglądarki. Za chwilę pokażę gotowe do skopiowania rozwiązanie dla domyślnych szablonów Movable Type i Radio. Zamieszczony również poniżej szczegółowy opis techniki umożliwi Ci zaimplementowanie podobnego rozwiązania w dowolnym narzędziu publikacji i na dowolnej stronie.

Kto na tym skorzysta?

1. Julia skorzysta. Julia ma problemy z odczytaniem tekstu na stronach internetowych po prostu z powodu wieku. Podobnie jak 80% populacji użytkowników Internetu, używa ona przeglądarki Internet Explorer dla Windows, która nie umożliwia zmiany rozmiaru tekstu jeżeli na stronie nie są jawnie określone rozmiary względne. Julia zmieniła domyślny rozmiar tekstu w przeglądarce (w menu "Widok, Rozmiar tekstu"), jednak to nic nie zmienia jeśli na stronie są określone rozmiary bezwzględne. Taka sytuacja dotyczy niemal każdego szablonu bloga ze wszystkich jakie w ogóle istnieją. Na przykład, tak dla Julii wygląda strona oparta na domyślnym szablonie Movable Type:

   

   Jeżeli szablon używałby względnych rozmiarów czcionek, to ta strona wyglądałaby dokładnie tak samo dla większości czytelników, którzy nie potrzebują (albo nie chcą) zmieniać rozmiaru tekstu. Jednak dla Julii wyglądałoby to tak:

   

   Ponownie: jeśli ludzie nie są w stanie odczytać Twoich słów to o co w ogóle chodzi?

Jak to zrobić: Radio

W szablonie "Home Page Template" poszukaj w sekcji <style> kodu CSS wyglądającego tak:

body, td, th, p {
  font-family: verdana, sans-serif;
  font-size: 12px;
}

Pozostaw to tak jak jest, ale dopisz zaraz za nim:

/*/*/a{}
body,
body td,
body th,
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body,
html>body td,
html>body th
html>body p {
  font-size: small;
}  
/* */

Uważaj, żeby nie zgubić tych komentarzy na początku i na końcu. One są kluczowe dla całej sprawy, tak jak opisano poniżej.

Jak to zrobić: Movable Type

Domyślny szabon Movable Type jest bardziej skomplikowany niż szablony Radio, ale zamierzamy to zrobić w analogiczny sposób. W szablonie stylów (styles-site.css) dopisz na końcu następujący kod:

/*/*/a{}
body,
body a,
body .calendar,
body .calendarhead,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-post,
body .posted {
  font-size: xx-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: x-small;
}
html>body,
html>body a,
html>body .calendar,
html>body .calendarhead,
html>body .title,
html>body .sidetitle,
html>body .syndicate,
html>body .powered,
html>body .comments-post,
html>body .posted {
  font-size: x-small;
}
body .date {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body .date {
  font-size: small;
}
body #banner {
  font-size: 200%;
}
body .description {
  font-size: 60%;
}
body .blogbody {
  font-size: 110%;
}
body .blogbody,
body .calendar,
body .calendarhead,
body .side,
body .title,
body .sidetitle,
body .syndicate,
body .powered,
body .comments-body {
  line-height: 128%;
}
/* */

Uważaj żeby nie zgubić komentarzy na początku i na końcu.

Jak to zrobić: szczegółowe wyjaśnienie

Ogólny pomysł jest taki, że chcemy użyć słów kluczowych do określenia rozmiaru tekstu. Jest to rzadko stosowane (z powodu błędów w starszych przeglądarkach), ale ma kilka interesujących cech:

1. Tak określone rozmiary tekstu się nie nakładają. Jeżeli masz sekcję główną strony (np. "main") o rozmiarze czcionki 90% a wewnątrz masz kolejną sekcję (np. "post") o rozmiarze tekstu określonym również jako 90%, to niektóre przeglądarki pokażą tekst w rozmiarze 81% (90% x 90%) a inne w 90%. Jeśli występuje kilka takich zagłębień (co jest powszechne jeśli się używa tabel do określenia układu strony) to tekst szybko staje się nieczytelnie mały, gdy procenty te się nakładają. Jednak jeśli sekcja "main" miałaby rozmiar czcionki określony jako small i sekcja "post" również jako small to wszystkie przeglądarki pokażą tekst w sekcji "post" w rozmiarze small, nie mniejszym.
2. Takie rozmiary skalują się poprawnie w przeglądarce Internet Explorer dla Windows. To jest dziwne, ponieważ small brzmi właśnie jak rozmiar bezwzględny (zwłaszcza w sytuacji gdy small zagłębione w small to nadal jest small, patrz wyżej), ale działa dobrze. Cóż mogę powiedzieć? IE/Win skaluje teksty, których rozmiar jest opisany przez słowa kluczowe. Przysięgam.
3. Nigdy nie są zbyt małe. Menu zmiany rozmiaru tekstu, którego Julia używa w Internet Explorerze może służyć zarówno do jego zwiększenia jak i do zmniejszenia. Wielu ludzi o dobrym wzroku często preferuje wszystkie teksty o jeden czy nawet dwa rozmiary mniejsze niż normalnie. Teksty o rozmiarach określanych w procentach mają tendencję do stawania się mikroskopijnie małymi i nieczytelnymi, kiedy domyślny rozmiar tekstu w przeglądarce jest ustawiony na najmniejszy. Jednak kiedy rozmiar jest określony przez słowa kluczowe, to tekst zawsze pozostaje przynajmniej wielkości 9px, co jest czytelne przy dowolnym foncie (zakładając dobry wzrok użytkownika).

Zatem zamierzamy użyć słów kluczowych do określenie podstawowych rozmiarów. A jeżeli będzie potrzeba dokładniejszej kontroli rozmiaru to użyjemy procentów, ale tylko dla klas zagłębionych (to znaczy np. dla "post" ale nie dla "main") aby uniknąć nakładania się procentów, i nie zbyt małych, aby uniknąć rozmiarów mikroskopijnych w kombinacji z najmniejszym ustawieniem w przeglądarce użytkownika.

Ogólna zasada określania rozmiarów czcionek na stronie wygląda tak:

p {
  font-size: 12px;
}
/*/*/a{}
body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body p {
  font-size: small;
}
/* */

Sporo się tu dzieje i wszystko jest ważne, więc uważaj.

1. Najpierw określamy bezwzględny rozmiar czcionki (12px) dla każdego paragrafu <p>. Wszystkie przeglądarki zastosują taki styl, łącznie z Netscape 4.
2. Następnie umieszczamy ten dziwnie wyglądający komentarz "/*/*/". Z powodu błędu w przeglądarce Netscape 4, wszystko między tym komentarzem a następnym zostanie zignorowane. Wszystkie następne style będą zastosowane tylko przez przeglądarki inne niż Netscape 4.
3. Natychmiast za tym komentarzem umieszczamy pusty styl "a {}". Opera 5 dla komputerów Macintosh ma błąd i ignoruje ten zapis (i tylko ten). Wszystkie następne już odczytuje.
4. Teraz jesteśmy w miejscu, gdzie możemy opisywać style, które będą zastosowane przez wszystkie przeglądarki oprócz Netscape 4. Możemy teraz zacząć definiować rozmiary względne (których Netscape 4 nie umiałby obsłużyć). W pierwszej kolejności używamy selektora "body p" aby przedefiniować styl dla taga <p>. Zgodnie z zasadami działania CSS, nadpisze to poprzednią definicję stylu dla paragrafu. (Technicznie mówiąc "body p" jest bardziej szczegółowym selektorem niż "p".)
5. Przedefiniujemy rozmiar czcionki we wszystkich tagach <p> na x-small. To słowo kluczowe, które przy domyślnych ustawieniach Internet Explorer 5 dla Windows przetłumaczy na 12px. Jednak jeżeli użytkownik zmieni rozmiar tekstu w menu przeglądarki, to ten tekst zostanie przeskalowany na większy lub mniejszy w zależności od preferencji użytkownika. O to nam właśnie chodzi. (Uwaga: teraz mamy zdefiniowany rozmiar czcionki dwukrotnie dla IE5/Win, ale to nic nie szkodzi, ponieważ bardziej szczegółowy selektor zawsze jest traktowany jako ważniejszy i poprzednie przypisanie rozmiaru jest po prostu ignorowane.)
6. Niestety IE5/Win ma błąd przesunięcia słów kluczowych rozmiarów o jeden; każda inna przeglądarka na świecie (IE5/Mac, Netscape 6, Mozilla, IE6/Win) przetłumaczy x-small na 10px, nie 12px. Na szczęście IE5/Win posiada również błąd parsowania arkusza stylów, który możemy wykorzystać: widząc tą dziwnie wyglądającą definicję atrybutu voice-family myśli, że cała definicja dla "body p" się kończy, więc ignoruje wszystko aż do znaku "}".
7. Teraz jesteśmy w miejscu gdzie możemy definiować style dla wszystkich przeglądarek oprócz IE5/Win (i Netscape 4, który w dalszym ciągu to wszystko ignoruje). Zatem przedefiniujemy rozmiar czcionki na small, co przez nowoczesne przeglądarki (jedyne, które jeszcze to analizują) zostanie poprawnie zinterpretowane jako 12px (domyślne ustawienie). Ponownie, jeśli użytkownik ustawi w opcjach przeglądarki rozmiar tekstu na większy to tekst w paragrafie zostanie przeskalowany, a o to nam właśnie chodzi.
8. Ale zaraz! Opera 5 ma ten sam błąd parsowania jaki ma IE5/Win, więc również pogubi się przy definicji voice-family, ale dobrze interpretuje słowa kluczowe rozmiarów czcionki, więc w tej przeglądarce tekst będzie teraz zbyt mały. Na szczęście, Opera 5 potrafi interpretować trzeci rodzaj selektorów, "html>body p". (Ponownie, to jest "bardziej szczegółowe" niż "body p", więc taka definicja jest ważniejsza niż poprzednie.) IE5/Win nie rozumie takiego zapisu, więc po prostu to zignoruje, i o to nam chodzi, ponieważ już mamy dla niego ustalony rozmiar czcionki. IE6/Win również nie wspiera takich selektorów, ale to też jest ok, ponieważ dla tej przeglądarki jest już ustalony rozmiar "font-size: small" po sztuczce z "voice-family: inherit" w "body p". Wszystkie inne przeglądarki poprawnie interpretują zapis "html>body p", więc dla nich definiujemy rozmiar czcionki po raz czwarty. To oczywiście nie jest żaden problem, ponieważ najbardziej szczegółowy selektor jest zawsze najważniejszy a inne są po prostu ignorowane.
9. W końcu umieszczamy pusty komentarz: /* */. To oznacza, że od tego miejsca Netscape 4 znowu analizuje arkusz stylów. Czyli wszystkie kolejne style opisane poniżej tego komentarza dotyczą znowu wszystkich przeglądarek (łącznie z Netscape 4).

W efekcie powyższego:

1. Netscape 4 pokazuje tekst w <p> rozmiarem 12px, niezależnie od ustawień użytkownika.
2. Internet Explorer 5 dla Windows pokazuje tekst w <p> rozmiarem x-small, który w tej przeglądarce przy domyślnych ustawieniach jest równy 12px, ale może być zwiększony lub zmniejszony w zależności od ustawień w menu.
3. Internet Explorer 6 dla Windows pokazuje tekst w <p> rozmiarem small, ponieważ "font-size: small" jest opisane w "body p". Taki rozmiar przy domyślnych ustawieniach jest równy 12px, ale może być zmieniony w zależności od ustawień w menu przeglądarki.
4. Internet Explorer 5 dla Macintoshy, Opera, Netscape 6, Mozilla, oraz (mamy nadzieję) wszystkie przyszłe przeglądarki pokażą tekst w <p> rozmiarem small, ze względu na zapis "font-size: small" w "html>body p". Przy domyślnych ustawieniach jest to rozmiar równy 12px, ale może być zmieniony przez użytkownika.

Zobacz także (strony w języku angielskim)

• Mark Pilgrim: Relative Font Sizing HOWTO. Dokładnie to samo wyjaśnienie, jednak strona sama w sobie używa tej techniki, więc możesz to sprawdzić w działaniu.
• Todd Fahrner: Size Matters: Making Font Size Keywords Work. Artykuł w magazynie A List Apart opisujący podobne techniki jak przedstawione powyżej.
• Caio Chassot: Hiding CSS from Netscape 4. Opisuje prosty sposób ukrywania reguł CSS przed przeglądarką Netscape 4 bez użycia wielu arkuszy stylów.
• Tantek Çelik: Box Model Hack. Ukrywanie CSS przed przeglądarką Internet Explorer 5 dla Windows.
• Owen Briggs: Text Sizing. Zrzuty ekranów przedstawiające efekty różnych technik określania względnego rozmiaru czcionek w różnych przeglądarkach, na różnych systemach i przy różnych ustawieniach opcji przeglądarki.