CSS text-wrap: สมดุล

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

Adam Argyle

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

ไม่มี text-wrap: balance ผู้ออกแบบ บรรณาธิการเนื้อหา และผู้เผยแพร่ เครื่องมือ 2-3 รายการ เพื่อเปลี่ยนความสมดุลของเส้น ตัวเลือกที่ดีที่สุดที่มีให้เลือกใช้ <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 แต่สามารถตั้งค่า หนึ่งครั้งสำหรับภาษาใดก็ได้

ข้อจำกัด

งานสร้างความสมดุลให้กับข้อความมีค่าใช้จ่าย เบราว์เซอร์จำเป็นต้องวนซ้ำ ทำซ้ำๆ เพื่อหาวิธี Wrapper ที่สมดุลที่สุด ประสิทธิภาพนี้ ค่าใช้จ่ายจะลดลงตามกฎ โดยใช้ได้สำหรับบรรทัดไม่เกิน 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% ของความกว้างเส้นเฉลี่ย