การจัดข้อความที่แม่นยำ

ปัญหา

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

ปัญหาที่พบบ่อยได้แก่

• ไอคอนไม่ตรงแนว: ข้อความปรากฏต่ำกว่าหรือสูงกว่าไอคอนที่อยู่ติดกัน แม้ว่าจะใช้ align-items: center ก็ตาม
• ระยะห่างจากขอบไม่ถูกต้อง: ปุ่มที่มี padding: 12px จะดูเหมือนมีพื้นที่ด้านบนหรือด้านล่างมากกว่าเนื่องจากระยะห่างระหว่างบรรทัดภายในของแบบอักษร
• การจัดแนวแบบชิดขอบ: คุณไม่สามารถจัดแนวส่วนบนของตัวพิมพ์ใหญ่ให้ตรงกับส่วนบนของคอนเทนเนอร์หรือรูปภาพที่อยู่ติดกันได้โดยไม่ต้องใช้ระยะขอบเชิงลบแบบ "เมจิกนัมเบอร์"

วิธีแก้ปัญหา

พร็อพเพอร์ตี้ text-box-trim และ text-box-edge (ชวเลข text-box) ช่วยให้คุณตัดระยะห่างภายในนี้ตามเมตริกแบบอักษรที่เฉพาะเจาะจงได้ การตัดกล่องข้อความให้พอดีกับความสูงของตัวพิมพ์ใหญ่ (ด้านบนของตัวพิมพ์ใหญ่) และเส้นฐานของตัวอักษร (ด้านล่างของตัวอักษรส่วนใหญ่) จะช่วยให้มั่นใจได้ว่ากรอบล้อมรอบขององค์ประกอบตรงกับเนื้อหาภาพ

กลยุทธ์การติดตั้งใช้งาน

1. บังคับ: ใช้ text-box-trim: trim-both (หรือ text-box แบบย่อ) กับองค์ประกอบที่มีข้อความ
2. ต้องระบุ: ระบุเมตริกที่จะใช้สำหรับการตัดแต่งด้วย text-box-edge ใช้ cap alphabetic สำหรับการจัดแนว UI ส่วนใหญ่
3. ควรใช้เพื่อจัดกึ่งกลางภาพในแนวตั้งในคอนเทนเนอร์ Flex หรือ Grid
4. ควรใช้เพื่อตรวจสอบว่าค่า padding ของ CSS ตรงกับช่องว่างที่มองเห็นได้ระหว่างข้อความกับขอบคอนเทนเนอร์
5. อย่าใช้กับเนื้อหาแบบยาวที่จำเป็นต้องใช้การเว้นระยะห่างระหว่างบรรทัดแบบดั้งเดิมเพื่อให้อ่านง่าย เหมาะสำหรับส่วนหัว ปุ่ม และป้ายกำกับ UI

คู่มือการติดตั้งใช้งาน

กรณีการใช้งานที่ 1: ตัดส่วนนำภายในสำหรับป้ายสถานะ

แบบอักษรแต่ละแบบมีระยะห่างในตัวที่แตกต่างกันทั้งด้านบนและด้านล่างของข้อความ ซึ่งอาจทำให้เกิดความท้าทายในการจับคู่การออกแบบหรือการจัดข้อความให้อยู่กึ่งกลางในป้ายสถานะ เมื่อต้องการให้ระยะห่างจากขอบของคอนเทนเนอร์พอดีกับข้อความ ให้ใช้ text-box: trim-both cap alphabetic ซึ่งมีประโยชน์อย่างยิ่งสำหรับคอมโพเนนต์ UI ที่หนาแน่น เช่น ป้ายหรือแท็ก ซึ่งจะช่วยให้ระยะห่างจากขอบเริ่มต้นที่ขอบข้อความทุกด้าน

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

กรณีการใช้งานที่ 2: ข้อความอยู่ตรงกลางพร้อมไอคอน

เมื่อใช้ Flexbox เพื่อจัดแนวข้อความและไอคอน "พื้นที่ว่าง" มักจะทำให้ข้อความดูไม่อยู่กึ่งกลางเล็กน้อย การตัดกล่องช่วยให้เครื่องมือเลย์เอาต์ใช้ความสูงของตัวอักษรที่มองเห็นได้จริงในการจัดแนว

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

กรณีการใช้งานที่ 3: จัดข้อความให้ชิดขอบด้านบน

หากต้องการจัดแนวส่วนหัวให้ตรงกับด้านบนของรูปภาพหรือองค์ประกอบตกแต่งที่อยู่ติดกันอย่างสมบูรณ์แบบ ให้ใช้ trim-start cap alphabetic แม้ว่าจะไม่มีการตัดส่วนท้าย แต่ก็ต้องกำหนดขอบด้านท้าย

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

แนวทางปฏิบัติแนะนำ

• ควรใช้คำย่อ text-box เพื่อความกระชับ เช่น text-box: <trim-direction> <edges>
• ควรระบุขอบทั้ง 2 ด้านเสมอ แม้ว่าจะตัดขอบเพียงด้านเดียวก็ตาม (เว้นแต่จะใช้ขอบ text เริ่มต้น)
• ควรใช้ร่วมกับ line-height เพื่อควบคุมระยะห่าง การตัดจะนำระยะห่างก่อนบรรทัดแรกและบรรทัดสุดท้ายของข้อความออก แต่ line-height จะยังคงส่งผลต่อระยะห่างระหว่างบรรทัดในข้อความหลายบรรทัด
• อย่าใช้กับทุกองค์ประกอบ ใช้เฉพาะในกรณีที่จำเป็นต้องจัดแนวอย่างแม่นยำ

กลยุทธ์สำรอง

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

ปัจจัยอื่นๆ ที่ควรพิจารณา

1. เมตริกแบบอักษร: แบบอักษรที่แตกต่างกันจะมีเมตริกภายในที่แตกต่างกัน cap alphabetic เป็นค่าเริ่มต้นที่เชื่อถือได้ แต่แบบอักษรหรือกรณีการใช้งานบางอย่างอาจต้องใช้ ex (ความสูงของตัวอักษร x) เพื่อการจัดแนวตัวพิมพ์เล็กที่ดีขึ้น
2. ข้อความหลายบรรทัด: การตัดจะใช้กับบรรทัดแรกและบรรทัดสุดท้ายของบล็อก สายภายในจะไม่ได้รับผลกระทบ