Kekalkan irama menegak dengan CSS dan jQuery

Kandungan

• Susun atur jenis
• Irama menegak
• Melakukan irama
• Berurusan dengan gambar
• Memperbaiki jQuery
• Kesimpulannya

• Pengetahuan diperlukan: CSS, asas jQuery
• Memerlukan: jQuery, CSS, HTML
• Masa projek: 30 minit
• Muat turun fail sumber

Dengan andaian anda merancang dari kandungan, keputusan pertama untuk mempengaruhi reka bentuk anda telah berkaitan dengan jenis. Walaupun oleh tidak memilih jenis huruf anda telah melakukan sesuatu yang mempengaruhi laman web anda. Jenis adalah inti untuk mencetak dan reka bentuk web, dan rumit; terdapat banyak istilah, amalan, peraturan, dan teknik terkumpul yang dapat digunakan dengan baik. Artikel ini berkaitan dengan satu teknik untuk menguruskan satu aspek jenis, yang sukar dilakukan dalam talian tetapi rutin dicetak: mengekalkan irama menegak yang konsisten, yang seterusnya memungkinkan kita mencapai susun atur profesional.

Susun atur jenis

Dalam bentuk cetak, untuk setiap item dengan jumlah teks yang cukup besar, asas reka bentuknya cenderung menjadi garis dasar. Ia digunakan untuk membawa struktur ke halaman dan memandu aliran kandungan menegak. Hampir semuanya diletakkan berkaitan dengan garis dasar. Jangan risau jika anda tidak mengenali syarat, tidak ada yang tidak mengenal garis dasar atau garis dasar; anda sudah tahu mengenai mereka. Fikirkan kembali ke sekolah, apabila anda pasti menulis di atas kertas bergaris - semasa anda menulis anda meletakkan bahagian bawah surat anda dengan kemas ke setiap baris di atas kertas itu. Garis dasar dan garis dasar dalam tindakan. Garis asasnya adalah garis khayalan di mana bahagian bawah huruf sejajar.Sekiranya anda melihat artikel ini sekarang, anda akan "melihat" garis dasar, walaupun sebenarnya tidak ada garis. Otak anda meletakkannya di sana untuk anda, sebab itulah anda boleh membaca ayat. Garisan pada kertas bergaris? Mereka adalah garis asas. Lurus sehingga ayat anda lurus, dan tetapkan pada selang waktu yang tetap sehingga teks anda mempunyai irama menegak biasa.

Irama menegak

Irama menegak menentukan di mana teks halaman berada. Ini adalah salah satu komponen yang mempengaruhi kemampuan kita untuk mengimbas dan membaca sekumpulan teks, dan ini membantu memberi maklumat mengenai tindak balas emosi kita. Apabila teks mempunyai irama menegak yang kuat dan jarak yang baik, kami merasakan ia profesional, dipertimbangkan, berwibawa, dan selesa untuk dibaca. Apabila teks mempunyai irama dan jarak yang kurang baik, kita merasakannya kurang dipertimbangkan, kurang profesional, dan sering sukar dibaca. Irama menegak adalah kebolehgunaan satu bahagian dan estetika satu bahagian.

Melakukan irama

Sayangnya laman web masih merupakan cetakan yang lemah dari segi kemampuannya untuk membuat beberapa amalan asas mengenai jenis. Di web, kami tidak dapat menggunakan grid garis dasar dengan cara yang sama seperti yang dilakukan oleh pereka cetak (atau anak di sekolah) - kami tidak dapat menyelaraskan garis dasar teks dengan grid garis dasar dokumen. CSS tidak mempunyai konsep grid asas. Jadi, teks kita tidak akan betul-betul sesuai dengan garis asas. Sebaliknya, ia akan berpusat secara menegak dalam jurang antara garis. Inilah yang terbaik yang dapat dilakukan oleh web.

