CSS text-wrap: balance

เทคนิคการจัดตัวอักษรแบบคลาสสิกในการเขียนบรรทัดใหม่ด้วยตนเองเพื่อให้บล็อกข้อความมีความสมดุลได้มาอยู่ใน CSS แล้ว

Adam Argyle

ค่า balance สำหรับ text-wrap เป็นส่วนหนึ่งของ CSS Text Level 4 ดูตัวอย่างในโพสต์นี้เพื่อเรียนรู้วิธีที่ CSS เพียงบรรทัดเดียวนี้สามารถปรับปรุงเลย์เอาต์ข้อความได้อย่างมาก

หากไม่มี text-wrap: balance นักออกแบบ ผู้แก้ไขเนื้อหา และผู้เผยแพร่โฆษณาจะมี เครื่องมือเพียงไม่กี่อย่าง ในการเปลี่ยนวิธีจัดบรรทัดให้สมดุล ตัวเลือกที่ดีที่สุดที่มีอยู่คือการใช้ <wbr> หรือ ­ เพื่อช่วย แนะนำเลย์เอาต์ข้อความให้ตัดสินใจได้ดีขึ้นว่าจะขึ้นบรรทัดใหม่และตัดคำที่ใด

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

.unbalanced {
  max-inline-size: 50ch;
}

ด้วย text-wrap: balance จาก CSS Text 4 คุณสามารถขอให้เบราว์เซอร์ ค้นหาโซลูชันการจัดบรรทัดข้อความที่สมดุลที่สุด เบราว์เซอร์ทราบ ปัจจัยทั้งหมด เช่น ขนาดแบบอักษร ภาษา และพื้นที่ที่จัดสรร ผลลัพธ์ของการตัดข้อความที่สมดุลของเบราว์เซอร์จะมีลักษณะดังนี้

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

การดูตัวอย่างแบบเคียงข้างกัน แบบคงที่ และไม่มีข้อมูลการแก้ไขข้อผิดพลาดซ้อนทับจะเป็นประโยชน์

คุณจะพึงพอใจกับบล็อกข้อความที่สมดุลมากขึ้น เพราะดึงดูดความสนใจได้ดีขึ้นและอ่านง่ายขึ้นโดยรวม

ค้นหาสมดุล

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

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

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

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

จัดบรรทัดแรกให้สมดุล

นี่จะเป็นและควรเป็น Use Case หลักสำหรับ text-wrap: balance ดึงดูดสายตาด้วยขนาดและทำให้สมมาตรและอ่านง่าย ตั้งค่าพาดหัวทั้งหมดเป็นการตัดข้อความให้สมดุลด้วย CSS ต่อไปนี้

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

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

ข้อจำกัด

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

ข้อพิจารณาด้านประสิทธิภาพ

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

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

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

การโต้ตอบกับพร็อพเพอร์ตี้ white-space

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

.balanced {
  white-space: unset;
  text-wrap: balance;
}

การจัดข้อความให้สมดุลจะไม่เปลี่ยน `inline-size` ขององค์ประกอบ

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

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

การจัดข้อความให้สมดุลจะสร้างความไม่สมดุลให้กับองค์ประกอบที่บรรจุอย่างน่าขัน

คำอธิบายสั้นๆ เกี่ยวกับเทคนิคที่เบราว์เซอร์ใช้

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