Różne sposoby formatowania tekstu

Jeśli zdecydowaliśmy się na zastosowanie arkuszy stylów na stronach WWW, powinniśmy usunąć z kodu HTML znaczniki, które bezpośrednio formatują czcionkę, a w zamian wstawić znaczniki strukturalne, które wizualnie dają ten sam rezultat, ale dla przeglądarek „niegraficznych” (browsery tekstowe, np. Lynx lub syntezatory mowy dla niewidzących) dostarczają dodatkowych informacji o funkcji i znaczeniu danego fragmentu tekstu.

Znaczniki strukturalne bywają wyświetlane odmiennie w różnych przeglądarkach i z pewnego punktu widzenia może to być niedogodność, ale można ją usunąć, stosując arkusz stylu. Z kolei znaczniki formatujące w łatwy sposób pozwalają określić wygląd tekstu, mają jednak tę wadę, że łamią one dobre prawo wizytującego stronę do stosowania, nazwijmy to tak, „osobistego arkusza stylów”. Np. użytkownik nie może uciec od narzuconego mu <FONT FACE=>, natomiast style może wyłączyć lub je sam definiować. I wcale nie chodzi o to, żeby odwiedzający witrynę koniecznie zmieniał założony przez autora strony Arial (bo mu się np. nie podoba) na czcionkę Zurich (bo tę pasjami lubi), ale o to, że odbiorcą strony może być niewidomy, którego „user agent” współpracuje z aparatem generującym znaki Braille’a lub jego przeglądarka to syntezator mowy. Znaczniki strukturalne pozwalają właściwie interpretować informacje, natomiast arkusze stylów nie zakłócają działania tych urządzeń. Co więcej: CSS2 przewiduje wsparcie dla głosowej interpretacji stron WWW („aural style sheets”).

Pozostając jednak przy najpopularniejszych przeglądarkach graficznych, warto zamienić przynajmniej niektóre znaczniki formatujące na znaczniki strukturalne. Oto kilka przykładów:

Zamiast tego:Zastosuj to:
<i><em>
<b><strong>
<tt><code>
<font size><h1 – h6>

Bez arkuszy stylów zastosowanie elementów <H1><H6> dałoby jednak marne efekty. Domyślna typografia znaczników nagłówkowych jest w przeglądarkach graficznych realizowana dość topornie za pomocą pogrubienia czcionki i zmiany jej wielkości z zastosowaniem czcionki szeryfowej (szeryfy: poziome kreski dodawane do litery – zwiększają czytelność czcionki, pomagają przenosić wzrok z jednego znaku na drugi; przykładem takiej czcionki jest Times New Roman):

Style pozwalają określić dowolną wielkość czcionki w rozmaitych jednostkach (m.in. w pikselach, punktach typograficznych, milimetrach, wartościach imiennych – np. font-size: 10px lub font-size: xx-large).

Mając jednak tak dużą swobodę przy określaniu atrybutów formatowania tekstu, zanim dokonamy wyboru, należy rozważyć, jakiej użyjemy czcionki do tytułów i tekstu zasadniczego, jak w związku z tym szeroka ma być kolumna tekstu (łam) oraz jak wysoka interlinia między wierszami. Wysokość czcionki (stylowo: font-size:) jest liczona od linii wyznaczonej przez wydłużenie górne (na rysunku poniżej – linia zielona) do linii wyznaczonej przez wydłużenie dolne (na rysunku linia fioletowa). Otóż rozmiar czcionki nie zawsze jest dobrym wskaźnikiem. Najlepiej porównywać wysokość średnią (wysokość wyznaczona przez linię przebiegającą na wysokości górnych krawędzi małych liter, bez wydłużeń górnych i linię pisma (na niej opiera się tekst). Na rysunku wysokość średnią fontu wskazują dwie linie czerwone.

Ilustracja pokazuje, że mimo tej samej wysokości pismo szeryfowe (dolny tekst) ma mniejszą wysokość średnią. Wydaje się pozornie, że pismo szeryfowe jest mniejsze od bezszeryfowego. Tak więc dla kroju szeryfowego o stosunkowo niewielkiej wysokości średniej należy dobierać węższe kolumny tekstu (co będziemy regulować atrybutami margin-left: i margin-right:) i mniejszą interlinię (line-height:).

Arkusze stylów pomagają ustawić dowolny atrybut czcionki. Najlepiej samemu eksperymentować i sprawdzić efekty w różnych przeglądarkach. Niektóre własności opisane przez CSS2 jeszcze „nie działają” w obecnych przeglądarkach. Nie powtarzam tego, co zostało już świetnie opisane w kursach HTML, gdzie znaleźć można dokładne wyjaśnienie „stylowych” własności czcionek, ja tymczasem chcę zwrócić uwagę na inny problem.

Otóż sama techniczna umiejętność wykorzystania arkuszy stylów do formatowania tekstu to za mało. Od projektanta wymagana jest choćby odrobina wyobraźni, że dane mu możliwości, np. doboru kroju czcionki, ograniczone są prozaicznym faktem: użyta czcionka nie jest dostępna w komputerze tego, kto stronę ogląda! Oto przykład:

Dla uzyskania efektu pewnej wytworności można zastosować w nagłówku strony elegancki krój szeryfowy. Aby z kolei nadać tytułowi ton lekkości i zabawy wykorzystamy krój pisankowy (czcionki nawiązujące do pisma odręcznego). Szukając po zasobach systemu, przekonujemy się, że standardowy dla Windows Times New Roman nie bardzo nadaje się do tego celu. Ale znajdujemy inny font, który wygląda wspaniale. Tyle, że wyłącznie w maszynie „łebmajstra”. Cóż zatem robimy? Najczęściej tworzymy grafikę imitującą napis. Jest to bardzo popularne rozwiązanie, ale mało elastyczne. Rysunek napisu nigdy nie będzie tak doskonały jak sam napis, wolniej jest wczytywany, jest niewrażliwy na zmianę wielkości okna przeglądarki. Jego „treść” nie zawsze jest dostępna dla przeglądarek tekstowych i niewizualnych. Osoby bez doświadczenia, początkujący autorzy tworzą napisy bez stosowania antialiasingu, czyli wygładzania krawędzi napisu, co daje brzydki efekt postrzępionych brzegów.

Jest jednak nadzieja, że opisane kłopoty miną. Szansą ich rozwiązania jest zastosowanie technologii OpenType i TrueDoc, które ściśle powiązane są z wykorzystaniem arkuszy stylów.

Scroll to Top