Jaka jest wartość jednostki CSS „ex”?

87

(Nie mylić z Xunit , popularną biblioteką testów jednostkowych .Net).

Dzisiaj w przypływie nudy zacząłem przeglądać Gmails DOM (tak, bardzo się nudziłem).

Wszystko wyglądało całkiem prosto, dopóki nie zauważyłem interesującej specyfikacji szerokości niektórych elementów. Znani Googlites określili liczbę kolumn tabeli, używając rzadkiej jednostki „ex”.

width: 22ex;

Na początku byłem zaskoczony („co to jest„ ex ”?”), A potem wróciło do mnie: wydaje mi się, że pamiętam coś sprzed lat, kiedy po raz pierwszy uczyłem się CSS. Ze specyfikacji CSS3 :

[Jednostka dawna jest] równa użytej wysokości x pierwszej dostępnej czcionki . Wysokość x jest tak nazywana, ponieważ często jest równa wysokości małej litery „x”. Jednak „ex” jest definiowane nawet dla czcionek, które nie zawierają znaku „x”.

Dobrze i dobrze. Ale tak naprawdę nigdy wcześniej go nie widziałem (a tym bardziej sam go używałem). Używam emsów dość często i doceniam ich wartość, ale dlaczego „ex”? Wydaje się, że jest to pomiar znacznie mniej standardowy niż em i znacznie mniej przydatny.

Jedną z niewielu stron omawiających ten temat jest http://www.xs4all.nl/~sbpoley/webmatters/emex.html Stephena Poleya . Stephen ma rację, jednak jego dyskusja wydaje mi się niejednoznaczna.

Moje pytanie brzmi: jaką wartość przydaje jednostka „ex” projektowaniu stron internetowych?

(To pytanie można oznaczyć jako subiektywne, ale pozostawię tę decyzję bardziej doświadczonym SO niż ja.)

Joel
źródło

Odpowiedzi:

126

Jest to przydatne, gdy chcesz zmienić rozmiar czegoś w odniesieniu do wysokości małych liter w tekście. Na przykład wyobraź sobie pracę nad takim projektem:

tekst alternatywny


W typograficznym wymiarze projektu wysokość liter ma istotne relacje przestrzenne z pozostałymi elementami. Linie na powyższym obrazku źródłowym mają pomóc wskazać wysokość x tekstu, ale pokazują również, gdzie byłyby wytyczne, gdyby projektować wokół tego tekstu.

Jak zauważył Jonathan w komentarzach, ex to po prostu wysokość em (szerokość).

Rex M
źródło
31
wystarczy dodać, że jest to odpowiednik wysokości użycia jednostki „em” jako szerokości
Jonathan Fingland
3
@Joel Jaki jest stosunek szerokości m do wysokości x dla danej czcionki? Nawet jeśli jest naprawiony, może być potencjalnie bardzo trudny do obliczenia, ponieważ każda czcionka ma inny i arbitralny stosunek między jej m i x. Dlatego podczas projektowania elementów, które powinny być zależne od typu, zamiast samemu określać stosunek, możesz polegać na wysokości x, aby zachować proporcje.
Rex M
2
Innym dość ezoterycznym punktem jest to, że według Mozilli Gecko może skalować elementy przy użyciu exe nieco dokładniej niż te, które używają em. Domyślny rozmiar „bez stylu” dla em to 10,06667px, a rozmiar ex to 6px. Oznacza to, że podczas skalowania ems Firefox musi częściej zaokrąglać częściowe piksele niż podczas skalowania plików exe.
benrifkah
1
Chociaż ogólnie nie jest to poprawne, można sobie wyobrazić, że 2ex ma mniej więcej ten sam rozmiar co 1em (chociaż wysokość dużej litery zwykle byłaby nieco mniejsza niż 1em). Specyfikacja CSS stwierdza nawet, że „jeśli nie jest możliwe lub niepraktyczne określenie wysokości x, należy przyjąć wartość 0,5em”.
natevw
20
@JonathanFingland @RexM przeciwieństwie do druku typografii, w CSS The emjednostka ma nie mierzyć szerokość - mierzy wysokość czcionki. 1 emjest obliczoną font-sizewartością i font-sizeokreśla „żądaną wysokość glifów” . Więc zarówno emi exzmierz wysokość. ( chjednak mierzy szerokość.)
Rory O'Kane
20

