Kontrola veličine teksta

Upotreba fiksne veličine izražene u pikselima je prilično jednostavna i svodi se na definisanje font-size vrednosti za određeni selektor. Podešavanje veličine teksta pomoću ključnih reči je nešto komplikovanija iz razloga što takav pristup nije kompatibilan između pojedinih čitača što može predstavlja veliki problem a uz to zahteva i dodatne intervencije na CSS kodu. Na kraju nam ostaje podešavanje veličine teksta upotrebom relativnih jedinica izraženih kao ems. Po meni, ovo je najbolji pristup ali dosta ljudi ga izbegava zbog neadekvatne primene pa ćemo u narednom tekstu podrobnije objasniti njegovu upotrebu.

Zašto je baš upotreba relativnih jedinica ems najbolje rešenje? Ukoliko bismo veličinu teksta postavili u pikselima, Internet Explorer u tom slučaju ne dozvoljava korisniku povećanje teksta sa njegove strane direktno iz čitača. Možda neko koristi visoku rezoluciju pa mu je veličina teksta suviše mala ili je umoran pa je lakše čitati veći tekst... Razlozi za povećanjem teksta su zaista veliki što nas ograđuje od upotrebe piksela. Upotrebom ključnih reči, podešavanje veličine teksta radi solidno ali opet ne postoji ona preciznost koja se ogleda kod piksela pa tekst prilikom povećanja postaje krzav i prilično težak za čitanje. Upotrebom ems upravo dobijamo ono što želimo, povećanje teksta direktno iz čitača korisnika uz preciznost piksela.

Krenimo polako... Pretpostavimo da čitač ima standardna podešavanja pa je samim tim i veličina teksta postavljena na 'medium'. Veličina teksta 'medium' kod standardnog podešavanja u modernim čitačima izražena u pikselima iznosi 16px. Naš prvi korak je da smanjimo standardnu veličinu teksta celog dokumenta na 62,5%.

body { font-size:62.5% }

Ovim smo smanjili standardnu veličinu teksta u dokumentu na 10px što nam daje prilično dobru osnovu za dalji rad. Sada nam je lako razmišljati u pikselima i postavljati veličinu u ems (1em = 10px, 1,2em = 12px, ...). Način na koji smo došli do veličine od 62,5% je prilično jednostavan. Prilikom setovanja veličine teksta u ems uvek koristimo sledeću formulu:

child pixels / parent pixels = child ems

U našem slučaju želimo da postavimo standardnu veličinu na 10px (što predstavlja child pixel) i u tom slučaju dolazimo do računice:

10px / 16px = 0,625em

Ako pomnožimo sa procentima dobijamo 62,5% za standardu veličinu teksta.

E sada, problem nastaje kada imamo ugnježdene elemente. Onda svi oni child elementi po pravilu stvari nasleđuju vrednosti svog parent-a. Ovde nastaje problem ukoliko recimo imamo sledeći primer:

#main_content { font-size:1.2em }

Ovim smo postavili veličinu teksta u okviru main_content elementa na 12px. Ako sada imamo neku listu u okviru istog elementa i želimo da podesimo veličinu teksta liste na 10px to ćemo uraditi na sledeći način:

#main_content li { font-size:0.8333em }

Međutim, šta ako imamo jednu listu ugeždenu u drugoj? Veličina teksta te drige liste takođe će imati veličinu od 0.8333em ali se ista računa u odnosnu na njen parent odnosno prethodnu listu pa za rezultat dobijamo manji tekst od prethodne liste. Ovde moramo definisati još jedno pravilo za pomenutu ugnježdenu listu:

li li { font-size:1em }

Čime vraćamo vrednost ugnježdene liste na 10px.

Prilično lako, zar ne? ;)

Dragan Simonović je vlasnik firme Vibrant Drive d.o.o. koje se više od 5 godina bavi outsourcing-om svojih usluga na tržišta Amerike, Francuske i Ujedinjenih Arapskih Emirata.