ทำความเข้าใจ CSS writing-mode เครื่องมือสำคัญในการจัดการเลย์เอาต์เว็บยุคใหม่
เจาะลึกคุณสมบัติ CSS writing-mode ที่ไม่ได้มีไว้แค่หมุนตัวอักษร แต่กำหนดทิศทางแกนบล็อกและแกนอินไลน์เพื่อขับเคลื่อน Flexbox และ Grid อย่างยืดหยุ่น
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- writing-mode กำหนดทิศทางแกนบล็อกและแกนอินไลน์ของเนื้อหา
- ช่วยให้การจัดวางด้วย Flexbox และ Grid เป็นแบบลอจิกแทนทิศทางกายภาพ
- รองรับการใช้งานอย่างแพร่หลายในเบราว์เซอร์ยุคใหม่ตามข้อกำหนด Level 4
คุณสมบัติ writing-mode ใน CSS ทำหน้าที่มากกว่าแค่การปรับเปลี่ยนการหันเหของตัวอักษร โดยในระดับที่ลึกลงไป มันทำหน้าที่กำหนดแกนบล็อก (block direction) และแกนอินไลน์ (inline direction) ซึ่งระบบเลย์เอาต์ของ CSS นำไปใช้ในการจัดวางองค์ประกอบต่างๆ ภายในหน้าเว็บ
แกนอินไลน์จะวิ่งไปตามทิศทางที่เนื้อหาไหลไปภายในบรรทัดเดียว ขณะที่แกนบล็อกจะวิ่งไปตามทิศทางที่บล็อกและบรรทัดต่างๆ ซ้อนทับกัน แกนเหล่านี้สามารถวางตัวในแนวตั้งหรือแนวนอนก็ได้ ขึ้นอยู่กับค่าของ writing-mode ที่ถูกเลือกใช้งานในขณะนั้น
การทำความเข้าใจแนวคิดเรื่องแกนลอจิก (logical axes) ถือเป็นก้าวสำคัญสำหรับนักพัฒนาเว็บยุคใหม่ เพราะช่วยให้เราละทิ้งการคิดแบบยึดติดกับทิศทางกายภาพเดิมๆ เช่น บน ล่าง ซ้าย ขวา ซึ่งมักสร้างปัญหาเมื่อต้องทำเว็บรองรับภาษาที่เขียนจากขวาไปซ้ายหรือจากบนลงล่าง การเปลี่ยนมามองเป็น block และ start/end จะทำให้โค้ดมีความยืดหยุ่นและรองรับสากลได้ดีกว่ามาก
ภายใต้โหมดการเขียนแบบตั้งต้นอย่าง horizontal-tb แกนอินไลน์จะวิ่งในแนวราบส่วนแกนบล็อกจะวิ่งในแนวดิ่ง แต่หากเปลี่ยนไปใช้โหมดแนวตั้งอย่าง vertical-rl แกนอินไลน์จะสลับไปวิ่งในแนวดิ่งแทน และแกนบล็อกจะวิ่งในแนวราบสลับกันไป
เลย์เอาต์ CSS สมัยใหม่ถูกออกแบบมาให้ทำงานสอดคล้องกับแกนลอจิกเหล่านี้ ไม่ว่าจะเป็น Flexbox, Grid, การจัดตำแหน่ง (alignment) ตลอดจนคุณสมบัติเชิงลอจิก (logical properties) ต่างๆ ที่อธิบายความสัมพันธ์ผ่านคำว่า block, inline, start และ end แทนการอ้างอิงตำแหน่งทางกายภาพแบบตายตัว
แนวคิดนี้ส่งผลโดยตรงต่อคุณสมบัติเชิงลอจิก เช่น inline-size และ block-size ที่เข้ามาทำหน้าที่บอกขนาดขององค์ประกอบตามแนวแกนอินไลน์หรือแกนบล็อก แทนการระบุความกว้างและความสูง (width และ height) แบบเดิม รวมถึงคุณสมบัติที่เกี่ยวข้องกับระยะห่างอย่าง margin-inline-start หรือ padding-block-end ด้วยเช่นกัน
เมื่อใช้งานร่วมกับเครื่องมือจัดการเลย์เอาต์อื่นๆ จะพบพฤติกรรมที่น่าสนใจดังนี้:
- ใน Flexbox คอนเทนเนอร์ที่มีการตั้งค่า
flex-directionเป็นrowจะจัดเรียงไอเทมไปตามแกนอินไลน์ ส่วนค่าcolumnจะจัดเรียงตามแกนบล็อก - Grid เคารพค่า writing-mode ในการวางตำแหน่งและกำหนดขนาดของไอเทม โดยแถวและคอลัมน์จะไม่ถูกผูกติดกับทิศทางทางกายภาพ
- คุณสมบัติการจัดวางอย่าง
align-itemsและjustify-itemsก็ทำงานตามหลักการแกนลอจิกนี้เช่นกัน
ความเข้าใจเกี่ยวกับโมเดลการทำงานนี้มีประโยชน์อย่างยิ่ง แม้ว่าในงานจริงนักพัฒนาอาจไม่เคยต้องสร้างเลย์เอาต์ในแนวตั้งเลยก็ตาม ทันทีที่เริ่มฝึกคิดในมุมมองของแกนบล็อกและแกนอินไลน์ ฟีเจอร์เลย์เอาต์ยุคใหม่จะกลายเป็นเรื่องที่เข้าใจได้ง่ายขึ้น และช่วยให้โครงสร้างเว็บไม่ยึดติดกับทิศทางการแสดงผลหรือหน้าจอรูปแบบใดรูปแบบหนึ่งอีกต่อไป
ในแง่ของการนำไปใช้งานจริง คุณสมบัติ writing-mode ถูกบัญญัติไว้ภายใต้ข้อกำหนด CSS Writing Modes Level 4 specification และเวลานี้มีความพร้อมใช้งานอย่างกว้างขวางในบรรดาเว็บเบราว์เซอร์ยุคใหม่ทุกค่าย
ที่มา: CSS-Tricks
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น