Berapakah nilai unit 'ex' css?

87

(Jangan bingung dengan Xunit , pustaka pengujian unit .Net yang populer.)

Hari ini karena bosan saya mulai memeriksa DOM Gmails (ya, saya sangat bosan).

Semuanya terlihat cukup jelas sampai saya melihat spesifikasi yang menarik pada lebar elemen tertentu. Googlite termasyhur telah menentukan sejumlah kolom tabel menggunakan unit 'ex' yang langka.

width: 22ex;

Awalnya saya bingung ("apa itu 'mantan'?"), Lalu kembali lagi kepada saya: Sepertinya saya mengingat sesuatu dari beberapa tahun yang lalu ketika pertama kali saya belajar tentang CSS. Dari spesifikasi CSS3 :

[ Satuan ex adalah] sama dengan tinggi x yang digunakan dari font pertama yang tersedia . Tinggi x disebut demikian karena sering kali sama dengan tinggi huruf kecil "x". Namun, 'ex' didefinisikan bahkan untuk font yang tidak mengandung "x".

Baik dan bagus. Tapi saya belum pernah benar-benar melihatnya digunakan sebelumnya (apalagi menggunakannya sendiri). Saya cukup sering menggunakan ems, dan menghargai nilainya, tetapi mengapa "ex"? Tampaknya pengukuran yang jauh lebih standar daripada em, dan jauh kurang berguna.

Salah satu dari sedikit halaman yang saya temukan membahas topik ini adalah http://www.xs4all.nl/~sbpoley/webmatters/emex.html Stephen Poley . Stephen membuat poin bagus, bagaimanapun, pembahasannya tampaknya tidak meyakinkan bagi saya.

Jadi pertanyaan saya adalah: Nilai apa yang diberikan unit 'ex' untuk desain web?

(Pertanyaan ini dapat ditandai subjektif, tetapi saya akan menyerahkan keputusan itu kepada SO'ers yang lebih berpengalaman daripada saya sendiri.)

css specifications units-of-measurement Joel
sumber

Jawaban:

126

Ini berguna saat Anda ingin mengukur sesuatu dalam kaitannya dengan tinggi huruf kecil teks Anda. Misalnya, bayangkan mengerjakan desain seperti ini:

teks alt


Dalam dimensi tipografi desain, tinggi huruf memiliki hubungan spasial yang penting dengan elemen lainnya. Garis-garis pada gambar sumber di atas dimaksudkan untuk membantu menunjukkan tinggi-x teks, tetapi juga menunjukkan di mana pedoman akan berada jika mendesain di sekitar teks itu.

Seperti yang ditunjukkan Jonathan di komentar, ex hanyalah versi tinggi dari em (lebar).

Rex M
sumber
31
hanya untuk menambahkan, tingginya setara dengan menggunakan satuan 'em' untuk lebar
Jonathan Fingland
3
@ Joel Berapa rasio antara lebar m dan tinggi x untuk font tertentu? Meskipun sudah diperbaiki, namun berpotensi sangat sulit untuk dihitung, karena setiap font memiliki rasio yang berbeda dan sewenang-wenang antara m dan x-nya. Jadi, saat mendesain elemen yang harus sesuai dengan jenisnya, daripada harus menentukan sendiri rasionya, Anda dapat mengandalkan x-height untuk menjaga proporsinya.
Rex M
2
Poin lain yang cukup esoteris adalah menurut Mozilla Gecko dapat mengukur item menggunakan exe sedikit lebih akurat daripada yang menggunakan ems. Ukuran default "non-style" dari sebuah em adalah 10.06667px sedangkan ukuran ex adalah 6px. Ini berarti bahwa ketika menskalakan ems Firefox harus membulatkan piksel parsial lebih sering daripada ketika menskalakan ex.
benrifkah
1
Meskipun secara umum tidak benar, dapat dibayangkan bahwa 2ex kira-kira berukuran sama dengan 1em (walaupun tinggi huruf kapital biasanya kurang dari 1em). Spek CSS bahkan menyatakan "jika tidak mungkin atau tidak praktis untuk menentukan tinggi-x, nilai 0,5em harus diasumsikan."
natevw
20
@JonathanFingland @RexM Tidak seperti di tipografi cetak, dalam CSS, yang emsatuan tidak tidak mengukur lebar - itu mengukur ketinggian font. 1 emadalah dihitung font-sizenilai , dan font-sizemenspesifikasikan “ketinggian yang diinginkan dari mesin terbang” . Jadi keduanya emdan exukur ketinggian. ( chNamun, memang mengukur lebar.)
Rory O'Kane
20

Untuk menjawab pertanyaan tersebut, salah satu kegunaannya adalah dengan superskrip dan subskrip. Contoh:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}
jbs
sumber
1
Saya tidak berpikir itu benar-benar membantu menjelaskan apa itu "mantan".
senja-tidak aktif-
12
Pertanyaannya adalah "Berapa nilai unit 'ex' untuk desain web?". Bukan "apa itu mantan unit?" Joel melakukan pekerjaan yang sangat baik dalam mendefinisikan mantan unit dalam pertanyaan awal. Saya memberikan contoh praktis bagaimana Anda dapat menggunakannya untuk memposisikan superskrip.
jbs
1
Contoh praktis yang baik yang langsung menjawab pertanyaan. Sudah selesai dilakukan dengan baik.
Basil Bourque
2

