โหมดการเขียนและเค้าโครง CSS

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

โหมดการเขียนคืออะไร?

โหมดการเขียนของเอกสารหรือส่วนประกอบอ้างอิงถึงทิศทางที่ข้อความไหล ใน CSS ในการทำงานกับโหมดการเขียน เราใช้คุณสมบัติ writing-mode คุณสมบัตินี้สามารถรับค่าต่อไปนี้:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

หากคุณกำลังอ่านบทความนี้ใน Smashing Magazine เป็นภาษาอังกฤษ โหมดการเขียนของเอกสารนี้คือ horizontal-tb หรือ Horizontal จากบนลงล่าง ในภาษาอังกฤษ ประโยคจะถูกเขียนในแนวนอน โดยเป็นอักษรตัวแรกของแต่ละบรรทัดโดยเริ่มจากด้านซ้าย

ภาษาเช่นภาษาอาหรับก็มีโหมดการเขียน horizontal-tb ด้วย มันเขียนแนวนอน บนลงล่าง อย่างไรก็ตาม สคริปต์ภาษาอาหรับเขียนจากขวาไปซ้าย ดังนั้นประโยคในภาษาอาหรับจะเริ่มต้นทางด้านขวา

เขียนภาษาจีน ญี่ปุ่น และเกาหลีในแนวตั้ง โดยอักขระตัวแรกของประโยคแรกจะอยู่ด้านขวาบน ประโยคต่อไปนี้ถูกเพิ่มไปทางซ้าย ดังนั้น โหมดการเขียนที่ใช้คือ vertical-rl โหมดการเขียนแนวตั้งวิ่งจากขวาไปซ้าย

ภาษามองโกเลียยังเขียนในแนวตั้ง แต่จากซ้ายไปขวา ดังนั้น หากคุณต้องการพิมพ์สคริปต์มองโกเลีย คุณจะต้องใช้โหมดการเขียน vertical-lr

อีกสองค่าของ writing-mode ได้รับการออกแบบสำหรับวัตถุประสงค์เชิงสร้างสรรค์มากกว่าการเรียงพิมพ์สคริปต์แนวตั้ง การใช้ sideways-lr และ sideways-rl เปลี่ยนข้อความไปด้านข้าง — แม้แต่อักขระที่ปกติแล้วจะเขียนในแนวตั้งและแนวตั้ง น่าเสียดายที่ค่านี้รองรับเฉพาะใน Firefox ในขณะนี้ CodePen ต่อไปนี้แสดงค่าต่างๆ ของ writing-mode ที่แตกต่างกันทั้งหมด คุณจะต้องใช้ Firefox หากคุณต้องการดูการทำงานแบบ sideways-*

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

ก่อนที่ฉันจะทำเช่นนั้น หากคุณสนใจที่จะใช้โหมดการเขียนสำหรับข้อความแนวตั้ง ต่อไปนี้คือแหล่งข้อมูลที่มีประโยชน์บางส่วน:

• เว็บไซต์ W3C Internationalization มีข้อมูลที่เป็นประโยชน์มากมาย อ่านเกี่ยวกับสคริปต์ RTL และข้อความแนวตั้ง
• Jen Simmons เขียนบทความที่ยอดเยี่ยมเกี่ยวกับ CSS Writing Modes ซึ่งมีตัวอย่างมากมายจากการพิมพ์โหมดเหล่านี้ที่ใช้งาน
• ความคิดเกี่ยวกับโลกและระบบการเขียนของเรา - Chen Hui Jing
• การเรียงพิมพ์แนวตั้งพร้อมโหมดการเขียนมาเยือนอีกครั้ง - Chen Hui Jing
• คุณสมบัติโหมดการเขียนบน MDN

ขนาดบล็อกและอินไลน์

เมื่อเราเปลี่ยนโหมดการเขียนของเอกสาร สิ่งที่เรากำลังทำคือเปลี่ยนทิศทางของการ ไหลของบล็อก ดังนั้นจึงเป็นประโยชน์อย่างมากสำหรับเราที่จะเข้าใจความหมายของบล็อกและอินไลน์

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

