Skalowalny layout
Idea skalowalnego layoutu polega na stworzeniu strony, w której po powiększeniu tekstu (Ctrl++) wzajemne położenie elementów nie zmieni się.
Dla strony opartej wyłącznie o tekst taki efekt jest stosunkowo łatwo uzyskać. Wystarczy podawać wszystkie wielkości (rozmiary tekstu, wielkości elementów, położenie) w jednostkach względnych (em, %).
Problemy zaczynają się, kiedy layout zawiera obrazki, ponieważ większość przeglądarek nie skaluje obrazków przy powiększaniu tekstu.
Rozwiązanie 1: CSS
Pomysł prosty: Każdemu obrazkowi za pomocą CSS nadać wielkość w jednostkach względnych – najlepiej przeliczyć piksele na em. Można sobie ułatwić życie wykorzystując kalkulator jednostek, pamiętając o tym, że wielkości em się sumują przy elementach zagnieżdżonych.
Dla tego przypadku kod CSS będzie wyglądał tak:.banner480x60 { /* style dla obrazka wielkości 480x60px */
font-size: 16px; /* zresetowanie wielkości czcionki do wartośći domyślnej,
aby było łatwiej przeliczyć na piksele
(dzieląc przez 16) */
width: 30em; /* równowartość 460px szerokości */
height: 3.75em; /* równowartość 60px wysokości*/
} Przykładowy kod HTML korzystający z powyższego stylu:<img src="obrazek.png" class="banner480x60" />
Rozwiązanie 2: JavaScript
Skrypt przy uruchamianiu strony
Po co ręcznie przeliczać wymiary z pikseli na em, skoro komputer może to zrobić za nas? Automatyczne ustawienie rozmiarów dla wszystkich obrazków na stronie wykona skrypt:
function scalable_images()
/**********************************************************
* zamienia rozmiary wszystkich obrazków na wymiary w em
**********************************************************/
{
var image=document.getElementsByTagName('img');
// pobranie wskaźników do wszystkich elementów <img>
for (var i=1;i<image.length;i++)
{
// odczytanie wysokości i szerokości kolejnego obrazka
var img = new Image();
img.src = image[i].src;
var height = img.height;
var width = img.width;
// zresetowanie wielkości tekstu
image[i].style.fontSize='16px';
// zmiana wysokości i szerokości na proporconalne wartości wyrażone w em
image[i].style.width=width/16+'em';
image[i].style.height=height/16+'em';
}
return false;
}
Skrypt użytkownika — wszystkie strony skalowane
Oczywiście, można pójść jeszcze dalej i napisać skrypt, który będzie zmieniał obrazki na skalowalne we wszystkich przeglądanych stronach. Dodatek GreaseMonkey do Firefoksa daje możliwość uruchamiania dowolnego skryptu na każdej (lub wskazanej) z przeglądanych stron.
Do pobrania skrypt GreaseMonkey: scalable_images.user.js
Problem – gorsza jakość przy powiększaniu
Powyżej opisane metody mają jedną zasadniczą wadę: powiększane obrazki tracą na jakości, co nie wygląda zachęcająco.
Problem ten można rozwiązać wstawiając obrazek w większych rozmiarach niż potrzeba i nadając mu za pomocą CSS mniejsze rozmiary. Wtedy przy normalnym wyświetleniu przeglądarka przeskaluje obrazek do mniejszego rozmiaru, a dopiero po powiększeniu tekstu zostanie wyświetlony większy obrazek (w lepszej jakości).
Oczywiście, jak można się spodziewać, ta technika też ma swoją wadę. Mianowicie, w niektórych przeglądarkach (Internet Explorer, Firefox) obrazki pomniejszane przez przeglądarkę mają niezadowalającą jakość. Opera zachowuje się lepiej, ale na głowę bije wszystkich Safari, z której reszta powinna brać przykład.
