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

87

(Da non confondere con Xunit , una popolare libreria di test di unità .Net.)

Oggi in un impeto di noia ho iniziato a ispezionare il DOM di Gmail (sì, ero molto annoiato).

Tutto sembrava piuttosto semplice finché non ho notato una specifica interessante sulle larghezze di alcuni elementi. Gli illustri googliti avevano specificato un numero di colonne da tavolo utilizzando la rara unità "ex".

width: 22ex;

All'inizio ero perplesso ("cos'è un 'ex'?"), Poi mi è tornato in mente: mi sembra di ricordare qualcosa di anni fa quando stavo imparando i CSS per la prima volta. Dalle specifiche CSS3 :

[L' unità ex è] uguale all'altezza x usata del primo carattere disponibile . La x-height è così chiamata perché spesso è uguale all'altezza della "x" minuscola. Tuttavia, un 'ex' è definito anche per i caratteri che non contengono una "x".

Buona e giusta. Ma non l'ho mai visto usato prima (tanto meno l'ho usato io stesso). Uso gli em abbastanza comunemente e apprezzo il loro valore, ma perché "ex"? Sembra una misura molto meno standard di quella em e molto meno utile.

Una delle poche pagine che ho trovato che discute di questo argomento è http://www.xs4all.nl/~sbpoley/webmatters/emex.html di Stephen Poley . Stephen sottolinea bene, tuttavia, la sua discussione mi sembra inconcludente.

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

(Questa domanda potrebbe essere etichettata come soggettiva, ma lascerò questa decisione a SO più esperti di me.)

css specifications units-of-measurement

— Joel
fonte

126

È utile quando vuoi ridimensionare qualcosa in relazione all'altezza delle lettere minuscole del tuo testo. Ad esempio, immagina di lavorare su un design 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 hanno lo scopo di aiutare a evidenziare l'altezza x del testo, ma mostrano anche dove sarebbero le linee guida se si progettasse attorno a quel testo.

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

— Rex M
fonte

31

solo per aggiungere, è l'equivalente in altezza dell'utilizzo dell'unità 'em' per la larghezza

— Jonathan Fingland,

3

@Joel Qual è il rapporto tra la larghezza di me l'altezza di x per un dato carattere? Anche se è fisso, può essere potenzialmente molto difficile da calcolare, perché ogni carattere ha un rapporto diverso e arbitrario tra la sua m e la sua x. Quindi, quando progetti elementi che dovrebbero essere relativi al tipo, invece di dover determinare tu stesso il rapporto, puoi fare affidamento sull'altezza x per mantenere le cose in proporzione.

— Rex M

2

Un altro punto abbastanza esoterico è che secondo Mozilla Gecko può ridimensionare gli oggetti usando exes un po 'più accuratamente di quelli che usano ems. La dimensione predefinita "non stilizzata" di un em è 10.06667px mentre la dimensione di un ex è 6px. Ciò significa che quando si ridimensiona ems Firefox deve arrotondare i pixel parziali più spesso rispetto a quando si ridimensiona exes.

— Benrifkah

1

Sebbene non sia generalmente corretto, è valido immaginare che 2ex abbia all'incirca la stessa dimensione di 1em (sebbene l'altezza di una lettera maiuscola sarebbe in genere leggermente inferiore a 1em). La specifica CSS afferma anche "dove è impossibile o non pratico determinare l'altezza x, si deve assumere un valore di 0,5em".

— natevw

20

@JonathanFingland @RexM A differenza di tipografia stampa, in CSS, l' emunità non non misura una larghezza - misura l'altezza del carattere. 1 emè il font-sizevalore calcolato e font-sizespecifica "l'altezza dei glifi desiderata" . Quindi entrambi eme exmisurare un'altezza. ( ch, tuttavia, misura una larghezza.)

— Rory O'Kane,

20

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;
}

— jbs
fonte

1

Tuttavia, non credo che questo aiuti a spiegare cosa sia un "ex".

— duskwuff -inattivo-

12

La domanda è: "Che valore dà l'ex unità al web design?". Non "cos'è una ex unità?" Joel fa un ottimo lavoro nel definire una ex unità nella domanda originale. Sto fornendo un esempio pratico di come puoi usarlo per posizionare un apice.

— jbs

1

Buon esempio pratico che risponde direttamente alla domanda. Molto bene.

— Basil Bourque

2

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

Li ho usati con .. padding-left: 2 em; padding-right: 2 em;

ed ex con imbottitura inferiore: 2 ex; imbottitura superiore: 2 ex;

Utilizzando quindi un'unità di misura verticale per una proprietà di ridimensionamento verticale e un'unità di misura orizzontale per una proprietà di ridimensionamento orizzontale.

5

Sia em che ex sono unità verticali, poiché sono definite rispettivamente come l' altezza della "M" maiuscola e della "x" minuscola. Possono essere utilizzati sia per lunghezze verticali che orizzontali.

— JacquesB

Per aggiungere a questo, chè un'unità orizzontale che misura la larghezza del numero zero ("0").

— Matt F.

1

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

Ti consente di impostare i caratteri su dimensioni relative .

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

— AmbroseChapel
fonte

Sono d'accordo con questo. Ma le specifiche em non sono sufficienti per questo e più affidabili?

— Joel

@JoelPotter sì, ma solo per larghezze; per le altezze, exsembra essere l'equivalente.

— ANeves pensa che SE sia il male

5

@ANeves errato. In CSS un em è l' altezza di un carattere (approssimativamente), non la larghezza . Nella tipografia stampata, l'idea di un em veniva dalla larghezza di una maiuscola M. Ma CSS perfezionato em. Vedi Wikipedia .

— Basil Bourque

2

Se vuoi la larghezza, usa l' chunità come menzionato in un'altra risposta.

— Basil Bourque

1

Nota che termini come "interlinea singola / doppia" in realtà significano l'offset tra due linee adiacenti, misurato da em . Quindi "interlinea doppia" significa che ogni linea ha un'altezza di 2 em .

Quindi, se vuoi specificare una distanza verticale proporzionale a "linee", usa em. Usa ex solo se vuoi l'altezza effettiva della lettera minuscola, che è, oserei dire, un'istanza molto più rara.

AGGIORNAMENTO: Lo standard web consente al browser di utilizzare 0.5em come ex o derivare dal carattere.

Tuttavia, non è possibile incorporare in modo affidabile le informazioni "x-height" in un font (OpenType o webfont).

Quindi, la prima possibilità rende ridondante l'ex unità, e la seconda non ha mezzi affidabili per realizzarsi. E il fatto che sia possibile lo rende ancora meno affidabile.

Quindi sostengo la mancanza di valore dell'ex unità.

— Yì Yáng
fonte

Questa domanda chiede specificamente il suo valore, non il suo significato.

— Matt F.