เนื่องจากองค์ประกอบบล็อกและอินไลน์เกี่ยวข้องกับโหมดการเขียนของเอกสารของเรา อย่างไรก็ตาม มิติข้อมูลอินไลน์จะเป็นแนวนอนก็ต่อเมื่อเราอยู่ในโหมดการเขียนแนวนอนเท่านั้น ไม่เกี่ยวข้องกับความกว้าง แต่เกี่ยวข้องกับขนาดอินไลน์ ขนาดบล็อกอยู่ในแนวตั้งเท่านั้นเมื่ออยู่ในโหมดการเขียนแนวนอน ดังนั้นจึงไม่เกี่ยวกับความสูง แต่เกี่ยวกับขนาดบล็อก

ลอจิก คุณสมบัติสัมพัทธ์การไหล

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

เช่นเดียวกับ height คุณสมบัติ height จะเป็นขนาดในแนวตั้งเสมอ มันเกี่ยวข้องกับความสูงของรายการ อย่างไรก็ตาม คุณสมบัติ block-size ให้ขนาด ในมิติบล็อก ในแนวตั้งหากเราอยู่ในโหมดการเขียนแนวนอนและแนวนอนในแนวตั้ง

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

โหมดการเขียน ตารางและ Flexbox

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

เมื่อฉันเริ่มนำเสนอในหัวข้อ CSS Grid ครั้งแรก การนำเสนอครั้งแรกของฉันเป็นบทสรุปของคุณสมบัติทั้งหมดในข้อกำหนด ฉันกล่าวว่าคุณสมบัติ grid-area สามารถใช้เพื่อตั้งค่าทั้งสี่บรรทัดเพื่อวางรายการกริด อย่างไรก็ตาม ลำดับของบรรทัดเหล่านั้นไม่ใช่ลำดับบน ขวา ล่าง และซ้ายที่คุ้นเคยที่เราใช้เพื่อกำหนดระยะขอบทั้งสี่ แต่เราต้องใช้บน, ซ้าย, ล่าง, ขวา - ตรงกันข้ามกับคำสั่งนั้น! จนกระทั่งฉันเข้าใจความเชื่อมโยงระหว่างโหมดตารางและโหมดการเขียน การตัดสินใจนี้ดูแปลกมาก ฉันมารู้ว่าสิ่งที่เราทำคือการตั้งเส้นสตาร์ททั้งสองเส้น แล้วก็เส้นสิ้นสุดทั้งสองเส้น การใช้บน ขวา ล่าง และซ้ายจะทำงานได้ดีถ้าเราอยู่ในโหมดการเขียนแนวนอน พลิกตารางด้านข้าง อย่างไรก็ตาม มันไม่สมเหตุสมผลเลย ถ้าเราใช้ grid-area: 1 / 2 / 3 / 5; ดังในปากกาด้านล่างบรรทัดถูกตั้งค่าดังนี้:

• grid-row-start: 1; - บล็อกเริ่มต้น
• grid-column-start: 2 - การเริ่มต้นแบบอินไลน์
• grid-row-end: 3 - ปลายบล็อก
• grid-column-end: 5 - ปลายอินไลน์

แถวและคอลัมน์ของ Flexbox

หากคุณใช้ Flexbox และเพิ่ม display: flex ไปยังคอนเทนเนอร์ รายการของคุณจะแสดงเป็นแถวเนื่องจากค่าเริ่มต้นของคุณสมบัติ flex-direction คือ row แถวจะเป็นไปตามขนาดอินไลน์ของโหมดการเขียนที่ใช้งาน ดังนั้นหากโหมดการเขียนของคุณเป็น horizontal-tb แถวจะทำงานในแนวนอน หากทิศทางข้อความของสคริปต์ปัจจุบันเป็นซ้ายไปขวา รายการจะเรียงกันโดยเริ่มจากซ้าย หากเรียงจากขวาไปซ้าย รายการจะเรียงกันโดยเริ่มจากด้านขวา