Aby odpowiedzieć na pytanie, należy użyć indeksu górnego i dolnego. Przykład:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
jbs
źródło
1
Nie sądzę jednak, żeby to naprawdę pomagało wyjaśnić, czym jest „ex”.
duskwuff -inactive-
12
Pytanie brzmi: „Jaką wartość nadaje jednostka„ ex ”projektowaniu stron internetowych?”. Nie „co to jest była jednostka?” Joel bardzo dobrze definiuje byłą jednostkę w pierwotnym pytaniu. Podaję praktyczny przykład tego, jak można go użyć do umieszczenia indeksu górnego.
jbs
1
Dobry praktyczny przykład, który bezpośrednio odpowiada na pytanie. Dobra robota.
Basil Bourque
2

Inną rzeczą do rozważenia jest to, jak twoja strona skaluje się, gdy użytkownik zwiększa lub zmniejsza rozmiar czcionki (na przykład używając ctrl + kółko myszy (okna)).

Użyłem ich z ... padding-left: 2 em; padding-right: 2 em;

i ex z wyściółką na dole: 2 ex; padding-top: 2 ex;

W ten sposób używa się pionowej jednostki miary dla właściwości skalowania w pionie i poziomej jednostki miary dla właściwości skalowania w poziomie.


źródło
5
Zarówno em, jak i ex są jednostkami pionowymi, ponieważ są zdefiniowane jako wysokość odpowiednio dużej litery „M” i małej litery „x”. Mogą być używane zarówno do długości pionowych, jak i poziomych.
JacquesB
Do tego chdochodzi pozioma jednostka mierząca szerokość cyfry zerowej („0”).
Matt F.
1

Wartość posiadania go w specyfikacji CSS, jeśli o to naprawdę pytasz, jest dokładnie taka sama, jak wartość posiadania jednostki em.

Umożliwia ustawienie czcionek na względne rozmiary.

Nie wiesz, jaki jest mój podstawowy rozmiar czcionki. Tak więc jedną z dobrych strategii projektowania stron internetowych jest ustawienie rozmiarów czcionek, które są względne, a nie bezwzględne; odpowiednik „podwójnego rozmiaru normalnego” lub „trochę mniejszego niż normalny rozmiar” zamiast stałego rozmiaru, takiego jak „dziesięć pikseli”.

AmbroseChapel
źródło
Zgadzam się z tym. Ale czy ich specyfikacja nie jest do tego wystarczająca i bardziej niezawodna?
Joel
@JoelPotter tak, ale tylko dla szerokości; w przypadku wysokości exwydaje się być odpowiednikiem.
ANeves uważa, że ​​SE jest złem
5
@ANeves Incorrect. W CSS em to wysokość czcionki (w przybliżeniu), a nie szerokość . W typografii drukowanej idea em pochodziła z szerokości dużej litery M. Ale udoskonalony CSS em. Zobacz Wikipedię .
Basil Bourque
2
Jeśli chcesz szerokość, użyj chjednostki wymienionej w innej odpowiedzi.
Basil Bourque
1

Zwróć uwagę, że terminy takie jak „pojedynczy / podwójny odstęp między wierszami” w rzeczywistości oznaczają przesunięcie między dwoma sąsiednimi wierszami, mierzone za pomocą em . Zatem „podwójny odstęp między wierszami” oznacza, że ​​każdy wiersz ma wysokość 2 em .

Dlatego jeśli chcesz określić odległość w pionie, która jest proporcjonalna do „linii”, użyj em. Używaj ex tylko wtedy, gdy chcesz podać rzeczywistą wysokość małej litery, co, jak ośmielę się powiedzieć, jest znacznie rzadszym przypadkiem.

AKTUALIZACJA: Standard sieciowy pozwala przeglądarce na używanie 0.5em jako ex lub wyprowadzania z czcionki.

Jednak nie ma sposobu na niezawodne osadzenie jakichkolwiek informacji o wysokości „x” w czcionce (OpenType lub czcionka internetowa).

W związku z tym pierwsza możliwość sprawia, że ​​była jednostka jest zbędna, a drugiej brakuje jakichkolwiek niezawodnych środków, aby się wydarzyć. A fakt, że jedno i drugie jest możliwe, czyni go jeszcze mniej niezawodnym.

Dlatego argumentuję za brakiem wartości byłej jednostki.

Yì Yáng
źródło
To pytanie dotyczy konkretnie jego wartości, a nie znaczenia.
Matt F.