CSS text-wrap: สมดุล

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

Adam Argyle
Adam Argyle

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

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

  • 114
  • 114
  • 121
  • 17.5

แหล่งที่มา

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

หากไม่มี text-wrap: balance นักออกแบบ ผู้แก้ไขเนื้อหา และผู้เผยแพร่เนื้อหาจะมีเครื่องมือเล็กๆ น้อยๆ ในการปรับเปลี่ยนวิธีปรับสมดุลของบรรทัด ตัวเลือกที่ดีที่สุดที่มีให้ใช้คือ <wbr> หรือ &shy; เพื่อช่วยกำหนดเลย์เอาต์ข้อความให้ตัดสินใจเลือกตำแหน่งที่จะแบ่งบรรทัดและคำได้อย่างชาญฉลา��ยิ่งขึ้น

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

บรรทัดแรกจะไฮไลต์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งขยายเต็มความกว้างของพื้นที่ในบรรทัด และมีคำที่แขวนอยู่ 2 คำในบรรทัดที่ 2
ลองดูการสาธิต 
.unbalanced {
  max-inline-size: 50ch;
}

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

ระบบจะไฮไลต์บรรทัดแรกเหมือนกับเครื่องมือสำหรับนักพัฒนาเว็บรุ่นก่อน โดยแต่ไม่ได้ขยายความกว้างเต็ม โดยขึ้นบรรทัดใหม่ก่อนสิ้นสุด จึงเป็นบล็อกข้อความที่สมดุล
ลองดูการสาธิต 
.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

การมองเห็นแสดงคู่กัน อยู่นิ่งๆ และไม่มีการแสดงข้อมูลการแก้ไขข้อบกพร่องซ้อนกันจะเ��็นประโยชน์อย่างมาก

ตัวอย่าง 2 ตัวอย่างก่อนหน้านี้แสดงด้วยกัน ตัวอย่างหนึ่งถูกทําเครื่องหมายว่าไม่สมดุล และอีกตัวอย่างหนึ่งเป็น &quot;สมดุล&quot;

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

การค้นหาความสมดุล

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

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

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

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

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

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

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