Zastępowanie tekstu grafiką

Z racji zawężenia liczby krojów pisma na stronach www tylko do tych, które mają zainstalowane wszyscy użytkownicy, strony internetowe nie prezentują się wyjątkowo atrakcyjnie. Bardzo często zachodzi potrzeba użycia ciekawszego kroju pisma, z dodatkowymi efektami, które w programie graficznym można zrobić kliknięciami.

CSS nie daje takich możliwości, więc najłatwiejszym rozwiązaniem wydaje się po prostu wstawienie obrazka zamiast tekstu. Ale to nie jest dobre rozwiązanie. Zauważ, że zwykły tekst na stronie www ma następujące właściwości:

• można go zaznaczyć lub skopiować
• przeczyta go screen reader
• można go łatwo powiększyć lub pomniejszyć
• można go znaleźć na stronie za pomocą Ctrl+F
• zostanie zaindeksowany przez wyszukiwarki internetowe
• można do niego zainstalować styl użytkownika
• można bardzo szybko zmienić
• łatwo przygotować wersje językowe

Zalet tekstu można by tu przytoczyć o wiele więcej, ale wszyscy się zgodzą co do jednego: informację zapisać lepiej w postaci tekstu niż obrazka.

Techniki image replacement

Idea, jak zwykle, jest prosta: tekst gdzieś schować, wyświetlić w zamian obrazek.

Można to zrobić na wiele sposobów. Wszystkie mają swoje wady i zalety. Zaintersowani mogą zobaczyć Zestawienie technik image replacement oraz trzy najlepsze z nich.

Ja ograniczę się do opisania tylko dwóch: uchodzącej za najlepszą i najczęściej stosowanej techniki zwanej Gilder/Levin (od nazwisk autorów) oraz drugiego — mojego własnego rozwiazania.

Metoda Gilder/Levin

Polega na dodaniu jednego pustego znacznika i ustawieniu dla niego obrazka tła. Wtedy obrazek przykrywa tekst i widać tylko to, co na obrazku.

Przykadowy kod CSS dla tej metody wygląda tak:

.zamien {
      position:relative;
      margin:0px; padding:0px;
      /* ukrycie overflow:hidden na IE5/Mac */
      /* \*/
      overflow: hidden;
      /* */
}
.zamien span{
      display:block;
      position:absolute;
      top:0px;
      left:0px;
      z-index:1;
}

#nasz-h1, #nasz-h1 span{
      height:8.33em;
      width:25em;
      line-height:8.33em;
      background-image: url(naglowek.png);
}

A kod HTML tak:

<h1 class="zamien" id="nasz-h1">nagłówek<span></span></h1>

Powyższy kod zaproponowany przez Alexa Levina nie przechodzi testu walidatora. I słusznie, bo nie jest semantyczny.

Można to poprawić wstawiając coś do tego pustego znacznika span. Co tam wstawić? Proponuję encję ­ albo jeszcze lepiej spację zerowej szerokości, czyli encję  . Kod będzie wtedy wyglądał tak:

<h1 class="zamien" id="nasz-h1">nagłówek<span>&#8202;</span></h1>

Wady metody Gilder/Levin

Ta technika jest bardzo dobra, ale ma też wady:

• nie sprawdza się dla obrazków z przezroczystym tłem
• tekst na obrazku się nie skaluje
• jest niesemantyczna wymaga dodatkowego znacznika
• pusty znacznik jest obcinany przez formatery tekstu takie jak np. Tidy

Wszystko można zobaczyć na przykładach:

• Przykład 1
• Przykład 2

TIR — patent z line-height

Wpadłem na pomysł jak ukryć tekst inaczej niż za obrazkiem i bez używania position. Pomysł jest tak prosty, że aż wydaje się dziwne, dlaczego nikt wcześniej tego nie używał…

Zauważyłem że tekst wyświetlany jako blok o określonych wymiarach nie może pomieścić liter z wysokością wiersza większą niż sam blok. Tym samym tekst można ukryć ustawiając wysokość wiersza (line-height) na większą niż wysokość bloku (+stopień pisma). To co nie mieści się wtedy w bloku wystarczy obciąć za pomocą overflow:hidden. i sprawa załatwiona.

• Zobacz przykład: TIR menu test

Ta metoda ma przewagę nad techniką Levina bo:

• nie potrzebuje dodatkowych znaczników
• jest w pełni semantyczna
• działa dla obrazków z przezroczystym tłem

Ale ma tez niestety wady:

• obrazek się nie skaluje (tak samo jak u Levina)
• przy wyłączonych obrazkach i włączonym CSS wyświetla się tylko title
• nie działa dla urządzeń ignorujących line-height (np. OperaMini)

Summa summarum

Razem wszystko wziąwszy można powiedzieć, że idealnej metody nie ma. Wszystkie metody które używają obrazków tła mają wadę w postaci braku możliwości skalowania razem z tekstem. Zapowiada się jednak na to, że wszystkie przeglądarki zaczną obsługiwać całkowite powiększenie w uniwersalny sposób w jaki robi to Opera.

Te dwie opisane powyżej techniki powinny wystarczyć w większości przypadków. Inne odpadają ze względu na problemy z dostępnością dla niepełnosprawnych, niesemantyczność albo nieetyczne SEO.

• spis treści