CSS text-wrap: สมดุล

เทคนิคการจัดรูปแบบตัวอักษรแบบคลาสสิกของการแบ่งบรรทัดด้วยตนเองเพื่อให้บล็อกข้อความมีความสมดุลได้เข้ามาอยู่ใน 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 นำศาสตร์ของ สร้างความสมดุลให้กับข้อความในเว็บด้วยวิธีอัตโนมัติ ต่อยอดจากงานและ ธรรมเนียมของนักออกแบบ ในอุตสาหกรรมการพิมพ์

ปรับสมดุลพาดหัว

กรณีการใช้งานนี้จะเป็นและควรเป็นกรณีการใช้งานหลักสําหรับ 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;
}

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

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

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

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

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

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