Skocz do linków, Skocz do treści

Relatywne utrapienia

22 listopada 2005 22:05. Autor: Robert Drózd. 11 komentarzy

Wciąż powracający problem projektantów CSS: w jaki sposób określić rozmiary tekstu na stronie. Praktyka pokazuje, że spośród wielu możliwości (px, pt, em, ex, procenty, cm) najbardziej przewidywalne są piksele (px). Czcionka, którą ustawimy na 12px będzie miała stały rozmiar: 12 pikseli ekranowych, w każdej nowoczesnej przeglądarce i w każdym systemie operacyjnym.

Ale co się stanie, gdy ktoś ustawi czcionkę na 9px, a ja mam słaby wzrok? Korzystam z menu ?rozmiar tekstu? i powiększam. Działa to wszędzie, z wyjątkiem przeglądarki Internet Explorer (w wersji dla Windows), która czcionek w pikselach skalować nie chce.

Parę lat temu, po wielu sporach i poszukiwaniach zaproponowano korzystanie z jednostek względnych: em lub procentów. Przy czym 1em odpowiada 16px. Zwykle 16 px to za dużo, dlatego czcionkę podstawową ustawiałem na 76%. Działa wszystko ładnie pod każdą przeglądarką windowsową oraz pod Linuksem (a konkretnie Mandrake).

Takie też podejście zalecają autorzy niedawno wydanej książki ?The Zen of CSS Design: Visual Enlightenment for the Web?, oto kod przeklejony z rozdziału piątego.

body {
font-size: 76%;
}
p {
font-size: 1em;
}

Dzisiaj jednak kolega alarmuje na gg. Tekst na stronie WebAudit, jak również na tym blogu jest strasznie mały pod jego Linuksem (Ubuntu). W czym problem? Niektóre przeglądarki pod Linuksem i Macintoshem wyświetlają strony w rozdzielczości 72dpi, podczas gdy Windows używa prawie wyłącznie 96dpi (lub więcej).

Co to oznacza w praktyce? Że tekst skalowany relatywnie będzie w tych systemach o 1/3 mniejszy (z pikselami nie ma takiego problemu).

  • W przypadku 100% jest całkiem nieźle, pod Windows mamy 16px, które zmniejszy się pod Linuksem do 12px.
  • Ale standardowa czcionka bloga, czyli 0,76em = 76% = 12px będzie już miała tylko 9px.
  • A co z czcionką, która jest jeszcze mniejsza? Niestety, nie widać już prawie nic.

No i co zrobić z tym fantem? W Internecie znalazłem, co ciekawe, tylko artykuły o różnicy między Windows i Makiem. No i sugestia, aby rozpoznawać system po stronie serwera, Windowsom serwować 1em, natomiast Macintoshom 1,33em. Co jednak z Linuksem? Mój domowy Mandrake wyświetla przecież wszystko dobrze.

A rozwiązanie proste jak but. :-)

Dlaczego używamy jednostek relatywnych? Z powodu błędu w Internet Explorerze dla Windows. A zatem we wszystkich innych sytuacjach można zaserwować piksele.

W głównym arkuszu styli umieszczamy:

body {
font-size: 12px;
}

Następne dołączamy arkusz styli, który będzie odczytany wyłącznie przez IE. Służą temu komentarze warunkowe, wprowadzone w wersjach IE począwszy od 5.

<!--[if IE]>
<link rel="Stylesheet" href=" style_ie.css" />
<![endif]-->

A w stylach dla IE.

body {
font-size: 76%;
}

I pięknie wszystko działa. Makowcy i linuksiarze nie muszą używać lupy, a tekst pięknie się daje powiększać w Internet Explorerze pod Windows.

