Ma quanto e’ lungo un em?
Martedì 30 Maggio 2006 - 11:40
di Cesare Lamanna
Alzi la mano chi ha compreso da subito e senza batter ciglio il funzionamento dell’unità di misura em usata nei CSS. Si sa che è un’unità di lunghezza relativa, che consente il ridimensionamento del testo anche in tutti i browser, che è l’optimum per layout ‘elastici’. Molti sanno pure che come unità deriva dalla tipografia, quella su carta stampata, essendo pari 1 em all’altezza del box di un certo carattere (e già qui il discorso si fa più complicato).
Chi è abituato a pensare in pixel e vuole capire a quanti em corrispondono può affidarsi, anche solo per farsi un’idea, a questo Em Calculator.
Commenti
1
Come si può facilemente vedere, 1em l’altezza del testo pari alla larghezza della lettera “m” del font. Qual’è la larghezza della “m”? quella che ha di default nel browser.
Credo che voler riportare gli ems ad una dimensione simil pixel non sia utile. O per lo meno non ne renda il senso.
Sostanzialmente posso consigliare di usare come default 0.8em come dichiarazione dentro body{ } (se nn ci sono particolari esigenze di accessibilità).
In ogni caso l’utente ipovedente avrà settata la dimensionie di default dei font come superiore al “default by design” del browser.
2
Infatti Jan, se hai visto il Calculator, ha come base della misurazione proprio 16px. Sono anche d’accordo sul fatto che “voler riportare gli ems ad una dimensione simil pixel non sia utile. O per lo meno non ne renda il senso”. Però magari qualcuno, abituato a pensare in pixel, può voler verificare a quanti em corrispondono, per avere un’idea più chiara di quanto sarà largo un div per esempio.
3
@cesare.
capisco. ma mi chiedo se il vedere quanto sarà largo un div in em possa indurre in errore. Nel senso.. in Firefox mi basta srotellare tendendo premuto crtl che le dimensioni dell’em cambia xchè cambia il valore di default del font. E anche il Div si ingrandirà/rimpicciolirà.
Ok è un metodo più potente di ottente layout elastici invece di usare le famigerate percentuali per i layout. Però richiede molta più cura perchè in quel caso bisogna gestire bene anche le immagini, ad esempio, con dimensioni relative e magari overflow:hidden etc.Anyway secondo me alcuni punti del layout vanno fissati in px; altri lasciati fluidi, tipo “vie di fuga”. Però è solo un mio modus operandi. Ovviamente il max sarebbe di poter utilizzare max/min-height/width ma purtroppo a Redmond fino a poco fa non erano d’accordo…. :(
4
> Però magari qualcuno, abituato a pensare in pixel,
> può voler verificare a quanti em corrispondono,
> per avere un’idea più chiara di quanto sarà largo un div per esempio.Quel qualcuno dovrebbe chiedere prima all’utente come ha impostato il browser (dimensione predefinita ed eventuali ingrandimenti) prima di poter convertire gli em in pixel.
# - postato da gianluca - 30 Maggio 2006 - 18:29
5
Ovviamente Gianluca ha ragione…
# - postato da Andrea Paiola - 30 Maggio 2006 - 22:28
6
Volevo sapere se si puo’ in qualche modo impostare la grandezza di default del browser per poi avere una idea precisa di quanto sarà grande un em.
Per esempio imposto il default a 16 così so che se uso per un titolo 3em sarà alto 48 pixel (ovviamente se poi viene ridimensionata la grandezza del carattere…)
Visto che l’em si basa sulla grandezza del carattere dell’elemento padre (se non sbaglio) ho provato a impostare body a 16px e uno span al suo interno a 3em ma lo span non si ridimensiona con ctrl rotellina.
Immagino non ci siano soluzioni.
Spero di essere smentito.
7
nella realizzazione di www.giornal.it abbiamo utilizzato questo metodo per utilizzare un lay-out con posizionamento assoluto ma che variasse le sue dimensioni al variare delle dimensioni del font, ottenendo un discreto effetto di zoom.
anche se con alcuni browser si è presentato un problema.. se si imposta una misura di font non standard tipo 0,78em o simili per il div contenitoew su opera e in misura minore su firefox si ottendono degli errori di posizionamento.. mentre se si rimane sui canonici 0,75em o 0,87em (in questo caso si intende) il problema non si manifesta..
detto questo credo che la coversione possa essere molto utile in queti casi , cioè l’uso di posizionamenti assoluti che però debbano adattarsi al crescere delle dimensioni del font.
8
@grab.
puoi porvare a settare in body{ } la dimensione del font in pixel. ma, permettimi, è una stupidaggine; perchè perdi il senso degli em (cioè tanto vale fare tutto in px).Se usate gli em, tolgietevi dalla testa di avere un layout sempre “uguale a se stesso”. Non è un impaginato cartaceo. Anche l’effetto zoom non mi sembra la soluzione migliore perchè va a uscire dal monitor in orizzontale.
Secondo me il testo deve essere come un liquido dentro un contenitore (div). COme un liquido si deve adattare; scivolare verso il basso per esempio.
9
@grab, sarei d’accordo con te, se il rendering nei browser attuali, fosse una cosa seria, ma in realtà è un accozzaglia di soluzioni di cui molte discutibili..
il lay-out liquido va bene se hai una pagina decrittiva con i 3 - 4 cononici box un bel po di testo e un paio di immagini, ma in lay-out più complessi per far stare le cose al loro posto in modo che abbiano un senso, l’intreccio dei div e relativi css rischia di diventare più incasinato dei lay-out fatti con le tabelle e accrocchi simili..
quello che manca, e sembra che nessuno se ne renda conto è una gestione sensata degli scorrimenti, allo stato attuale il designer non ha nessuna possibilità di vero controllo sullo scorrimento dei vari blocchi nelle varie sitazioni, e si trova costretto a vari espedienti più o meno complicati per definire il comportamento della sua pagina nelle diverse situazioni..
dovendo quasi sempre sciegliere tra statico e dinamico e senza quasi mai poter mischiare le due cose in modo pratico e efficace..non dico che sia impossibile, ma è terribilemnte inefficiente questo modo di vedere il boxing, eredità della visione testocentrica dell’html, gloriosa si, ma ormai decisamente anacronstica.
Sarebbe ora che la questione del rendering degli spazi venisse considerata seriamente da chi si occupa di definnire gli standard e di progettare i browser.
scusate lo sfogo, ma a volte…
saluti Fabio
10
Qualcuno ha capito come mai, con il CSS impostato con la dimensione del carattere in em (da 0,8em a 1,2em a seconda del tipo di testo) IE dà una differenza enorme tra carattere medio e piccolo mentre Mozilla effettua variazioni molto limitate e progressive quindi, in definitiva, migliori e più funzionali?
Secondo voi sarebbe meglio aumentare il carattere?
Grazie.
11
Secondo me non sono importanti le dimensioni, ma l’uso che se ne fa dell’em. Questa cosa tenetela a mente, che vi servirà anche quando entrerete nella pubertà.
# - postato da Dinamyc Duo - 09 Maggio 2008 - 17:08