Pertahankan ritme vertikal dengan CSS dan jQuery

Isi

• Jenis tata letak
• Irama vertikal
• Melakukan ritme
• Berurusan dengan gambar
• Meningkatkan jQuery
• Kesimpulan

• Pengetahuan dibutuhkan: CSS, jQuery dasar
• Membutuhkan: jQuery, CSS, HTML
• Waktu proyek: 30 menit
• Unduh file sumber

Dengan asumsi Anda mendesain dari konten keluar, keputusan pertama mempengaruhi desain Anda memiliki menjadi tipe terkait. Bahkan oleh tidak memilih jenis huruf Anda telah melakukan sesuatu yang memengaruhi situs Anda. Jenis adalah inti untuk mencetak dan desain web, dan itu rumit; Ada banyak akumulasi istilah, praktik, aturan, dan teknik yang digunakan dengan baik. Artikel ini membahas satu teknik untuk mengelola satu aspek jenis, teknik yang sulit dilakukan secara online tetapi rutin dicetak: mempertahankan ritme vertikal yang konsisten, yang pada gilirannya memungkinkan kami mencapai tata letak profesional.

Jenis tata letak

Dalam cetakan, untuk item apa pun dengan jumlah teks yang cukup besar, dasar desain kemungkinan besar adalah kisi-kisi dasar. Ini digunakan untuk menghadirkan struktur ke halaman dan memandu aliran vertikal konten. Hampir semuanya ditempatkan sehubungan dengan grid baseline tersebut. Jangan khawatir jika Anda tidak mengenali istilahnya, tidak ada yang tidak terbiasa dengan garis dasar atau petak dasar; Anda sudah tahu tentang mereka. Pikirkan kembali ke sekolah, ketika Anda pasti menulis di kertas bergaris - saat Anda menulis, Anda meletakkan bagian bawah surat Anda dengan rapi di setiap baris di atas kertas. Kisi baseline dan baseline beraksi. Garis dasar adalah garis imajiner tempat bagian bawah huruf sejajar.Jika Anda melihat artikel ini sekarang, Anda akan "melihat" garis dasarnya, meskipun sebenarnya tidak ada garis. Otak Anda menempatkannya di sana untuk Anda, itulah mengapa Anda dapat membaca kalimat. Garis di atas kertas bergaris? Mereka adalah petak dasar. Lurus sehingga kalimat Anda lurus, dan atur secara berkala sehingga teks Anda memiliki ritme vertikal yang teratur.

Irama vertikal

Irama vertikal menentukan lokasi teks halaman. Ini adalah salah satu komponen yang memengaruhi kemampuan kita untuk memindai dan membaca blok teks, dan membantu menginformasikan respons emosional kita. Jika teks memiliki ritme vertikal yang kuat dan spasi yang baik, kami merasa teks tersebut profesional, dipertimbangkan, berwibawa, dan nyaman untuk dibaca. Ketika teks memiliki ritme dan spasi yang buruk, kami merasa teks tersebut kurang dipertimbangkan, kurang profesional, dan seringkali lebih sulit untuk dibaca. Irama vertikal merupakan salah satu bagian kegunaan dan satu bagian estetika.

Melakukan ritme

Sayangnya web masih merupakan sepupu yang buruk dari media cetak dalam hal kemampuannya untuk memberlakukan beberapa praktik dasar tentang jenis. Di web, kami tidak dapat menggunakan petak garis dasar dengan cara yang sama seperti yang dilakukan oleh perancang cetak (atau anak di sekolah) - kami tidak dapat menyelaraskan garis dasar teks dengan kisi garis dasar dokumen. CSS tidak memiliki konsep grid baseline. Jadi, teks kita tidak akan tepat berada di garis petak dasar. Sebaliknya, itu akan dipusatkan secara vertikal di celah antara garis. Itu yang terbaik yang bisa dilakukan web.

Mari berlatih dengan contoh dokumen. Pertama, kita akan menyetel ketukan dengan membuat kisi dasar yang terlihat. Untuk melakukan ini, kita akan menggunakan gambar latar berulang untuk menggambar garis horizontal biasa dengan jarak 22 piksel:

1. html {background: #fff url (baseline_22.png); }

Hore, kami memiliki kertas bergaris kami!

Anda akan melihat bahwa tidak ada yang berbaris. Untuk membuat semuanya berbaris, kami ingin tepi bawah semua elemen mencapai salah satu garis itu. Cara termudah untuk melakukannya adalah memastikan semua elemen mengambil ketinggian vertikal (termasuk margin) yang merupakan kelipatan 22. Berikut beberapa CSS yang melakukan hal itu. Saya menggunakan unit REM, tetapi memberikan penggantian EM untuk browser yang tidak memahami REM. Saya juga menyertakan unit PX yang setara dalam komentar. Jika Anda belum memahami REM / EM, Anda dapat menggunakan nilai px - semuanya setara:

1. html {/ * ukuran font: 16px, tinggi baris: 22px * /
2. jenis huruf: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. background: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * margin-top dan bottom keduanya 22px * /
6. / * em fallback * / margin: 1.375em 0;
7. margin: 1.375rem 0; }
8. h1 {/ * ukuran font 32px, tinggi baris 44px * /
9. / * em fallback * / font-size: 2em;
10. ukuran font: 2rem; tinggi garis: 1,375; }
11. h2 {/ * ukuran font 26px, tinggi baris 44px * /
12. / * em fallback * / font-size: 1.75em;
13. ukuran font: 1.75rem; tinggi baris: 1.5714285714; }
14. h3, h4, h5, h6 {/ * ukuran font 22px, tinggi baris 22px * /
15. / * em fallback * / font-size: 1.375em;
16. ukuran font: 1.375rem; tinggi garis: 1; }
17. p, ul, blockquote {/ * margin bawah adalah 22px, tinggi baris diwarisi dari html (22px) * /
18. / * em fallback * / margin-top: 0; margin bawah: 1.375em;
19. margin-top: 0; margin bawah: 1.375rem; }

Mari kita lihat apa yang memberi kita. Perhatikan bagaimana semua teks sejajar dengan baik? Itu tidak berada di garis dasar, tetapi memiliki ritme vertikal yang dapat diprediksi. Bagus dan rapi.

Berurusan dengan gambar

Gambar membuat segalanya lebih rumit. Lihatlah apa yang terjadi pada ritme kita saat kita memasukkan beberapa. Mereka mengacaukannya seperti lompatan dalam rekaman - tempo tepat tetapi waktunya tidak tepat. Penjajaran menjadi bergeser. Itu karena gambar kemungkinan tidak memiliki tinggi yang kelipatan dari garis dasar, sehingga tepi bawah tidak sejajar dengan petak garis dasar kami.

Untuk memperbaikinya, yang benar-benar perlu kita lakukan adalah menambahkan margin ke setiap gambar, membuat bagian bawah margin sejajar dengan grid kita. Yang cukup sederhana untuk diotomatisasi dengan sedikit JavaScript. Inilah rencana dasar kami:

1. Cari tahu ketinggian setiap gambar.
2. Lihat berapa kali nilai garis dasar terbagi menjadi ruang vertikal yang digunakan gambar saat ini, dan dapatkan sisanya.
3. Kurangi sisanya dari baseline untuk memberikan offset yang perlu kita terapkan pada gambar.
4. Terapkan offset sebagai margin ke bagian bawah gambar.

Ruang vertikal bagian bawah gambar sekarang akan disejajarkan dengan benar dengan kisi garis dasar. Berikut fungsi dasar di jQuery yang melakukan ini:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). each (function () {
3. / * variabel * /
4. var this_img = $ (ini);
5. var baseline = 22;
6. var img_height = this_img.height ();
7. / * mengerjakan matematika * /
8. var sisa = parseFloat (img_height% baseline);
9. / * berapa banyak yang perlu kita tambahkan? * /
10. var offset = parseFloat (baseline-sisa);
11. / * terapkan margin ke gambar * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Mengapa window.bind garis? Karena kita harus menunggu sampai gambar dimuat sebelum kita bisa mendapatkan ukurannya dengan andal. Berikut contoh menjalankan kode dasar ini.

Meningkatkan jQuery

Dunia jarang lurus ke depan, dan ternyata di sini - kita harus berurusan dengan beberapa detail penerapan. Apa yang salah dengan fungsi yang kita miliki? Banyak:

• Ini menghasilkan hasil yang buruk dengan gambar yang sejajar, bukan melayang atau memblokir.
• Tampaknya ada bug pada beberapa gambar, khususnya yang ada di dalam kontainer.
• Itu tidak berurusan dengan tata letak cair.
• Ini tidak terlalu bisa digunakan kembali.

Kami tidak ingin menerapkan perilaku ini pada gambar yang sebaris, seperti wajah smiley pada contoh. Gambar sebaris diratakan sehingga tepi bawah berada di garis dasar yang sama dengan teks (tidak grid dasar). Itu berarti gambar diimbangi secara vertikal. Baik CSS maupun JS tidak memberi kami cara untuk mencari tahu di mana letak dasar untuk elemen teks, jadi kami tidak tahu offsetnya. Kita harus mengabaikan gambar sebaris, dan menerapkan perbaikan kami hanya untuk gambar yang disetel ke tampilan: blok (untungnya, gambar mengambang apa pun secara otomatis diatur ke blok tampilan).

Jika gambar berada dalam wadah, margin yang diterapkan ke gambar mungkin disembunyikan karena pengaturan luapan pada wadah. Selain itu, kita mungkin tidak menginginkan margin pada gambar, tetapi pada elemen kontainer. Dalam contoh, kita lebih suka memiliki margin pada kotak putih daripada pada gambar di dalam kotak, jadi kita dapat menghindari celah aneh yang muncul di dalam kotak.

Fungsi ini hanya berjalan satu kali, tetapi pada desain cair, tinggi gambar berubah ketika ukuran browser diubah (coba ubah ukuran contoh menjadi sesuatu yang cukup sempit untuk melihat ini). Mengubah ukuran akan menghentikan ritme lagi. Kita membutuhkan fungsi untuk dijalankan setelah browser diubah ukurannya serta setelah pemuatan halaman. Tata letak cair juga menimbulkan masalah lain; tinggi gambar dapat berupa pecahan piksel, misalnya 132,34 piksel. Hal itu pada gilirannya dapat menyebabkan hasil yang tidak diharapkan, meskipun kami menerapkan margin pecahan (jika Anda tertarik, inilah alasannya: trac.webkit.org/wiki/LayoutUnit). Jadi, kita perlu memijat gambar menjadi satu tinggi piksel untuk menghindari bug tata letak yang disebabkan oleh piksel pecahan.

Terakhir, kita harus membuatnya menjadi fungsi yang lebih dapat digunakan kembali. Faktanya, dengan kompleksitas solusi praktis yang dibutuhkan di atas solusi teoritis, kita harus membuat plug-in yang dapat digunakan kembali dalam proyek lain.

Pada contoh terakhir Anda akan menemukan kode yang mencapai semua ini. JavaScript pengaya diberi banyak komentar sehingga Anda dapat mengikutinya. Anda dapat menggunakan plugin dengan memanggilnya sebagai berikut:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ();
3. });