Trzy uwagi końcowe:

  1. Stosując tę sztuczkę, trzeba zrezygnować z grupowania właściwości. Jeśli w głównym stylu damy np.:
    body {
    font: 12px/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    to niestety styl dla IE nie zadziała.
  2. A co się stanie z Internet Explorerem dla Macintosha? Komentarze warunkowe działają tylko dla IE pod Windows, inne przeglądarki, czyli także np. IE 5.2 dla Macintosha zignorują dodatkowe style, a tekst wyskalują w pikselach. IE pod tym systemem nie ma problemów ze zmianą rozmiaru czcionki.
  3. Warunek [if IE] oznacza, że dodatkowy styl zostanie załadowany także w nowej wersji Internet Explorera (7), która być może będzie miała już naprawione skalowanie pikseli. W takim przypadku warunek można będzie zamienić na [if lt IE 7].

Podobne artykuły:

Być może zainteresują Cię następujące artykuły:

Zapisz się na kanał RSS bloga i dołącz do ponad 1500 czytelników RSS.

Zostań fanem WebAudit na Facebooku.

Komentarze czytelników

Śledź komentarze do tego artykułu: format RSS
  1. bartold

    Linux pisany z małej litery. Protestuję. :)

  2. Robert Drózd

    Bo to już właściwie słowo potoczne bardziej niż nazwa własna. Ale spierał się nie będę. :-)

  3. Ukasbadu

    Bardzo pożyteczny trik :-). Zyskał Pan stałego czytelnika. Pozdrawiam serdecznie, Łukasz.

  4. Alarmujący kolega

    Mam panel LCD o wymiarach ekranu 342×271 [mm] i rozdzielczość 1280×1024 [px].

    342/25.4 [mm] = 13.46 cala
    271/25.4 [mm] = 10.67 cala

    1280/13.46 = 95.09 px na cal
    1024/10.67 = 95.97 px na cal

    Czyli po zaokrągleniu 96 dpi.

    Gdybym miał rozdzielczość 1024×768 na tej samej wielkości ekranie, to sytuacja wyglądałaby następująco:

    1024/13.46 = 76.08 px na cal
    768/10.67 = 71.98 px na cal

    Czyli można założyć, że około 72 dpi.

    I takich też wielkości używa moj Firefox. Nie wiem czym są spowodowane różnice w wielkości czcionek, jesteś pewny, że windows używa zawsze 96 dpi?

    To że na Mandrake u ciebie jest dobrze wynika raczej z różnic pomiędzy kolejnymi wersjami Mozilli i Firefoksa, nie z konkretnej dystrybucji Linuksa.

    Może przygotuj stronę testową, na której będa napisy z różnie określoną czcionką, żeby każdy mógł sobie tą otworzyć w swojej przeglądarce, zmierzyć długość napisu linijką i wpisać tu wyniki pomiarów. Może dojdziemy do jakichś sensownych wniosków w ten sposób? ;)

  5. Robert Drózd

    Wydaje mi się, że rozdzielczość dpi dotyczy tylko czcionek, a nie ekranu, dowód z mojego windows:

    http://www.webaudit.pl/blog/wp-content/96dpi.png

    Mój monitor ma szerokość 32,5cm = 12,8 cala, przy rozdzielczości 1024×768 oznacza to 80dpi. :)

    Co do porównywania, zrobił to już jakieś 3 lata temu niejaki Owen Briggs.

  6. Robert Drózd

    No w sumie mogę taką stronę przygotować.

    http://www.webaudit.pl/fonty.html

    Obok siebie zestawiłem 5 metod skalowania: piksele, em, procenty, punkty, deklaracja słowna.

    U mnie pod Windows tekst w każdym wierszu ma taki sam rozmiar. Przeglądarki: IE6, FF 1.0.7, Opera 8.5.

    Firefox ma możliwość zmiany rozdzielczości wyświetlania z 96dpi na 72dpi – ale gdy to zmieniłem i zrestartowałem przeglądarkę, nic się na stronie testowej nie zmieniło.

    Inna ciekawa sprawa związana z IE to zachowanie różnych metod przy zmianie rozmiaru czcionki. W IE jedyna metoda, która pozwala zmienić rozmiar czcionki to em. Piksele i punkty nie działają. Procenty działają wyłącznie w przypadku 100%, normal/x-small – skalują się niepoprawnie.

  7. Bellois

    To chyba dobre rozwiazanie, lecz ja ostatnio przyzwyczailem sie do uzywania nazw okreslajacych wielkosc czcionek – small, medium, itd.

  8. ktor

    Witam, mój FF1.5 pod Ubuntu 5.10 wyświetla wszystkie wiersze na stronie testowej w ten sam sposób.

  9. djShyPL

    FF 1.5 – poprawnie
    IE 6 – niepoprawnie
    Opera 8.53 – poprawnie

    dobry teścik… czy to zostanie na dłużej na serwerze czy lepiej przekopiować sobie na lokala??

  10. Robert Drózd

    Test na razie jest tam gdzie jest, jeśli go przeniosę (np. w ramach porządków), to podam w komentarzu nowego linka.

  11. Całek

    Pod Linuxem (Mandriva ’06):
    Opera 9 (beta) – poprawnie
    Firefox 1.5 – poprawnie
    IE6 (wine) – poprawnie

    Inna ciekawa sprawa związana z IE to zachowanie różnych metod przy zmianie rozmiaru czcionki. W IE jedyna metoda, która pozwala zmienić rozmiar czcionki to em. Piksele i punkty nie działają. Procenty działają wyłącznie w przypadku 100%, normal/x-small ? skalują się niepoprawnie.

    Skalowanie procentów działa bardzo ładnie w każdym przypadku pod IE, nie tylko gdy mamy font-size: 100%. Wystarczy sprawdzić na przykład moje http://www.calek.info – zarówno nagłówki jak i tekst są skalowane. W body mam ustawione jakieś font-size: 76%, następnie dla zwykłego tekstu jest 100%, ale nagłówki mają powyżej 100% (wszystko oczywiście względem tych 76% ustawionych dla całości dokumentu).

Zostaw komentarz

W komentarzu można (choć nie trzeba) używać podstawowych znaczników XHTML. Komentarze zawierające w podpisie słowa kluczowe mogą zostać potraktowane jako spam i usunięte.