รักษาจังหวะแนวตั้งด้วย CSS และ jQuery

เนื้อหา

• การจัดวางประเภท
• จังหวะแนวตั้ง
• ดำเนินการตามจังหวะ
• การจัดการกับภาพ
• การปรับปรุง jQuery
• สรุป

• ความรู้ที่จำเป็น: CSS, jQuery พื้นฐาน
• ต้องใช้: jQuery, CSS, HTML
• เวลาโครงการ: 30 นาที
• ดาวน์โหลดไฟล์ต้นฉบับ

สมมติว่าคุณออกแบบจากเนื้อหาออกไปเป็นการตัดสินใจครั้งแรกที่จะส่งผลต่อการออกแบบของคุณ มี เป็นประเภทที่เกี่ยวข้อง แม้โดย ไม่ การเลือกแบบอักษรคุณได้ทำสิ่งที่ส่งผลกระทบต่อไซต์ของคุณ ประเภทเป็นหัวใจหลักในการพิมพ์และการออกแบบเว็บและมีความซับซ้อน มีคำศัพท์แนวปฏิบัติกฎและเทคนิคสะสมมากมายที่ใช้ประโยชน์ได้ดี บทความนี้เกี่ยวข้องกับเทคนิคหนึ่งในการจัดการด้านหนึ่งของประเภทซึ่งยากที่จะทำทางออนไลน์ แต่เป็นกิจวัตรในการพิมพ์นั่นคือการรักษาจังหวะแนวตั้งที่สม่ำเสมอซึ่งจะช่วยให้เราได้รูปแบบที่เป็นมืออาชีพ

การจัดวางประเภท

ในการพิมพ์สำหรับรายการใด ๆ ที่มีข้อความจำนวนมากรากฐานของการออกแบบน่าจะเป็นเส้นตารางพื้นฐาน ใช้เพื่อสร้างโครงสร้างให้กับหน้าและเป็นแนวทางในการไหลของเนื้อหาตามแนวตั้ง เกือบทุกอย่างถูกวางไว้ตามตารางพื้นฐานนั้น ไม่ต้องกังวลหากคุณจำคำศัพท์ไม่ได้ไม่มีใครไม่คุ้นเคยกับเส้นฐานหรือเส้นตารางพื้นฐาน คุณรู้เกี่ยวกับพวกเขาแล้ว ลองนึกย้อนไปถึงโรงเรียนเมื่อคุณเขียนลงบนกระดาษที่มีเส้นเรียงรายอย่างไม่ต้องสงสัยขณะที่คุณเขียนคุณวางด้านล่างของตัวอักษรลงบนแต่ละบรรทัดบนกระดาษอย่างเรียบร้อย ตารางพื้นฐานและเส้นฐานในการดำเนินการ เส้นฐานคือเส้นจินตภาพที่ด้านล่างของตัวอักษรจัดแนวหากคุณดูบทความนี้ตอนนี้คุณจะ "เห็น" ข้อมูลพื้นฐานแม้ว่าจะไม่มีบรรทัดจริงๆก็ตาม สมองของคุณทำให้คุณเป็นหนึ่งเดียวนั่นคือเหตุผลที่คุณอ่านประโยคได้ เส้นบนกระดาษที่มีเส้น? เป็นตารางพื้นฐาน ตรงเพื่อให้ประโยคของคุณตรงและกำหนดในช่วงเวลาปกติเพื่อให้ข้อความของคุณมีจังหวะในแนวตั้งปกติ

จังหวะแนวตั้ง

จังหวะแนวตั้งกำหนดตำแหน่งของข้อความบนหน้า เป็นองค์ประกอบหนึ่งที่ส่งผลต่อความสามารถของเราในการสแกนและอ่านบล็อกข้อความและช่วยแจ้งการตอบสนองทางอารมณ์ของเรา เมื่อข้อความมีจังหวะในแนวตั้งที่ชัดเจนและการเว้นวรรคที่ดีเราจะรู้สึกว่ามันเป็นมืออาชีพถือว่าเชื่อถือได้และอ่านสบาย เมื่อข้อความมีจังหวะและระยะห่างที่ไม่ดีเราจะรู้สึกว่ามีการพิจารณาน้อยลงมีความเป็นมืออาชีพน้อยลงและมักอ่านยากกว่า จังหวะแนวตั้งเป็นส่วนหนึ่งที่ใช้งานได้และสุนทรียภาพส่วนหนึ่ง

ดำเนินการตามจังหวะ