Hal lain yang perlu dipertimbangkan di sini adalah bagaimana skala halaman Anda ketika pengguna menaikkan atau menurunkan ukuran font mereka (mungkin menggunakan ctrl + roda mouse (windows)).

Saya telah menggunakan em dengan .. padding-left: 2 em; padding-right: 2 em;

dan ex dengan padding-bottom: 2 ex; padding-top: 2 ex;

Jadi, menggunakan satuan ukuran vertikal untuk properti penskalaan vertikal dan satuan ukuran horizontal untuk properti penskalaan horizontal.


sumber
5
Baik em dan ex adalah satuan vertikal, karena keduanya didefinisikan sebagai tinggi huruf besar "M" dan huruf kecil "x" masing-masing. Keduanya dapat digunakan untuk panjang vertikal dan horizontal.
JacquesB
Untuk menambahkan ini, chadalah unit horizontal yang mengukur lebar angka nol ("0").
Matt F.
1

Nilai memilikinya dalam spesifikasi CSS, jika itu yang sebenarnya Anda tanyakan, sama persis dengan nilai memiliki unit em.

Ini memungkinkan Anda untuk mengatur font ke ukuran relatif .

Anda tidak tahu apa ukuran font dasar saya. Jadi salah satu strategi yang baik untuk desain web adalah mengatur ukuran font yang relatif, bukan absolut; setara dengan "gandakan ukuran normal Anda" atau "sedikit lebih kecil dari ukuran normal Anda" daripada ukuran tetap seperti "sepuluh piksel".

AmbroseChapel
sumber
Saya setuju dengan ini. Tapi bukankah spesifikasi em cukup untuk ini dan lebih dapat diandalkan?
Yoel
@JoelPotter ya, tetapi hanya untuk lebar; untuk ketinggian, extampaknya setara.
ANeves menganggap SE itu jahat
5
@ANeves Salah. Dalam CSS, em adalah tinggi font (kurang-lebih), bukan lebarnya . Dalam tipografi cetak, gagasan tentang em berasal dari lebar huruf besar M. Tapi CSS disempurnakan em. Lihat Wikipedia .
Basil Bourque
2
Jika Anda menginginkan lebar, gunakan chsatuan seperti yang disebutkan di jawaban lain.
Basil Bourque
1

Perhatikan bahwa, istilah seperti "spasi baris tunggal / ganda" sebenarnya berarti offset antara dua garis yang berdekatan, diukur dengan em . Jadi "spasi baris ganda" berarti setiap baris memiliki tinggi 2 em .

Oleh karena itu, jika Anda ingin menentukan jarak vertikal yang sebanding dengan "garis", gunakan em. Gunakan ex hanya jika Anda menginginkan tinggi sebenarnya dari huruf kecil, yang, menurut saya, adalah contoh yang jauh lebih jarang.

UPDATE: Standar web memungkinkan browser untuk menggunakan 0.5em sebagai ex atau berasal dari font.

Namun, tidak ada cara yang andal untuk menyematkan informasi "x-height" apa pun dalam font (OpenType atau webfont).

Oleh karena itu, kemungkinan pertama membuat mantan unit menjadi mubazir, dan yang terakhir tidak memiliki sarana yang dapat diandalkan untuk mewujudkannya. Dan fakta bahwa keduanya mungkin membuatnya semakin tidak dapat diandalkan.

Jadi saya berdebat karena kurangnya nilai dari ex-unit.

Yì Yáng
sumber
Pertanyaan ini secara khusus menanyakan nilainya, bukan artinya.
Matt F.