Mengambil Ems Lebih Jauh

Baru-baru ini saya menulis tentang ems; apa mereka, bagaimana mereka digunakan dan beberapa potongan-potongan yang perlu diingat ketika Anda menerapkannya sendiri. Saya hanya menggaruk permukaan, dan utas komentar melemparkan dua kali lebih banyak pertanyaan sebagai artikel menjawab! Dalam tindak lanjut ini saya akan mengambil langkah lebih jauh, melihat mereka lebih detail.

Catatan: Artikel sebelumnya mencakup semua dasar-dasarnya. Saya sarankan Anda membaca tentang mereka sebelum melangkah lebih jauh.

Nilai Pengukuran Tanpa Unit

Subjek pengukuran tanpa unit (yaitu: nilai tanpa piksel, persentase, em, yard, depa..) ditawarkan oleh beberapa orang terakhir kali, terutama karena saya mendorong penggunaan ems untuk menentukan line-height.

Ems sangat masuk akal dalam hal ini karena relatif terhadap font-size. Jika teks yang dipermasalahkan tumbuh atau menyusut, demikian juga garis-tingginya jika diset dalam ems. Unit absolut, seperti piksel, akan benar-benar mengacaukan segalanya. Hal yang sama berlaku untuk letter-spacing, contoh lain dari dimensi yang harus selalu relatif terhadap ukuran font.

Namun, kita dapat memperbaiki ini. Ems mempersulit hal-hal ketika nilai-nilai mereka mengalir; elemen mewarisi nilai em induk mereka. Ambil pengaturan ini misalnya: artikel yang berisi paragraf:

Jika kita menerapkan tinggi baris ke artikel, itu juga akan diwarisi oleh paragraf, yang bagus:

Tetapi apa yang sebenarnya diwariskan paragraf adalah nilai yang dihitung (dalam hal ini efektif 24px), sehingga tinggi garis relatif terhadap ukuran font artikel, bukan miliknya sendiri. Jika kita menambah ukuran font paragraf menjadi setara dengan 20px:

maka ketinggian garisnya tetap pada 24px. Idealnya, kita ingin ketinggian garisnya muncul 1.5 * 20 = 30px.

Di sinilah pengukuran tanpa unit masuk. Dengan menghapus unit em dari tinggi baris artikel:

paragraf akan mewarisi nilai unitless, 1.5. Ketinggian paragraf sekarang relatif terhadap ukuran font-nya sendiri, bingo!

Menariknya, ini tidak berlaku untuk letter-spacing. Dan Anda dapat sepenuhnya melupakan margin, teks-indent, hal semacam itu.

Jika Anda tertarik untuk membaca lebih lanjut tentang topik ini, Eric Meyer membahasnya dengan kuat pada tahun 2006, ditambah Harry Roberts memiliki tinjauan luas unit pengukuran dari beberapa tahun yang lalu.

EMS dan Macrotypography

Sedangkan microtypography mengacu pada detail kecil dalam dokumen (tanda baca, ligatur, tanda hubung, kerning, dan sebagainya) macrotypography menangani semua hal "besar". Pikirkan tentang semua aspek tipografi yang membuat tubuh teks dapat dibaca; spasi putih, panjang garis (ukur), lekukan paragraf, dll.

Lihatlah pengaturan kolom cairan ini:

Layout yang sangat baik; dua div, masing-masing tepat 50% lebar, dengan beberapa padding kiri dan kanan untuk membentuk talang (di dalam setiap div, dengan asumsi * { box-sizing: border-box } sedang digunakan). Biasanya, Anda akan tergoda untuk menentukan bantalan menggunakan piksel, atau (bahkan lebih baik) persentase, jika Anda merasa sangat fleksibel.

Namun, piksel dan persentase keduanya akan memiliki efek yang merugikan pada keterbacaan konten, jika (ketika) ukuran font diubah. Lebar selokan, seperti halnya spasi putih pada umumnya, harus benar-benar berukuran relatif terhadap teks. Dalam contoh ini, kita memiliki dua kolom teks, dengan talang air diterapkan sebagai persentase dari lebar kolom, seperti yang dijelaskan di atas:

1

.column {

2

  width: 50%;

3

	float: left;

4

	padding: 0 3%;

5

}

Namun, ketika Anda mengubah ukuran font, Anda akan melihat selokan menjadi relatif lebih sempit, mengaburkan pembagian antara kolom teks dan membuatnya lebih sulit untuk dibaca.

Jauh lebih baik untuk mendefinisikan padding menggunakan ems:

1

.column {

2

	width: 50%;

3

	float: left;

4

	padding: 0 1.2em;

5

}

Dengan cara ini, selokan tumbuh dan menyusut bersama dengan teks, menjaga jarak antara kolom dan menjaga hal-hal yang mudah dibaca.

Setup Ol' 62.5%

Jika Anda belum menggunakan ems, mungkin salah satu dari dua hal yang tidak Anda sukai tentang mereka; fakta bahwa nilai-nilai mereka mengalir, atau harus menghitung nilai-nilai itu di tempat pertama.

Pendekatan 62.5% (pertama kali diusulkan oleh Richard Rutter pada 2004) akan membantu Anda untuk yang kedua. Sederhananya, alih-alih mengatur ukuran font dasar menjadi 100% (yang dianggap 16px), kita menetapkannya menjadi 62.5%, efektif 10px.

Dari titik itu, 1em = 10px. Karena itu:

dan seterusnya, yang seharusnya menghilangkan beberapa aritmatika mental. Namun, ada masalah kecil dengan pendekatan ini, dan itu semua ada hubungannya dengan...

Pertanyaan Media Berbasis Em

Kita akan berbicara sedikit tentang peringatan 62.5% dalam beberapa saat, tetapi pertama-tama kita perlu meletakkan beberapa yayasan.

Dalam bentuknya yang paling sederhana, pertanyaan media membantu kita menerapkan aturan CSS dalam keadaan yang berbeda, umumnya tergantung pada ukuran layar. Resolusi layar diukur dalam piksel, jadi masuk akal jika kita mendefinisikan pertanyaan media dengan cara yang sama:

1

@media only screen and (min–width: 600px) {

2

/*some stuff*/

3

}

Mari terapkan ini pada demo kita sebelumnya, untuk membagi kolom setelah titik tertentu.

Angka sewenang-wenang 600px kebetulan baik-baik saja dalam kasus ini; panjang garis optimal (atau ukuran) adalah topik yang sangat diperdebatkan, tetapi seperti yang dikatakan Robert Bringhurst:

Apa pun dari 45 hingga 75 karakter secara luas dianggap sebagai panjang baris yang memuaskan untuk halaman satu kolom yang diatur dalam wajah teks serif dalam ukuran teks. Garis 66 karakter (menghitung huruf dan spasi) secara luas dianggap ideal.

Robert Brighurst - Unsur-unsur Gaya Tipografi

Dalam demo kita, pada ukuran font 1em, ukurannya sekarang mencapai sekitar 70 karakter sebelum dipecah menjadi dua kolom.

Setelah menekan dua kolom, ukurannya mungkin sedikit lebih sempit dari yang diinginkan, tetapi kolom ini benar-benar oke untuk keperluan demo ini. Namun, masalah muncul ketika kita mengubah ukuran font browser kita (tekan command +).

Dengan ukuran font yang ditingkatkan menjadi "Sangat Besar" (Saya menggunakan Chrome) ukuran kolom kita terlalu sempit, membuat kontennya tidak terbaca. Karena alasan ini, kita juga harus mempertimbangkan untuk membuat pertanyaan media kita relatif terhadap ukuran font.

Ingat rumus dari artikel kami sebelumnya?

Kita bertujuan untuk 600px, dari ukuran font yang diwarisi 16px. 600/16 = 37.5em, jadi mari kita ubah petanyaan media untuk mencerminkan bahwa:

Sekarang, ketika pengaturan ukuran font peramban kita diubah, kita melihat perbedaan dalam cara pertanyaan media berperilaku. Dengan teks yang lebih besar, inilah pertanyaan media berbasis piksel, dengan viewport yang ditetapkan sekitar 630px lebar:

Sedangkan, pada lebar layar itu, pertanyaan media berbasis em membuat semuanya rapi dalam satu kolom; bagus dan enak dibaca.

Kembali ke hal 62.5%

Inilah krisisnya; pertanyaan media berbasis em benar-benar tidak tertarik dalam ukuran apa pun pada html, body, atau apa pun; mereka relatif terhadap ukuran font browser. Ini berarti bahwa, dengan mengatur ukuran font dasar ke hal lain selain 100%, Anda harus mengelola dua skala nilai em.

Bekerja dari basis 100% dan semuanya akan dimulai dari level playing field. Selain itu, seperti pendapat Filament Group, bekerja dengan cara ini menjauhkan Anda dari berpikir dalam piksel, yang merupakan hal yang baik.

Ems, Rems, Fungsi dan Mixin

Satu kata muncul lebih dari yang lain di utas komentar dari artikel sebelumnya; mixin. Jika Anda kesulitan untuk melakukan perhitungan, lalu mengapa tidak membiarkan preprocessor CSS melakukan pekerjaan berat untuk Anda?

Dengan preprocessor CSS, seperti Sass, LESS dan Stylus, Anda dapat menentukan mixin dan fungsi. Ini menerima parameter, lalu menghitung dan menghasilkan nilai CSS untuk Anda.

Catatan: Jika Anda baru mengenal konsep ini, lihatlah Mastering Sass: Pelajaran 2 di mana Jeffrey memperkenalkan Sass mixin.

Mixin dan fungsi dapat menangani semua jenis hal untuk Anda, termasuk matematika yang merepotkan di sekitar mereka.

Ambil contoh sederhana ini dari Garrett Winder di Erskine. Dia mulai mendefinisikan fungsi (disebut "em") yang menerima dua nilai (seperti rumus kita sebelumnya) meskipun nilai konteks memiliki default 16, jadi tidak perlu ditentukan lagi kecuali diperlukan.

Kita kemudian dapat menggunakan fungsi "em" itu dalam CSS setelahnya, memintanya untuk menghitung setara dengan 30px:

Yang, ketika dikompilasi, menghasilkan CSS dalam bentuk raw:

Dan ini bukan satu-satunya contoh dari jenisnya - ribuan developers front-end telah memotong gigi preprocessing mereka dengan menulis mixin mereka sendiri. Rems juga; dengan memasukkan nilai piksel yang diinginkan dalam mixin ini yang ditampilkan oleh Chris Coyier, Anda dapat dengan mudah membuat output yang dihasilkan, dengan piksel fallback.

Daftar ini hampir tidak ada habisnya, tetapi jika Anda memiliki mixin yang ingin digunakan dalam pekerjaan Anda sendiri (untuk menghasilkan em dan rem) beri tahu saya di komentar dan saya akan menambahkannya di sini:

Sass

• Mixins untuk Rem Font Size pada Trik CSS
• The Ultimate PX/REM Mixin dari Hugo Giraudel
• rem dari bitmanic di GitHub
• Scss Rem Mixin Sekarang Dengan Fallback Lebih Baik dari Sparkbox's Adam Simpson

Less

• Mixins untuk Rem Font Size pada Trik CSS
• The REM Fallback with Sass or LESS by Hans Christian
• Menggunakan unit rem dengan fallback piksel yang mudah oleh beberapa pria bernama Cory Simmons
• Kurang Mixin dari Martin Mich & lek; pada Codepen

Stylus

• Ukuran font menggunakan rem dengan fallback di Stylus dari Yuya Saito
• Komentar pada Trik CSS dari Maxim
• Wow.. daftar ini butuh bantuan 

Kesimpulan

Ini adalah subjek yang luas, jelas ada banyak hal yang harus diperhatikan, tetapi terjun ke dunia ems adalah salah satu tantangan yang lebih memuaskan dalam pengembangan web front-end. Hentikan berpikir piksel dan mulai berpikir relatif, hari ini!