Mari praktikkan dengan contoh dokumen. Pertama, kita akan mengatur rentak dengan membuat grid garis dasar yang dapat dilihat. Untuk melakukan ini, kami akan menggunakan gambar latar yang berulang untuk melukis garis mendatar biasa dengan jarak 22px:

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

Hore, kita ada kertas bergaris!

Anda akan melihat bahawa tidak ada yang berbaris. Untuk menjadikan segalanya sejajar, kita mahu bahagian bawah semua elemen menyentuh salah satu baris tersebut. Cara termudah untuk melakukannya adalah memastikan semua elemen mengambil ketinggian menegak (termasuk margin) yang merupakan gandaan 22. Berikut adalah beberapa CSS yang melakukan perkara itu. Saya menggunakan unit REM, tetapi memberi penggantian EM untuk penyemak imbas yang tidak memahami REM. Saya juga menyertakan unit PX yang setara dalam komen. Sekiranya anda belum memahami REM / EM, anda boleh menggunakan nilai px sebagai gantinya - semuanya setara:

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

Mari lihat apa yang memberi kita. Perhatikan bagaimana semua teks sejajar dengan baik? Ia tidak berada di garis dasar, tetapi ia mempunyai irama menegak yang dapat diramalkan. Ia bagus dan kemas.

Berurusan dengan gambar

Imej menjadikan keadaan lebih rumit. Lihatlah apa yang berlaku pada irama kita apabila kita memasukkan beberapa lagu. Mereka mengganggu seperti melangkau rekod - tempo betul tetapi waktunya tidak aktif. Penjajaran menjadi beralih. Ini kerana gambar tidak mungkin memiliki ketinggian yang berlipat ganda dari garis dasar, jadi tepi bawah tidak sesuai dengan grid garis dasar kami.

Untuk memperbaikinya, yang perlu kita lakukan hanyalah menambahkan margin pada setiap gambar, menjadikan bahagian bawah margin sejajar dengan grid kita. Yang cukup mudah untuk automatik dengan sedikit JavaScript. Inilah rancangan asas kami:

1. Ketahui ketinggian setiap gambar.
2. Lihat berapa kali nilai asas dibahagikan kepada ruang menegak yang diambil oleh gambar dan dapatkan selebihnya.
3. Kurangkan selebihnya dari garis dasar untuk memberi ofset yang perlu kita terapkan pada gambar.
4. Terapkan ofset sebagai margin ke bahagian bawah gambar.

Bahagian bawah ruang menegak gambar sekarang akan sejajar dengan grid garis bawah dengan betul. Berikut adalah fungsi asas dalam jQuery yang melakukan ini:

1. $ (window) .bind ('load', function () {
2. $ ("img"). masing-masing (fungsi () {
3. / * pemboleh ubah * /
4. var this_img = $ (ini);
5. garis dasar var = 22;
6. var img_height = this_img.height ();
7. / * lakukan matematik * /
8. var sisa = parseFloat (img_height% baseline);
9. / * berapa banyak yang perlu kita tambah? * /
10. var offset = parseFloat (baseline-baki);
11. / * gunakan margin pada gambar * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

Kenapa tingkap.bind garisan? Kerana kita harus menunggu sehingga gambar dimuat sebelum kita dapat memperoleh ukurannya dengan pasti. Berikut adalah contoh dengan kod asas ini dijalankan.

Memperbaiki jQuery

Dunia jarang berjalan lancar, dan ternyata di sini - kita harus berurusan dengan beberapa perincian pelaksanaan. Apa yang salah dengan fungsi yang kita ada? Banyak:

• Ia menghasilkan hasil buruk dengan gambar yang sebaris dan bukannya melayang atau menyekat.
• Nampaknya kereta pada beberapa gambar, terutamanya yang terdapat di dalam bekas.
• Ia tidak berkaitan dengan susun atur cecair.
• Ia tidak boleh digunakan semula.

Kami tidak mahu menerapkan tingkah laku ini pada gambar yang sebaris, seperti wajah tersenyum dalam contoh. Gambar sebaris diselaraskan sehingga tepi bawah terletak pada garis dasar yang sama dengan teks (tidak grid asas). Ini bermaksud gambar diimbangi secara menegak. Baik CSS maupun JS tidak memberi kita jalan untuk mengetahui di mana garis dasar elemen teks, jadi kita tidak tahu mengimbangi. Kita mesti mengabaikan gambar sebaris, dan menerapkan pembetulan kita hanya pada gambar yang ditetapkan paparan: blok (mujurlah, gambar terapung diatur secara automatik ke blok paparan).

Sekiranya gambar berada di dalam bekas, margin yang diterapkan pada gambar mungkin tersembunyi kerana tetapan limpahan pada bekas. Kami juga mungkin tidak menginginkan margin pada gambar, tetapi pada elemen kontena sebagai gantinya. Dalam contohnya, kita lebih suka memiliki margin pada kotak putih daripada pada gambar di dalam kotak, sehingga kita dapat menghindari jurang aneh yang muncul di dalam kotak.

Fungsi hanya berjalan sekali, tetapi pada reka bentuk cair gambar berubah tinggi apabila penyemak imbas bersaiz semula (cuba ubah ukuran contohnya kepada sesuatu yang agak sempit untuk melihatnya) Mengubah saiz memecahkan irama lagi. Kami memerlukan fungsi untuk berjalan setelah penyemak imbas diubah ukurannya dan juga setelah pemuatan halaman. Tata letak cecair juga memperkenalkan masalah lain; gambar boleh menjadi pecahan piksel tinggi, misalnya 132.34 piksel. Ini seterusnya boleh menyebabkan hasil yang tidak dijangka, walaupun kita menggunakan margin pecahan (jika anda berminat, inilah sebabnya: trac.webkit.org/wiki/LayoutUnit). Oleh itu, kita perlu mengurut gambar ke ketinggian keseluruhan piksel untuk mengelakkan bug susun atur yang disebabkan oleh piksel pecahan.

Terakhir, kita harus menjadikannya fungsi yang lebih boleh digunakan semula. Sebenarnya, dengan kerumitan yang diperlukan penyelesaian praktikal berbanding penyelesaian teoritis, kita harus membuat pemalam yang boleh digunakan semula dalam projek lain.

Pada contoh terakhir, anda akan menemui kod yang mencapai semua ini. JavaScript pemalam banyak dikomentari sehingga anda dapat mengikuti. Anda boleh menggunakan pemalam dengan memanggilnya seperti berikut:

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

Atau, anda boleh memberitahu pemalam untuk menerapkan margin pada bekas bernama, jika ada sebagai induk gambar:

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

Kesimpulannya

Menjaga irama menegak yang baik adalah amalan reka bentuk yang halus tetapi berkesan yang selalu digunakan dalam bentuk cetakan. Anda kini mengetahui prinsip asas, mempunyai pengetahuan mengenai garis dasar dan garis dasar, dan mengetahui beberapa batasan susun atur teks CSS berbanding cetakan. Anda juga tahu bagaimana mengatasi had tersebut, menyusun dokumen anda dengan irama menegak yang anda suka, dan anda mempunyai alat untuk membantu menangani kandungan gambar yang mengganggu.

Apabila CSS semakin matang, kami terus mendapat lebih banyak ciri sesuai dengan cetakan sepupu kami, jadi pemahaman jenis yang baik akan menjadi lebih penting untuk membuat laman web yang berkualiti. Sekiranya anda ingin mengetahui lebih lanjut mengenai jenis secara umum, saya sangat mengesyorkan www.thinkingwithtype.com (dan membeli buku untuk menggunakannya). Sekiranya anda mengejar artikel CSS mengenai rawatan jenis, terdapat banyak artikel di sini dan di tempat lain di web. Saya juga mengesyorkan untuk mendapatkan maklumat terkini dari Mark Boulton dan Elliot Jay Stocks, yang keduanya sering bercakap mengenai jenis yang berkaitan dengan reka bentuk web secara khusus.

Berseronok!