อย่างไรก็ตาม ใช้โหมดการเขียนแนวตั้ง เช่น vertical-rl และ flex-direction: row จะทำให้รายการจัดวางในแนวตั้ง เนื่องจากทิศทางอินไลน์เป็นแนวตั้ง ใน CodePen ถัดไป ตัวอย่างทั้งหมดมี flex-direction: row เฉพาะโหมดการเขียนหรือทิศทางที่เปลี่ยนไป

เพิ่ม flex-direction: column และรายการเลย์เอาต์ในมิติบล็อกของโหมดการเขียนของคุณ ในโหมดการเขียนแนวนอน มิติบล็อกจะอยู่บนลงล่าง ดังนั้นคอลัมน์จึงเป็นแนวตั้ง ด้วยโหมดการเขียนของ vertical-rl คอลัมน์จะเป็นแนวนอน เช่นเดียวกับตัวอย่างก่อนหน้านี้ ข้อแตกต่างเพียงอย่างเดียวระหว่างเลย์เอาต์แบบยืดหยุ่นด้านล่างคือโหมดการเขียนที่กำลังใช้งาน

การจัดตำแหน่งกริดอัตโนมัติ

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

ลองเปลี่ยนโฟลว์ของรายการเป็น column ตามตัวอย่างด้านล่าง ตอนนี้รายการจะไหลในมิติบล็อก - ในแนวตั้งในโหมดการเขียนแนวนอนและแนวนอนในแนวตั้ง

การจัดวางแนวกริด

การจัดวางแบบอิงตามบรรทัดยังใช้โหมดการเขียนด้วย เส้นตารางของเราเริ่มต้นที่ 1 ทั้งสำหรับแถวและคอลัมน์ หากเราวางตำแหน่งรายการจากบรรทัดคอลัมน์ 1 ถึงคอลัมน์ 3 และอยู่ในโหมดการเขียนแนวนอนโดยมีทิศทางจากซ้ายไปขวา รายการนั้นจะขยายจากบรรทัดคอลัมน์ซ้ายสุดผ่านรางกริดสองเส้นในแนวนอน จึงขยายสองคอลัมน์

เปลี่ยนโหมดการเขียนเป็น vertical-rl และคอลัมน์บรรทัดที่ 1 จะอยู่ที่ด้านบนสุดของตาราง รายการจะขยายสองแทร็กในแนวตั้ง ยังคงขยายสองคอลัมน์ แต่ขณะนี้คอลัมน์กำลังทำงานในแนวนอน

การจัดตำแหน่งในตารางและ Flexbox

หนึ่งในสถานที่แรกๆ ที่หลายๆ คนจะได้สัมผัสกับวิธีที่ Flexbox จัดการกับโหมดการเขียน ซึ่งก็คือการจัดตำแหน่งรายการในเลย์เอาต์แบบยืดหยุ่น หากเราใช้ตัวอย่าง flex-direction: row ด้านบน และใช้คุณสมบัติ justify-content เพื่อจัดตำแหน่งรายการทั้งหมดเพื่อ flex-end รายการที่ย้ายไปท้ายแถว ซึ่งหมายความว่าในโหมดการเขียนแนวนอนโดยมีทิศทางจากซ้ายไปขวา รายการทั้งหมดจะย้ายไปทางขวา เนื่องจากจุดสิ้นสุดของแถวนั้นอยู่ทางด้านขวา หากทิศทางจากขวาไปซ้าย พวกเขาทั้งหมดจะเคลื่อนไปทางซ้าย

ในโหมดการเขียนแนวตั้ง จะเลื่อนไปที่ด้านล่าง โดยถือว่ามีพื้นที่สำหรับเขียน ฉันได้ตั้งค่า inline-size ของส่วนประกอบในตัวอย่างนี้เพื่อให้แน่ใจว่าเรามีพื้นที่ว่างในคอนเทนเนอร์แบบยืดหยุ่นของเราเพื่อดูการจัดตำแหน่งในการดำเนินการ

