CSS text-wrap: สมดุล

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

อดัม อาร์ไกล์

Twitter GitHub

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

การสนับสนุนเบราว์เซอร์

• 114
• 114
• 121

แหล่งที่มา

ลองใช้เดโม

หากไม่มี 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 บรรทัดเท่านั้น

ลองใช้เดโม

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

ไม่ควรที่จะใช้การปรับสมดุลข้อความกับการออกแบบทั้งหมด นี่เป็นคำขอที่สูญเปล่าเนื่องจากมีขีดจำกัดอยู่ที่ 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 ไม่ได้ส่งผลใดๆ และสามารถดูได้ในตัวอย่างนี้

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

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

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

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