CSS นำเทคนิคการออกแบบตัวอักษรแบบดั้งเดิมมาออกแบบการแบ่งบรรทัดสำหรับบล็อกข้อความที่สมดุล
ค่า balance
สำหรับ text-wrap
เป็นส่วนหนึ่งของข้อความ CSS ระดับ 4 ดูตัวอย่างในโพสต์นี้เพื่อดูว่า CSS บรรทัดเดียวนี้ช่วยปรับปรุงเลย์เอาต์ข้อความได้อย่างมากได้อย่างไร
หากไม่มี text-wrap: balance
นักออกแบบ ผู้แก้ไขเนื้อหา และผู้เผยแพร่เนื้อหาจะมีเครื่องมือเล็กๆ น้อยๆ ในการปรับเปลี่ยนวิธีปรับสมดุลของบรรทัด ตัวเลือกที่ดีที่สุดที่มีให้ใช้คือ <wbr>
หรือ ­
เพื่อช่วยกำหนดเลย์เอาต์ข้อความให้ตัดสินใจเลือกตำแหน่งที่จะแบ่งบรรทัดและคำได้อย่างชาญฉลาดยิ่งขึ้น
ในฐานะนักพัฒนาซอฟต์แวร์ คุณไม่ทราบขนาดสุดท้าย ขนาดแบบอักษร หรือแม้แต่ภาษาของบรรทัดแรกหรือย่อหน้า ตัวแปรทั้งหมดที่จำเป็นสำหรับการจัดการข้อความอย่างมีประสิทธิภาพและสวยงามจะอยู่ในเบราว์เซอร์ นี่คือสาเหตุที่เราเห็นบรรทัดแรก ตัดเหมือนในรูปภาพต่อไปนี้
![บรรทัดแรกจะไฮไลต์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งขยายเต็มความกว้างของพื้นที่ในบรรทัด และมีคำที่แขวนอยู่ 2 คำในบรรทัดที่ 2](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=6&hl=th)
.unbalanced {
max-inline-size: 50ch;
}
เมื่อใช้ text-wrap: balance
จาก CSS Text 4 คุณสามารถขอให้เบราว์เซอร์หาโซลูชันการตัดบรรทัดแบบสมดุลที่ดีที่สุดสำหรับข้อความได้ เบราว์เซอร์จะรู้ปัจจัยทั้งหมด เช่น ขนาดแบบอักษร ภาษา และพื้นที่ที่จัดสรร
ผลลัพธ์ของการตัดข้อความแบบสมดุลของเบราว์เซอร์ในวันนี้มีลักษณะดังนี้
![ระบบจะไฮไลต์บรรทัดแรกเหมือนกับเครื่องมือสำหรับนักพัฒนาเว็บรุ่นก่อน โดยแต่ไม่ได้ขยายความกว้างเต็ม โดยขึ้นบรรทัดใหม่ก่อนสิ้นสุด จึงเป็นบล็อกข้อความที่สมดุล](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=6&hl=th)
.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
ไม่มีเอฟเฟกต์ดังกล่าวและสามารถดูได้ในตัวอย่างนี้
ดูว่าความกว้างที่แสดงจากเครื่องมือสำหรับนักพัฒนาเว็บมีพื้นที่ขนาดใหญ่มากในตอนท้ายอย่างไร
เนื่องจากเป็นรูปแบบการห่อเท่านั้น ไม่ได้เป็นรูปแบบการเปลี่ยนขนาด ด้วยเหตุนี้ จึงมีบางสถานการณ์ที่ text-wrap: balance
ยังไม่ค่อยดีนัก อย่างน้อยในความคิดของฉัน เช่น ส่วนหัวภายในการ์ด (หรือคอนเทนเนอร์ที่มีเส้นขอบหรือเงา)
การตัดข้อความสมดุลเสียดสีสร้างความไม่สมดุลให้กับองค์ประกอบที่มีอยู่
คำอธิบายสั้นๆ เกี่ยวกับเทคนิคที่เบราว์เซอร์ใช้
เบราว์เซอร์ทำการค้นหาแบบไบนารีอย่างมีประสิทธิภาพสำหรับความกว้างที่เล็กที่สุด ซึ่งไม่ทำให้เกิดบรรทัดใดๆ เพิ่มเติม โดยหยุดที่พิกเซล CSS หนึ่งพิกเซล (ไม่ใช่พิกเซลที่แสดงผล) หากต้องการลดขั้นตอนในการค้นหาไบนารี เบราว์เซอร์จะเริ่มต้นด้วย 80% ของความกว้างเส้นเฉลี่ย