Tekst to podstawa każdej strony internetowej. Ten oczywisty wniosek prowadzi do kolejnego stwierdzenia: na stronie przyjaznej dla użytkownika sposób prezentacji tekstu odgrywa taką samą rolę jak każdy inny element jej wystroju. Na szczęście język CSS udostępnia webmasterom szereg właściwości, dających pełną kontrolę nad wyświetlanym tekstem. Trzeba tylko umieć je wykorzystać.
O ile z kluczową rolą tekstu na stronie zgodzi
się każdy webmaster, o tyle wciąż niewielu
twórców strony potrafi odpowiednio definiować
reguły CSS odpowiedzialne za tekst na stronie
WWW. A przecież praktycznie w każdym projekcie
określa się rozmiar tekstu czy rodzaj czcionki, co
czynione w sposób nieudolny w wielu sytuacjach
skutkuje mniejszymi lub większymi problemami.
W niniejszym tekście zaprezentujemy rzetelne
podstawy, które ułatwią tworzenie poprawnego
kodu i pozwolą na eksperymentowanie z tekstem
na stronie w przyszłości.
Odpowiednia czcionka
Pierwszą kwestią związaną z tekstem jest
wybór odpowiedniej czcionki. Służy do tego następująca
reguła CSS:
body {
font-family: Verdana, sans-serif
}
Dzięki font-family możesz zdefiniować kilka czcionek,
z których będzie korzystać przeglądarka użytkownika.
Jeżeli nie znajdzie w systemie operacyjnym
pierwszej z nich, spróbuje wczytać następne z listy.
Verdana to bardzo znana czcionka występująca
przede wszystkim w systemach z rodziny Windows,
ale jest obsługiwana także przez komputery
firmy Apple i coraz większą liczbę systemów Linux.
Z kolei sans-serif nie oznacza jednej konkretnej
czcionki, ale całą rodzinę czcionek bezszeryfowych.
Praktycznie w każdym systemie operacyjnym znajduje
się jakaś czcionka do niej należąca. Tak więc
podwójna definicja składająca się z jednej konkretnej
czcionki i jednej ogólnej rodziny czcionek doskonale
zabezpiecza wygląd stron internetowych,
na których zostanie użyta.
Do kompletu można dodać do listy odpowiednią
czcionkę dla systemu Mac OS X firmy Apple:
body {
font-family: Verdana, \"Lucida Grande\", sans-serif
}
Kolor tekstu
Odpowiedni kolor tekstu ma wielkie znaczenie
dla czytelności strony internetowej. Możesz go zdefiniować
za pomocą właściwości color:
p {
color: black
}
Jako wartość przyjmuje ona między innymi
określenia słowne (np. black, red, yellow, blue
i inne) lub wartości szesnastkowe (np. #ffffff).
Rozmiar tekstu
Do definiowania wielkości tekstu służy właściwość
font-size:
body {
font-size: 12px
}
Możesz ustalać rozmiar tekstu dla całego body
lub każdego innego elementu zawierającego tekst,
takiego jak tabele, pudełka div, akapity, nagłówki
i wiele innych.
Problemy Internet Explorera
Najprostszą metodą definiowania rozmiaru
tekstu jest użycie pikseli. Niestety Internet Explorer
w wersji dla systemów z rodziny Windows potrafi
zmieniać rozmiar tekstu jedynie w przypadku
wielkości relatywnych.
Jeżeli użyjesz pikseli (px) lub punktów (pt), to
użytkownicy tej wciąż popularnej przeglądarki nie
będą mogli pomniejszać ani powiększać tekstu.
Jest to poważny błąd, który nie został poprawiony
nawet w najnowszym wydaniu IE. Z tej przyczyny
powszechnie odradza się stosowania wartości
nierelatywnych, czyli stałych.
Istnieją dwa sposoby poradzenia sobie z tym
problemem. Pierwszy polega na używaniu tylko
i wyłącznie wartości relatywnych. Jego zastosowanie
zostanie opisane w dalszej części artykułu.
Druga metoda to wykorzystanie komentarzy
warunkowych w celu zaserwowania programowi
Microsoftu wartości relatywnych i użycie
pikseli w przypadku wszystkich pozostałych
przeglądarek. Takie rozwiązanie zaproponował
Robert Drózd w artykule na swoim blogu (zobacz: http://www.webaudit.pl/blog/2005/relatywneutrapienia/).
Najpierw należy dołączyć do kodu strony odpowiedni
arkusz stylów przeznaczony dla Internet
Explorera:
W arkuszu tym można umieścić następującą
regułę CSS:
body {
font-size: 76%;
}
Dla pozostałych przeglądarek w podstawowym
arkuszu stylów możesz umieścić definicję tekstu dla
wszystkich innych programów:
body {
font-size: 12px
}
Jest to dobre rozwiązanie, które pozwala zachować
największą kontrolę nad tekstem. Nie jest
to jednak jedyna metoda.
Jak okiełznać emy?
Jedną z popularnych metod definiowania wielkości
tekstu jest jednostka em. Jest to jednostka
relatywna. Nie ma określonej wielkości. Rozmiar
font-size: 1em
odpowiada zawsze domyślnej wielkości czcionki
w przeglądarce internetowej. A ta wynosi na ogół
16 pikseli. Jeżeli więc wielkość tekstu określimy
na 0.9em, to będzie się ona równała wielkości
14.4 piksela. Emy działają więc na takiej samej
zasadzie, jak wielkości procentowe.
W jaki sposób najłatwiej ich używać? Pierwszym
krokiem jest określenie wielkości tekstu dla
elementu body:
body {
font-size: 0.76em
}
Następnie możesz manipulować wielkością
tekstu dla innych elementów. Jeżeli teraz określisz
następującą wielkość dla akapitów:
p {
font-size: 0.9em
}
to jak duży będzie tekst w twoim akapicie? Musisz
pamiętać, że wielkość tekstu danego elementu
opiera się na jego wielkości w elemencie
nadrzędnym. Znacznik body nie ma nad sobą
żadnego elementu HTML, więc pobiera wielkość
tekstu z ustawień przeglądarki. Jednak p w naszym
przykładzie jest podrzędny w stosunku do body
i podstawową wartością dla niego jest 0.76em.
Tak więc 0.9em zdefiniowane dla akapitu
to 90% z wielkości 0.76em. 0.76% z 16 pikseli
wynosi 12.16 piksela. 90% z tej wielkości to około
10.9 piksela i taką właśnie wielkość będzie mieć
tekst w akapicie.
Jeżeli akapit miałby nad sobą inny element
o zdefiniowanej wielkości tekstu, np. pudełko
div, to należałoby dodać je do tych obliczeń. Jest
to sposób definiowania wielkości tekstu używany
stosunkowo często, choć jego zrozumienie
może nastręczać osobom początkującym pewne
trudności.
Wielkości słowne
Rozwiązanie podobne do poprzedniego polega
na użyciu w body jednej z kilku wartości określanych
słownie: xx-large, x-large, large, medium,
small, x-small, xx-small, gdzie wartość medium
odpowiada wielkości 16 pikseli:
body {
font-size: medium
}
Następnie możesz dowolnie określać wielkość
tekstu dla poszczególnych elementów za pomocą
wartości procentowych lub, tak jak poprzednio,
emów:
p {
font-size: 90%
}
Justowanie tekstu
Justowanie oznacza wyrównanie tekstu do obu
marginesów – zarówno lewego, jak i prawego:
p {
text-align: justify
}
Tekst zaprezentowany w taki sposób ma na ogół
bardziej elegancki wygląd. Nie sprawdza się jednak
za dobrze w przypadku stron internetowych. Dzieje
się tak, ponieważ przeglądarki nie zapewniają dobrej
kontroli nad łamaniem wierszy. Często zdarza się, że
wyrazy w wąskich kolumnach są zbyt rozciągnięte.
Okazuje się, że istnieją naukowe badania
(http://psychology.wichita.edu/surl/usabilitynews/72/columns.asp) odpowiadające na pytanie,
kiedy warto stosować justowanie tekstu. Na stronach
internetowych w przypadku wąskich kolumn
mamy do czynienia z nienaturalnym rozłożeniem
wyrazów. Za to wyjustowanie tekstu w szerokich
kolumnach sprawia, że czyta się go wolniej. Warto
o tym pamiętać i nie nadużywać tej właściwości,
przynajmniej do czasu, gdy przeglądarki poradzą
sobie z łamaniem wierszy i wyrazów.
Dostępność
Nie bez znaczenia jest także czytelność tekstu
dla osób mających problemy ze wzrokiem. W tym
celu należy zawsze dobierać odpowiedni kontrast
pomiędzy tłem a literami oraz zadbać o to, aby
litery nie były zbyt małe. Najlepszym rozwiązaniem
jest użycie czarnych liter na jasnym tle. Na wielu
stronach internetowych zastosowano litery w kolorze
szarym, jednak takie rozwiązanie zdecydowanie
zmniejsza czytelność tekstu.
Kontrast kolorów na stronie możesz sprawdzić
za pomocą jednego z wielu darmowych narzędzi.
My polecamy AccessColor (http://www.accesskeys.org/tools/color-contrast.html) oraz
Accessibility Color Wheel (http://gmazzocato.altervista.org/colorwheel/wheel.php).
Nie pomijajmy tekstu
Projektując wygląd, a następnie tworząc kod
nowej strony WWW, zbyt często skupiamy się
wyłącznie na elementach graficznych, całkowicie
pomijając kwestie związane z wyświetlaniem tekstu.
Tymczasem poprawnie zdefiniowany i dobrany
sprawi, że strona będzie czytelna dla większej
liczby osób, a jej kod zyska na elastyczności. A o to
przecież chodzi.
