EM vs REM vs PX

Razvoj responzivnih internetskih aplikacija utjecao je na razvoj CSS-a. Mnogi i danas nisu svjesni da za pisanje CSS-a postoje i druge mjerne jedinice osim piksela px. Neki su se navikli na “dragu, staru, osnovnu” jedinicu, tzv. piksel i jednostavno ne žele komplicirati uvođenjem novih, poboljšanih jedinica. S druge strane, neki od nas su se susreli s raznim aplikacijama koje se za različite stvari koriste različitim mjernim jedinicama. Sigurno smo svi u jednom trenutku postavili pitanje: “Koju mjernu jedinicu odabrati, em, rem ili px?”

 

PX

Piksel je najmanji grafički element na koji se može razložiti digitalna slika. Naziv se često rabi i kao mjerna jedinica razlučivosti (npr. 800 x 600 px). Piksel postoji od pojave digitalne slike i jedinica je na koju smo svi navikli, neovisno o tome bavimo li se dizajnom, slikom, videom ili izradom internetskih stranica (aplikacija). Ako internetske aplikacije želimo učiniti jednostavno dostupnim svim uređajima, neovisno o razlučivosti ekrana, upotrebu piksela treba ograničiti. U većini internetskih preglednika korisnik može podešavati veličinu slova (zadana vrijednost je 16 px). Ako korisnik postavi veličinu slova na npr. 24 px, sve veličine slova trebaju se razmjerno skalirati. U slučaju da internetska stranica eksplicitno postavlja veličinu slova od npr. 30 px, 30 px će uvijek biti 30 px, i na to korisnik nikako ne može utjecati. Gledano sa stajališta programera, ovo je vrlo jednostavna i sigurna opcija, no gledano sa stajališta korisnika, korisnik ostaje “zakinut”, odnosno ograničen na ono što mu je zadano i nikako na to ne može utjecati. Moderni preglednici omogućavaju zumiranje stranice (ctrl +/-), što će utjecati na promjenu postavljene veličine, no da li je to stvarno najbolja opcija?

 

EM

Jedinica tipografije (tiskarstva) em  jednaka je trenutačno specificiranoj veličini točke. Veličina točke ne postoji na Internetu te se za zamjenu koristi veličina slova. Kada se koriste em jedinice, vrijednost veličine slova je jednaka množenju veličine slova na elementu koji se oblikuje: ako <div> sadrži veličinu slova od 16 px, padding: 2 em se prevodi kao 2 x 16 = 32 px.

Prema specifikaciji W3, jedinica em je relativna vrijednost s obzirom na element na kojem se koristi. Vrijednost veličine slova nadređenog elementa može utjecati na em vrijednost. Svaki element automatski nasljeđuje vrijednost veličine slova od svog nadređenog elementa. Svojstvo nasljeđivanja moguće je zaustaviti jedino ako vrijednost veličine slova eksplicitno postavimo upotrebom jedinica px ili vw.

 

<div id=”a” style=”font-size:1.25em”>

            <div id=”b” style=”padding:1.5em”>

            </div>

</div>

 

div#a nasljeđuje veličinu slova vrijednosti 16 px. Veličina se nasljeđuje od root elementa <html>. Naslijeđena vrijednost množi se sa 1.25 pa je konačna veličina slova za div#a = 20 px. div#b više ne nasljeđuje veličinu slova root, već veličinu od nadređenog elementa, a to je 20 px. Vrijednost paddinga za div#b množi se sa 1.5 i iznosi 30 px.

Zbog navedenog svojstva nasljeđivanja veličine slova, jedinice em potrebno je oprezno koristiti jer se stvari mogu zakomplicirati i lako je zaboraviti o kojoj se trenutačnoj veličini slova radi.

 

Ukratko:

  • jedinice em su responzivne jedinice
  • ovise o veličini slova elementa u kojem se koriste
  • na jedinice em može utjecati veličina slova od nadređenog elementa
  • poželjno ih je koristiti za skaliranje kada ne želimo da vrijednosti ovise o glavnoj veličini slova postavljenoj unutar root elementa.

 

REM

Jedinice rem predstavljaju veličinu slova koja se nalazi unutar root elementa, tj. <html>. Vrijednost koja se koristi u jedinicama rem uvijek se množi isključivo s root veličinom slova.

 

<div id=”a” style=”font-size:1.25rem”>

            <div id=”b” style=”padding:1.5rem”>

            </div>

</div>

 

Vrijednost veličine slova div#a iznosi 20 px. Vrijednost paddinga div#b je 24 px.

Ako veličinu slova root elementa ne zadamo eksplicitno, on će se naslijediti od preglednika te će imati vrijednost 16 px, ako korisnik nije postavio drugu vrijednost. Jedinice rem omogućavaju da se promjenom jedne veličine slova utječe na promjenu svih ostalih veličina koje su izražene u rem jedinicama.

Ukratko:

  • jedinice rem su responzivne jedinice
  • ovise o veličini slova root elementa <html>
  • na jedinice rem može utjecati veličina slova postavljena unutar preglednika
  • poželjno ih je koristi kada želimo da vrijednost ovisi o root veličini slova

 

ZAKLJUČAK

Ako korisnik želi utjecati na veličinu slova koja se nalazi unutar njegovog preglednika, tj. povećati je ili smanjiti, programeri to ne bi trebali onemogućiti postavljanjem fiksnih vrijednosti u px jedinicama. Upotreba px vrijednosti znači uklanjanje korisnikovog izbora. Upotrebom px vrijednosti zumiranje unutar preglednika će i dalje raditi, ali to i dalje ne utječe na promjenu veličine slova. Zumiranje utječe na cjelokupni prikaz stranice, dok promjena veličine slova unutar preglednika utječe isključivo na prikaz teksta.