Convertor em în px

em este o unitate de lungime din CSS care depinde de mărimea fontului. Un em este egal cu mărimea calculată a fontului elementului în care este folosit[1]. Când em apare ca valoare a proprietății font-size, calculul pornește de la mărimea fontului elementului părinte, pentru că mărimea elementului însuși abia se stabilește prin acea valoare[1]. Acest număr îl cere câmpul „Font-size al elementului părinte” din convertor.

Pixelul (px) face parte din unitățile absolute ale CSS: 1px este definit ca 1/96 dintr-un inch[1]. De aceea convertorul din inchi în px dă 96 px la un inch când rezoluția este de 96 DPI. Wikipedia în limba română descrie pixelul ca element component al imaginilor grafice digitale[2]. Transformarea em în pixeli arată câți pixeli înseamnă o valoare relativă într-un anumit loc din pagină.

Când elementul părinte are fontul de 16 px, 1 em înseamnă 16 px, iar 1,5 em înseamnă 24 px. Formula are o singură înmulțire: pixeli = em × mărimea fontului elementului părinte. Dacă niciun element părinte nu are font propriu, 1 em este egal cu mărimea implicită a browserului, de obicei 16 px[3].

Diferența apare acolo unde se schimbă elementul părinte. Într-un card cu fontul de 14 px, 1,5 em dă 21 px. Într-o secțiune cu fontul de 20 px, aceeași valoare dă 30 px. Aceeași scriere înseamnă alt număr de pixeli în locuri diferite, și tocmai prin asta em se deosebește de rem, care se calculează întotdeauna din elementul rădăcină.

De aceea convertorul are un al treilea câmp, pentru mărimea elementului părinte. El ia orice număr între 1 și 200 px, se deschide cu 16 și acceptă și un procent, de pildă „150%”, calculat din cei 16 px impliciți. Rezultatul apare cu cel mult două zecimale: 0,875 em cu un părinte de 13 px dă 11,38 px.

Formula este px = em × font-size al elementului părinte. Să calculăm 1,25 em în trei locuri. Cu părintele implicit de 16 px iese 1,25 × 16 = 20 px. Într-un card de 14 px aceeași valoare dă 17,5 px. Într-o secțiune de 20 px urcă la 25 px.

Un detaliu schimbă calculul. În afara proprietății font-size, de exemplu în padding, margin sau width, em se calculează din mărimea fontului elementului însuși[1]. Să luăm un buton dintr-un bloc de 16 px, care are font-size: 1.25em și padding: 1em. Textul butonului ajunge la 20 px. Spațiul interior este tot de 20 px, pentru că em din padding se calculează din fontul propriu al butonului. Pentru astfel de valori treceți în câmpul părintelui mărimea fontului elementului însuși.

Operația inversă este împărțirea și o face convertorul px în em, cu același câmp pentru elementul părinte. Pentru rem, unitatea care se calculează mereu din elementul rădăcină html, există convertorul rem în px. În editoarele de text mărimea fontului se scrie în puncte; în CSS 12 puncte înseamnă 16 px, iar această transformare o face convertorul pt în px.

Înălțimea rândului se scrie tot în em, însă se moștenește altfel. Valoarea line-height: 1.5em este transformată o singură dată în pixeli, din fontul elementului, iar elementele copil moștenesc valoarea gata calculată în pixeli. Un număr fără unitate, 1.5, se înmulțește din nou cu fontul fiecărui element copil[7].

În exemplul de pe MDN, un titlu de 30 px stă într-un container cu fontul de 15 px. Cu line-height: 1.1 titlul primește o înălțime de rând de 33 px. Cu 1.1em înălțimea rămâne 16,5 px, pentru că em este calculat în container și ajunge la titlu ca pixeli deja calculați[7]. Pentru textul paragrafelor, MDN recomandă o valoare de cel puțin 1.5; la un text de 16 px asta înseamnă o înălțime de rând de 24 px[7].

În interogările media, em ascultă de altă regulă. O condiție precum @media (min-width: 48em) nu depinde de regulile font-size din pagină și se calculează din mărimea inițială a fontului browserului[4]. La cei 16 px impliciți, 48em înseamnă 768 px. Dacă cititorul mărește fontul browserului la 20 px, aceeași condiție se aplică de la o lățime de 960 px. Valoarea în em a unui punct de întrerupere din machetă o puteți calcula în convertorul px în em, cu părintele lăsat la 16.