ปัญหาที่ยากที่สุดของวิทยาการคอมพิวเตอร์: การจัดองค์ประกอบให้อยู่กึ่งกลาง (centering things)

 (tonsky.me)
17 คะแนน โดย GN⁺ 2024-04-18 | 3 ความคิดเห็น | แชร์ทาง WhatsApp
  • ในแอปพลิเคชันของหลายบริษัท องค์ประกอบ UI อย่างข้อความ ไอคอน ฯลฯ มักไม่ได้ถูกจัดให้อยู่กึ่งกลางอย่างถูกต้อง
  • ทั้งที่สามารถใช้ flex และ grid ของ CSS เพื่อจัดให้อยู่กึ่งกลางได้อย่างง่ายดาย
display: flex  
justify-content: center /* จัดกึ่งกลางแนวนอน */  
align-items: center /* จัดกึ่งกลางแนวตั้ง */

หรือ

display: grid  
justify-items: center /* จัดกึ่งกลางแนวนอน */  
align-items: center /* จัดกึ่งกลางแนวตั้ง */

ปัจจัยที่ทำให้การจัดกึ่งกลางเป็นเรื่องยาก

  • metrics ของฟอนต์มีบทบาทสำคัญ ฟอนต์ยอดนิยมส่วนใหญ่มีช่องว่างใน bounding box ที่ไม่ได้พอดีกับตัวอักษรเป๊ะ ๆ ทำให้จัดกึ่งกลางได้ยาก
  • ผลจากการตั้งค่า line-height ทำให้แทบเป็นไปไม่ได้เลยที่จะจัดแนวองค์ประกอบสองชิ้นที่อยู่คนละคอนเทนเนอร์ให้ตรงกัน
  • การจัดไอคอนให้อยู่ข้างข้อความก็เป็นงานที่ยากมากเช่นกัน โดยใช้คุณสมบัติ vertical-align ของ CSS จัดไอคอนให้มีความหมายเชิงสายตาไม่ได้
  • icon font ที่นำไอคอนไปใส่ไว้ในไฟล์ฟอนต์ยิ่งทำให้การจัดแนวยากขึ้น เพราะควบคุมขนาดและ padding ไม่ได้
  • แม้แต่นักออกแบบเองก็อาจพลาดด้วยการจัดกึ่งกลางแบบกลไกโดยไม่คำนึงถึงรูปร่างของไอคอน
  • แม้แต่การจัดแนวนอนก็อาจผิดพลาดได้หากไม่ใส่ใจในรายละเอียด

แนวทางแก้ไข

นักออกแบบ

  • หากปรับ bounding box ของฟอนต์ให้พอดีกับข้อความเป๊ะ ๆ การจัดกึ่งกลางจะง่ายขึ้นมาก
  • Figma รองรับฟีเจอร์นี้ (แต่ไม่ได้เปิดเป็นค่าเริ่มต้น)
    • Vertical Trim : Cap Height to baseline

นักออกแบบฟอนต์

  • หากตั้งค่า font metrics ให้พื้นที่ระหว่าง ascender และ descender มีขนาดเป็น 2 เท่าของ cap-height นักพัฒนาจะจัดกึ่งกลางได้ง่ายขึ้น
  • ไม่จำเป็นต้องยืด ascender/descender จริงไปจนสุดขอบ แค่ให้ค่าตัวเลขตรงกันก็พอ

นักพัฒนาเว็บ

  • ต้องรู้ล่วงหน้าว่าจะใช้ฟอนต์ใด (จะใช้ไม่ได้เมื่อมีการแทนที่ฟอนต์)
  • สามารถเพิ่มค่า padding-bottom ที่คำนวณจาก font metrics เพื่อปรับการจัดกึ่งกลางแนวตั้งให้ตรงได้
  • สำหรับไอคอนก็สามารถจัดแนวได้เช่นกันโดยตั้ง vertical-align: baseline แล้วเลื่อนลงตามค่าที่คำนวณจาก font metrics และขนาดไอคอน

icon font

  • ได้โปรด เลิกใช้ icon font แล้วหันไปใช้ฟอร์แมตภาพทั่วไปแทน
  • ไม่มีอะไรจะง่ายไปกว่าการจัดแนวสี่เหลี่ยมสองอันที่มีความกว้างและความสูง

การชดเชยด้วยสายตา

  • นักพัฒนาจัดแนวได้เฉพาะสี่เหลี่ยมที่สมบูรณ์แบบทางคณิตศาสตร์เท่านั้น ส่วนสิ่งที่ต้องปรับด้วยมือคือการวางไอคอนให้ดูสมดุลทางสายตาภายในสี่เหลี่ยม