การจัดแนวจะเข้าใจง่ายขึ้นเล็กน้อยในเลย์เอาต์กริด เนื่องจากเรามีสองแกนให้เล่นเสมอ กริดเป็นแบบสองมิติ ทั้งสองมิติเป็นแบบบล็อกและแบบอินไลน์ ดังนั้น คุณสามารถจำกฎหนึ่งข้อได้หากต้องการทราบว่าจะใช้คุณสมบัติที่ขึ้นต้นด้วย align- หรือกฎที่ขึ้นต้นด้วย justify- ในรูปแบบ align- คุณสมบัติ align-:- align-content , align-items , align-self ถูกใช้เพื่อบล็อกการจัดตำแหน่งแกน ในโหมดการเขียนแนวนอนที่หมายถึงแนวตั้ง และในโหมดการเขียนแนวตั้งในแนวนอน

เป็นอีกครั้งที่เราไม่ใช้ซ้ายและขวา หรือบนและล่าง เนื่องจากเราต้องการให้เลย์เอาต์กริดของเราทำงานในลักษณะเดียวกันทุกประการ ไม่ว่าโหมดการเขียนจะเป็นอย่างไร ดังนั้นเราจึงจัดตำแหน่งโดยใช้ start และ end หากเราจัดแนวเพื่อ start ในมิติบล็อก สิ่งนั้นจะอยู่ top เมื่ออยู่ใน horizontal-tb แต่จะถูก right เมื่ออยู่ใน vertical-rl ลองดูในตัวอย่างด้านล่าง ค่าการจัดตำแหน่งจะเหมือนกันในตารางทั้งสอง ความแตกต่างเพียงอย่างเดียวคือโหมดการเขียนที่ใช้

คุณสมบัติ justify-content , justify-items , justify-self มักใช้สำหรับการจัดตำแหน่งแบบอินไลน์ในเลย์เอาต์กริด ที่จะเป็นแนวนอนในโหมดการเขียนแนวนอนและแนวตั้งในโหมดการเขียนแนวตั้ง

การจัดตำแหน่ง Flexbox ค่อนข้างซับซ้อนเนื่องจากแกนหลักสามารถเปลี่ยนจากแถวหนึ่งไปอีกคอลัมน์หนึ่งได้ ดังนั้นใน Flexbox เราจึงต้องคิดเกี่ยวกับวิธีการจัดตำแหน่งเป็นแกนหลักกับแกนไขว้ คุณสมบัติการ align- จะใช้บนแกนตัด ในแกนหลัก สิ่งที่คุณมีคือ justify-content เพราะเราจัดการกับรายการต่างๆ เป็นกลุ่มใน Flexbox บนแกนตัดขวาง คุณสามารถใช้การ align-content ในกรณีที่คุณมีเส้นยืดหยุ่น และ ช่องว่างหลายเส้นในคอนเทนเนอร์แบบยืดหยุ่นเพื่อเว้นระยะห่าง คุณยังสามารถใช้การ align-items และ align-self เพื่อย้ายรายการแบบยืดหยุ่นบนแกนตัดที่สัมพันธ์กันและเส้นแบบยืดหยุ่นของรายการ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดตำแหน่งในเค้าโครง CSS โปรดดูบทความ Smashing Magazine ก่อนหน้าของฉัน:

• วิธีการจัดตำแหน่งสิ่งต่าง ๆ ใน CSS
• ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับการจัดตำแหน่งใน Flexbox

การรับรู้โหมดการเขียนและ CSS ที่เก่ากว่า

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

อย่างที่คุณเห็น โหมดการเขียนสนับสนุนสิ่งที่เราทำใน CSS ส่วนใหญ่ แม้ว่าเราจะไม่เคยใช้โหมดการเขียนอื่นนอกจาก horizontal-tb ก็ตาม

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