CSS text-wrap: สมดุล

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

Adam Argyle

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

การรองรับเบราว์เซอร์

• 114
• 114
• 121
• 17.5

แหล่งที่มา

ลองดูการสาธิต

หากไม่มี 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 ไม่มีผลนี้และสามารถดูได้ในตัวอย่างนี้

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

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

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

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