ความเห็นของ GN⁺

  • แสดงให้เห็นว่าการใส่ใจรายละเอียดเล็ก ๆ สามารถยกระดับคุณภาพของ UI ได้มาก แม้แต่เรื่องเล็กน้อยอย่างการจัดกึ่งกลางเพียงอย่างเดียวก็ทำให้ความรู้สึกโดยรวมเปลี่ยนไปได้
  • สะท้อนว่าแนวคิดแบบ "นักออกแบบดูแค่งานออกแบบ นักพัฒนาดูแค่งานพัฒนา" นั้นไม่พอ แต่ต้องเข้าใจขอบเขตงานของกันและกันและร่วมมือกันจึงจะได้ผลลัพธ์ที่ดี
  • ตั้งแต่ขั้นตอนออกแบบก็ควรจัด font metrics และทำต้นแบบโดยคำนึงถึงการนำไปใช้งานจริง เพื่อให้ไม่เกิดความต่างของการเรนเดอร์ระหว่างเบราว์เซอร์และทำให้พัฒนาออกมาตามเจตนาของนักออกแบบได้ง่ายขึ้น
  • แม้แต่ในผลิตภัณฑ์ของบริษัทใหญ่ ๆ อย่าง Apple, MS, Google ก็ยังพบปัญหาแบบนี้ แต่คนส่วนใหญ่มักมองข้ามไปโดยไม่ทันสังเกต ยิ่งตอกย้ำว่าการสร้างงานด้วยความหมกมุ่นในรายละเอียดนั้นสำคัญมาก
  • โดยเฉพาะช่วงหลังที่มีการใช้เครื่องมือทดสอบ UI อัตโนมัติมากขึ้น จนขั้นตอนการตรวจด้วยสายตาของมนุษย์ถูกละไป ปัญหาลักษณะนี้จึงอาจเกิดบ่อยขึ้นและควรระวัง

บทความที่เกี่ยวข้อง

3 ความคิดเห็น

 
dormis 2024-04-19

ก็น่าคิดเหมือนกันว่าการจัดให้อยู่กึ่งกลางแบบกลไกนั้นดีจริงหรือเปล่า เหมือนกับที่เมาส์ซึ่งออกแบบตามหลักสรีรศาสตร์ให้ซ้ายขวาไม่สมมาตรกันเล็กน้อยกลับใช้งานได้สบายกว่า จึงอาจเป็นองค์ประกอบที่ควรตัดสินจากภาพรวมของการใช้งานทั้งหมดก็ได้
 
jokuhus 2024-04-23

ดูเหมือนว่าประเด็นสำคัญคือผลลัพธ์อาจออกมาไม่ตรงกับที่ตั้งใจไว้ เช่น สถานการณ์ที่การคลิกเมาส์ไปเกิดที่ส่วนหางของเคอร์เซอร์บนหน้าจอ แทนที่จะเป็นที่ปลายลูกศร
 
GN⁺ 2024-04-18
ความคิดเห็นจาก Hacker News

สรุปเนื้อหา:

  • เลย์เอาต์ของ CSS มีปัญหามาก และเครื่องมือ 2D/3D อย่างโปรแกรม CAD, เกมเอนจิน, โปรแกรมแอนิเมชัน ฯลฯ มีเลย์เอาต์เอนจินและระบบข้อจำกัดที่ดีกว่า
  • ไม่มีคำตอบที่ถูกต้องเพียงหนึ่งเดียวสำหรับการจัดแนว และนักออกแบบก็มักจะหาสิ่งให้บ่นได้เสมอ
    • แม้จะใช้ค่าระยะขอบที่วัดอย่างแม่นยำ ก็ยังอาจดูไม่สมมาตรในทางสายตา
    • แม้จะปรับให้เข้ากับรูปทรงของตัวอักษร ก็อาจมีคนบ่นว่าไม่ตรงกับ baseline หรือ x-height เป็นต้น
  • การเรนเดอร์ฟอนต์แตกต่างกันไปตามระบบปฏิบัติการและเบราว์เซอร์ ดังนั้นสิ่งที่จัดแนวได้สมบูรณ์แบบในสภาพแวดล้อมหนึ่งอาจคลาดเคลื่อนในอีกสภาพแวดล้อมหนึ่ง
  • ในกรณีของฟอนต์นอกโลกตะวันตกจะยิ่งซับซ้อนกว่าเดิม
  • แม้แต่ในโลกความเป็นจริง การจัดแนวก็เป็นปัญหาที่ยากเช่นกัน (ตัวอย่างภาพสนามบาสเกตบอล NCAA)
  • เกณฑ์ของการจัดแนวแตกต่างกันไปตามผู้มอง
  • แนะนำเว็บไซต์เดโมที่สามารถทดลอง justify และ align ของ CSS แบบโต้ตอบได้
  • ตอนจัดวางไอคอนข้างข้อความ เคยมีคำแนะนำจากนักออกแบบให้ยึดตาม "จุดศูนย์กลางเชิงตัวพิมพ์" ของตัวข้อความ ไม่ใช่ดูแค่ฟอนต์ แต่ในทางปฏิบัติก็ยังต้องประนีประนอม
  • มีคนอ้างมานานกว่าสิบปีแล้วว่า CSS ไล่ตามความสามารถของตารางได้ทัน แต่ก็ยังไม่สมบูรณ์อยู่ดี