non riesco a capire bene la misurazione in em

[Irene80]

Un saluto a tutti e scusate se "rompo"
lo so' ci sono tanti articoli nel sito e nel forum siè gia parlato tanto, ma non ho ancora ben capito la misurazione dei font in em (che pare sia più attendibile di quella in px o in percentuale)
Se qualcuno di voi mi desse qualche spiegazione base (tipo pillola) o riferimento da legere mi farebbe un grande piacere egli sarei molto grato

Irene

[fcaldera]

http://forum.html.it/forum/showthrea...hreadid=968189

[Irene80]

Grazie!
sei un tesoro
Vado subito a leggere

[Irene80]

Ho trovato un convertitore da px a em

ma ora sono ancora più confusa! :master:

http://riddle.pl/emcalc/

[fcaldera]

allora semplifichiamo il discorso

un em corrisponde in generale alla larghezza della lettera 'm' per un dato font-size.
Ma, per come si comportano i font nei vari browser, la questione è più semplice

se hai un font-size pari a 10 px, allora 1em = 10px e avrai quindi le seguenti proporzioni

0,1em = 1px
0,2em = 2px
...
1.5em = 15px
1.6em = 16px
...

e così via, ad libitum

ma se tu hai un font-size pari a 20px allora 1em = 20px quindi

0,05em = 1px
0,10em = 2px
...
0,75em = 15px;
0,80em = 16px;
...

e così via. Di norma però conviene scegliere come dimensione base 10px in modo da semplificare i calcoli, ovvero dichiarando su un file css di reset la proprietà

body  {
  font-size: 10px;
}

e impostando tutti gli altri font-size (per paragrafi, liste, headings) in ems.
così facendo però si impedisce a IE6 di scalare il font se l'utente decide di cambiarlo (a causa di un bug che non gli consente di scalare la grandezza di un font se non è in ems o in percentuale).

Quindi come escamotage utilizzo l'underscore hack per definire una regola aggiuntiva per IE6.

Poiché voglio portare il font-size all'equivalente di 10px e sapendo che IE6 ha un font-size di default di 16px basta scrivere

body  {
  font-size: 10px;
  _font-size: 62.5% ; /* (il 62,5% di 16 è pari a 10) */
}

oppure si può scrivere anche

body  {
  font-size: 10px;
  _font-size: 0.625em ; /* calcolo equivalente in ems */
}

però preferisco il primo sistema, perchè IE6 ha anche problemi di arrotondamento (una disgrazia fatta browser) e non vorrei metterlo a dura prova con troppi decimali

Spero sia più chiaro

[Irene80]

Comincio a capire Grazie!
Quindi se non dichiaro una dimensione in px in un file css
la dimensione in em si dovrebbe regolare su quella di defeault del browser usato dall'utente o peggio su quella in px che ha impostato sempre l'utente (con le considerazioni fatte per IE6) e non posso quindi sapere il risultato


Piano, piano, piano... imparo
qui sul forum aiutate veramente tanto
siete grandi!

(E pensare che l'autunno scorso sapevo -di 0
adesso inizio a validare il codice Xhtml)

[fcaldera]

Originariamente inviato da Irene80
Quindi se non dichiaro una dimensione in px in un file css
la dimensione in em si dovrebbe regolare su quella di default del browser usato dall'utente o peggio su quella in px che ha impostato sempre l'utente (con le considerazioni fatte per IE6) e non posso quindi sapere il risultato

non avrei saputo dirlo meglio.

Ad ogni modo la percentuale di utenti che usa una propria impostazione deve preoccuparti fino ad un certo punto:

per elementi fortemente ingabbiati (ad esempio un menu) l'importante è che dall'impostazione di default del browser il layout regga bene almeno una variazione del font (ovvero il layout non deve creare effetti strani far scivolare box e amenità del genere) e che sia almeno accettabile a due variazioni.

Chiaro che invece elementi come form e paragafi debbano invece reggere 3/4 ingrandimenti senza variazioni significative del layout.


dimenticavo una cosa importante

gli ems (ed i valori percentuali) sono misure moltiplicative a cascata. Ad esempio

<p style="font-size: 1.5em">
<span style="font-size: 1.8em;">...</span>
</p>

lo span avrà un font size di 1.5em x 1.8em = 2,7em

[Irene80]

BINGO!!
Adesso ho anche capito come funziona il convertitore

Mi segno tutto quello che mi hai detto e provo subito a mettere in pratica
Irene