น่าเสียดายที่เว็บยังคงเป็นลูกพี่ลูกน้องที่น่าสงสารของการพิมพ์ในแง่ของความสามารถในการออกกฎระเบียบพื้นฐานบางประการเกี่ยวกับประเภท บนเว็บเราไม่สามารถใช้เส้นตารางพื้นฐานแบบเดียวกับที่นักออกแบบสิ่งพิมพ์ (หรือเด็กที่โรงเรียน) ทำ - เราไม่สามารถจัดแนวเส้นฐานของข้อความให้เป็นเส้นตารางพื้นฐานของเอกสารได้ CSS ไม่มีแนวคิดของเส้นตารางพื้นฐาน ดังนั้นข้อความของเราจะไม่อยู่บนเส้นตารางพื้นฐานทุกประการ แต่จะจัดกึ่งกลางในแนวตั้งในช่องว่างระหว่างเส้น เป็นเว็บที่ดีที่สุด

ลองนำเอกสารตัวอย่างไปใช้ได้จริง ประการแรกเราจะกำหนดจังหวะโดยสร้างเส้นตารางพื้นฐานที่มองเห็นได้ ในการดำเนินการนี้เราจะใช้ภาพพื้นหลังที่ทำซ้ำเพื่อวาดเส้นแนวนอนปกติให้ห่างกัน 22px:

1. html {พื้นหลัง: #fff url (baseline_22.png); }

Hurray เรามีกระดาษเรียงรายของเรา!

คุณจะสังเกตได้ว่าไม่มีอะไรล้ำเส้น ในการทำให้ทุกอย่างเป็นแนวเดียวกันเราต้องการให้ขอบด้านล่างขององค์ประกอบทั้งหมดตีหนึ่งในบรรทัดเหล่านั้น วิธีที่ง่ายที่สุดคือตรวจสอบให้แน่ใจว่าองค์ประกอบทั้งหมดใช้ความสูงแนวตั้ง (รวมถึงระยะขอบ) ซึ่งเป็นผลคูณของ 22 นี่คือ CSS บางส่วนที่ทำเช่นนั้น ฉันใช้หน่วย REM แต่ให้ EM สำรองสำหรับเบราว์เซอร์ที่ไม่เข้าใจ REM ฉันกำลังรวมหน่วย PX ที่เทียบเท่าในความคิดเห็นด้วย หากคุณยังไม่เข้าใจ REM / EM คุณสามารถใช้ค่า px แทนได้ซึ่งเทียบเท่ากันทั้งหมด:

1. html {/ * font-size: 16px, line-height: 22px * /
2. แบบอักษร: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
3. พื้นหลัง: #fff url (baseline_22.png); }
5. h1, h2, h3, h4, h5, h6 {/ * ขอบบนและล่างมีทั้ง 22px * /
6. / * em ทางเลือก * / margin: 1.375em 0;
7. ขอบ: 1.375rem 0; }
8. h1 {/ * font-size คือ 32px, line-height คือ 44px * /
9. / * em ทางเลือก * / font-size: 2em;
10. ขนาดตัวอักษร: 2rem; บรรทัดความสูง: 1.375; }
11. h2 {/ * font-size คือ 26px, line-height คือ 44px * /
12. / * em ทางเลือก * / font-size: 1.75em;
13. ขนาดตัวอักษร: 1.75rem; บรรทัดความสูง: 1.5714285714; }
14. h3, h4, h5, h6 {/ * font-size คือ 22px, line-height คือ 22px * /
15. / * em ทางเลือก * / font-size: 1.375em;
16. ขนาดตัวอักษร: 1.375rem; บรรทัดความสูง: 1; }
17. p, ul, blockquote {/ * ขอบล่างคือ 22px, line-height สืบทอดมาจาก html (22px) * /
18. / * em ทางเลือก * / margin-top: 0; ขอบล่าง: 1.375em;
19. ขอบด้านบน: 0; ขอบล่าง: 1.375rem; }

มาดูกันว่ามีอะไรให้เราบ้าง สังเกตว่าข้อความทั้งหมดจัดแนวอย่างสวยงามหรือไม่? มันไม่ได้อยู่บนพื้นฐาน แต่มีจังหวะในแนวตั้งที่คาดเดาได้ เป็นระเบียบเรียบร้อยดี

การจัดการกับภาพ

รูปภาพทำให้สิ่งต่างๆซับซ้อนมากขึ้น ดูว่าเกิดอะไรขึ้นกับจังหวะของเราเมื่อเรารวมบางส่วน พวกเขาขัดขวางมันเหมือนการข้ามในบันทึก - จังหวะถูกต้อง แต่เวลาปิดอยู่ การจัดตำแหน่งจะเปลี่ยนไป เป็นเพราะรูปภาพไม่น่าจะมีความสูงเกินกว่าเส้นฐานหลายเท่าดังนั้นขอบด้านล่างจึงไม่ตรงกับเส้นตารางพื้นฐานของเรา

ในการแก้ไขสิ่งที่เราต้องทำจริงๆคือเพิ่มระยะขอบให้กับแต่ละภาพทำให้ด้านล่างของระยะขอบตรงกับเส้นตารางของเรา ซึ่งง่ายพอที่จะทำให้เป็นอัตโนมัติด้วย JavaScript เพียงเล็กน้อย แผนพื้นฐานของเรามีดังนี้

1. กำหนดความสูงของแต่ละภาพ
2. ดูจำนวนครั้งที่ค่าพื้นฐานแบ่งออกเป็นพื้นที่แนวตั้งที่รูปภาพใช้ในปัจจุบันและรับส่วนที่เหลือ
3. ลบส่วนที่เหลือออกจากเส้นฐานเพื่อให้ได้ค่าชดเชยที่เราต้องใช้กับรูปภาพ
4. ใช้ออฟเซ็ตเป็นระยะขอบที่ด้านล่างของรูปภาพ

ตอนนี้ด้านล่างของพื้นที่แนวตั้งของรูปภาพจะจัดแนวอย่างถูกต้องกับเส้นตารางพื้นฐาน นี่คือฟังก์ชั่นพื้นฐานใน jQuery ที่ทำสิ่งนี้:

1. $ (window) .bind ('load', function () {
2. $ ("img") แต่ละ (ฟังก์ชัน () {
3. / * ตัวแปร * /
4. var this_img = $ (นี้);
5. พื้นฐาน var = 22;
6. var img_height = this_img.height ();
7. / * ทำคณิตศาสตร์ * /
8. var ที่เหลือ = parseFloat (img_height% baseline);
9. / * ต้องเพิ่มเท่าไหร่? * /
10. var offset = parseFloat (พื้นฐาน - ส่วนที่เหลือ);
11. / * ใช้ระยะขอบกับภาพ * /
12. this_img.css ("margin-bottom", offset + "px");
13. });
14. });

ทำไม window.bind ไลน์? เนื่องจากเราต้องรอจนกว่าภาพจะโหลดก่อนจึงจะสามารถรับขนาดได้อย่างน่าเชื่อถือ ตัวอย่างการรันโค้ดพื้นฐานนี้

การปรับปรุง jQuery

โลกไม่ค่อยตรงไปตรงมาดังนั้นจึงปรากฎที่นี่ - เราต้องจัดการกับรายละเอียดการใช้งานค่อนข้างน้อย ฟังก์ชันที่เรามีมีอะไรผิดปกติ มากมาย:

• มันสร้างผลลัพธ์ที่น่ารังเกียจด้วยภาพที่อยู่ในบรรทัดแทนที่จะลอยหรือปิดกั้น
• ดูเหมือนว่ามีบั๊กในบางภาพโดยเฉพาะภาพที่อยู่ในคอนเทนเนอร์
• ไม่จัดการกับรูปแบบของเหลว
• ไม่สามารถใช้ซ้ำได้มากนัก

เราไม่ต้องการใช้พฤติกรรมนี้กับรูปภาพที่อยู่ในแนวเดียวเช่นหน้ายิ้มในตัวอย่าง รูปภาพแบบอินไลน์จะถูกจัดแนวให้ขอบด้านล่างอยู่บนเส้นฐานเดียวกันกับข้อความ (ไม่ ตารางพื้นฐาน) นั่นหมายถึงภาพถูกหักล้างในแนวตั้ง ทั้ง CSS และ JS ไม่ได้บอกวิธีให้เราทราบว่าพื้นฐานขององค์ประกอบข้อความอยู่ที่ใดดังนั้นเราจึงไม่ทราบค่าชดเชย เราต้องละเว้นรูปภาพแบบอินไลน์และใช้การแก้ไขเฉพาะกับรูปภาพที่ตั้งค่าเป็น display: block (โชคดีที่ภาพลอยใด ๆ จะถูกตั้งค่าให้แสดงบล็อกโดยอัตโนมัติ)

หากรูปภาพอยู่ในคอนเทนเนอร์ระยะขอบที่ใช้กับรูปภาพอาจถูกซ่อนไว้เนื่องจากการตั้งค่ามากเกินไปในคอนเทนเนอร์ นอกจากนี้เราอาจไม่ต้องการระยะขอบบนรูปภาพ แต่ให้อยู่ที่องค์ประกอบคอนเทนเนอร์แทน ในตัวอย่างเราค่อนข้างจะมีระยะขอบบนกล่องสีขาวมากกว่ารูปภาพในกล่องดังนั้นเราจึงสามารถหลีกเลี่ยงช่องว่างแปลก ๆ ที่ปรากฏในกล่องได้

ฟังก์ชันนี้ทำงานเพียงครั้งเดียว แต่ในการออกแบบของเหลวรูปภาพจะเปลี่ยนความสูงเมื่อเบราว์เซอร์ปรับขนาดใหม่ (ลองปรับขนาดตัวอย่างให้แคบลงเพื่อดูสิ่งนี้) การปรับขนาดจะแบ่งจังหวะอีกครั้ง เราจำเป็นต้องให้ฟังก์ชันนี้ทำงานหลังจากปรับขนาดเบราว์เซอร์และหลังจากโหลดหน้าเว็บแล้ว เค้าโครงของเหลวยังแนะนำปัญหาอื่น ๆ รูปภาพอาจมีพิกเซลแบบเศษส่วนสูงเช่น 132.34px ในทางกลับกันอาจทำให้เกิดผลลัพธ์ที่ไม่คาดคิดแม้ว่าเราจะใช้ส่วนต่างเศษส่วนก็ตาม (หากคุณสนใจนี่คือเหตุผล: trac.webkit.org/wiki/LayoutUnit) ดังนั้นเราจำเป็นต้องปรับขนาดรูปภาพให้มีความสูงทั้งพิกเซลเพื่อหลีกเลี่ยงจุดบกพร่องของการจัดวางที่เกิดจากพิกเซลที่เป็นเศษส่วน

สุดท้ายนี้เราควรทำให้สิ่งนี้กลายเป็นฟังก์ชันที่สามารถใช้ซ้ำได้มากขึ้น ในความเป็นจริงด้วยความซับซ้อนที่จำเป็นต้องใช้วิธีแก้ปัญหาในทางปฏิบัติมากกว่าโซลูชันทางทฤษฎีเราจึงควรสร้างปลั๊กอินที่สามารถนำกลับมาใช้ในโครงการอื่น ๆ ได้

ในตัวอย่างสุดท้ายคุณจะพบโค้ดที่ใช้ทั้งหมดนี้ ปลั๊กอิน JavaScript ได้รับการแสดงความคิดเห็นอย่างมากเพื่อให้คุณสามารถปฏิบัติตามได้ คุณสามารถใช้ปลั๊กอินได้โดยเรียกมันดังนี้:

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

หรือคุณสามารถบอกให้ปลั๊กอินใช้ระยะขอบกับคอนเทนเนอร์ที่มีชื่อได้หากมีอยู่เป็นพาเรนต์ของอิมเมจ:

1. $ (window) .bind ('load', function () {
2. $ ("img"). baselineAlign ({คอนเทนเนอร์: ’. popup’});
3. });

สรุป

การรักษาจังหวะในแนวตั้งที่ดีคือการออกแบบที่ละเอียดอ่อน แต่มีประสิทธิภาพซึ่งใช้เป็นประจำในการพิมพ์ ตอนนี้คุณรู้หลักการพื้นฐานมีความรู้ในการทำงานเกี่ยวกับเส้นฐานและเส้นตารางพื้นฐานและทราบข้อ จำกัด บางประการของเค้าโครงข้อความ CSS เทียบกับการพิมพ์ นอกจากนี้คุณยังรู้วิธีแก้ไขข้อ จำกัด เหล่านั้นจัดองค์ประกอบเอกสารของคุณตามจังหวะแนวตั้งที่คุณต้องการและคุณมีเครื่องมือที่จะช่วยจัดการกับเนื้อหารูปภาพที่ก่อกวน

เมื่อ CSS เติบโตเต็มที่เราก็ยังคงได้รับคุณสมบัติเพิ่มเติมที่สอดคล้องกับญาติการพิมพ์ของเราดังนั้นความเข้าใจที่ดีเกี่ยวกับประเภทจะมีความสำคัญมากขึ้นสำหรับการสร้างเว็บไซต์ที่มีคุณภาพ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับประเภทโดยทั่วไปฉันขอแนะนำ www.thinkingwithtype.com (และซื้อหนังสือเล่มนี้ไปด้วย) หากคุณสนใจบทความ CSS เกี่ยวกับการรักษาประเภทมีบทความมากมายทั้งที่นี่และที่อื่น ๆ บนเว็บ ฉันขอแนะนำให้ติดตามข่าวสารล่าสุดจาก Mark Boulton และ Elliot Jay Stocks ซึ่งทั้งคู่มักพูดถึงประเภทที่เกี่ยวข้องกับการออกแบบเว็บโดยเฉพาะ

มีความสุข!