Atau, Anda dapat memberi tahu plugin untuk menerapkan margin ke penampung bernama, jika ada sebagai induk gambar:

1. $ (window) .bind (’load’, function () {
2. $ ("img"). baselineAlign ({container: ’. popup’});
3. });

Kesimpulan

Menjaga ritme vertikal yang baik adalah praktik desain yang halus namun efektif yang digunakan secara teratur dalam cetakan. Anda sekarang mengetahui prinsip dasar, memiliki pengetahuan kerja tentang baseline dan grid baseline, dan mengetahui beberapa batasan tata letak teks CSS versus cetak. Anda juga tahu cara mengatasi keterbatasan tersebut, menyusun dokumen Anda ke ritme vertikal apa pun yang Anda suka, dan Anda memiliki alat untuk membantu menangani konten gambar yang mengganggu.

Saat CSS matang, kami terus mendapatkan lebih banyak fitur sesuai dengan sepupu cetak kami, jadi pemahaman yang baik tentang jenis akan menjadi lebih penting untuk membuat situs web yang berkualitas. Jika Anda ingin mempelajari lebih lanjut tentang jenis secara umum, saya sangat merekomendasikan www.thinkingwithtype.com (dan membeli buku yang menyertainya). Jika Anda mencari artikel CSS tentang perlakuan jenis, ada banyak artikel baik di sini maupun di tempat lain di web. Saya juga merekomendasikan untuk mengikuti berita terbaru dari Saham Mark Boulton dan Elliot Jay, yang keduanya sering membicarakan tentang jenis dalam kaitannya dengan desain web secara khusus.

Selamat bersenang-senang!