Qual è il valore dell'unità css 'ex'?

Question

(da non confondere con Xunit, un popolare libreria di unit testing Net.)

oggi in un attacco di noia, ho iniziato a ispezionare di Gmail DOM (sì, ero molto annoiato).

Tutto sembrava molto semplice fino a quando ho notato una specifica interessante sulla larghezza di alcuni elementi. Gli illustri googliti avevano specificato un certo numero di colonne da tavolo usando la rara unità "ex".

width: 22ex; 

All'inizio ero perplesso ("? Che cosa è un 'ex'"), poi è tornato a me: mi sembra di ricordare qualcosa di anni fa, quando prima stavo imparando sui CSS. From the CSS3 spec:

[L'ex unità è] uguale x-altezza utilizzata del first available font. L'altezza x è così chiamata perché spesso è uguale all'altezza della "x" minuscola. Tuttavia, un 'ex' è definito anche per i caratteri che non contengono una "x".

Bene e bene. Ma non l'ho mai visto prima (molto meno usato da solo). Uso ems abbastanza comunemente, e apprezzo il loro valore, ma perché l '"ex"? Sembra molto meno standard di una misurazione rispetto all'em e molto meno utile.

Una delle poche pagine che ho trovato a discutere di questo argomento è Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen ha dei buoni punti, tuttavia la sua discussione sembra inconcludente per me.

Quindi la mia domanda è: Che valore attribuisce l'unità "ex" al web design?

(Questa domanda potrebbe essere etichettato soggettivo, ma lascio che la decisione di SO'ers più esperti di me.)

Answer 1

E 'utile quando si desidera qualcosa di dimensione in relazione all'altezza della vostra lettere minuscole del testo. Ad esempio, immaginare di lavorare su un progetto in questo modo:

Nella dimensione tipografica del design, l'altezza delle lettere ha importanti relazioni spaziali con il resto degli elementi. Le linee nell'immagine sorgente sopra sono pensate per aiutare a evidenziare l'altezza x del testo, ma mostrano anche dove dovrebbero essere le linee guida se si progetta attorno a quel testo.

Come ha sottolineato Jonathan nei commenti, ex è semplicemente la versione di altezza di em (larghezza).

Answer 2

Il valore di che ha nelle specifiche CSS, se questo è quello che stai veramente chiedendo, è esattamente lo stesso del valore di avere l'unità em.

Consente di impostare i caratteri su relative dimensioni.

Non si sa quale sia la dimensione del mio carattere di base. Quindi una buona strategia per il web design è di impostare le dimensioni dei caratteri che sono relativi, piuttosto che assoluti; l'equivalente di "raddoppia la tua dimensione normale" o "un po 'più piccola della tua dimensione normale" piuttosto che una dimensione fissa come "dieci pixel".

Answer 3

Un'altra cosa da considerare qui è il modo in cui la pagina si ridimensiona quando un utente aumenta o diminuisce la dimensione del proprio carattere (magari usando ctrl + rotellina del mouse (Windows)).

L'ho usato con .. padding-left: 2 em; padding-right: 2 em;

ed ex con fondo inferiore: 2 ex; padding-top: 2 ex;

Quindi utilizzando un'unità di misura verticale per una proprietà di ridimensionamento verticale e un'unità di misura orizzontale per una proprietà di ridimensionamento orizzontale.

Answer 4

Si noti che termini come "interlinea singola/doppia" indicano effettivamente l'offset tra due righe adiacenti, misurate da em. Quindi "interlinea doppia" significa che ogni riga ha un'altezza di 2 em.

Pertanto, se si desidera specificare una distanza verticale proporzionale a "linee", utilizzare em. Utilizzare solo ex se si desidera l'altezza effettiva della lettera minuscola, che è, oserei dire, un'istanza molto più rara.

Answer 5

Per rispondere alla domanda, un uso è con apice e pedice. Esempio:

sup { 
    font-size: 75%; 
    height: 0; 
    line-height: 0; 
    position: relative; 
    vertical-align: baseline; 
    bottom: 1ex; 
}