Relatywne utrapienia
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:
- Stosując tę sztuczkę, trzeba zrezygnować z grupowania właściwości. Jeśli w głównym stylu damy np.:
body {to niestety styl dla IE nie zadziała.
font: 12px/1.4 Verdana, Geneva, Arial, Helvetica, sans-serif;
} - 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.
- 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:
- Ajax, śledzenie kliknięć i wnioski rozmaite
- Jak testować strony pod Linuksem, bez instalacji Linuksa?
- Apple właśnie zabija piksele
- Przeglądarki: idzie nowe!
- Trochę w obronie PFRON
Zapisz się na kanał RSS bloga i dołącz do ponad 1500 czytelników RSS.
23 listopada 2005 01:29
Linux pisany z małej litery. Protestuję. :)
23 listopada 2005 01:52
Bo to już właściwie słowo potoczne bardziej niż nazwa własna. Ale spierał się nie będę. :-)
23 listopada 2005 10:34
Bardzo pożyteczny trik :-). Zyskał Pan stałego czytelnika. Pozdrawiam serdecznie, Łukasz.
23 listopada 2005 14:44
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? ;)
23 listopada 2005 14:57
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.
23 listopada 2005 15:25
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.
23 listopada 2005 17:13
To chyba dobre rozwiazanie, lecz ja ostatnio przyzwyczailem sie do uzywania nazw okreslajacych wielkosc czcionek – small, medium, itd.
9 grudnia 2005 13:21
Witam, mój FF1.5 pod Ubuntu 5.10 wyświetla wszystkie wiersze na stronie testowej w ten sam sposób.
16 marca 2006 17:21
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??
17 marca 2006 17:09
Test na razie jest tam gdzie jest, jeśli go przeniosę (np. w ramach porządków), to podam w komentarzu nowego linka.
6 maja 2006 09:17
Pod Linuxem (Mandriva ’06):
Opera 9 (beta) – poprawnie
Firefox 1.5 – poprawnie
IE6 (wine) – poprawnie
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).