สร้างงานไทโปกราฟีให้ดีขึ้นด้วย `text-wrap: pretty`

 (webkit.org)
4 คะแนน โดย GN⁺ 2025-04-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เจาะลึก text-wrap: pretty ที่ช่วยให้ไทโปกราฟีบนเว็บสวยงามยิ่งขึ้น
  • ฟีเจอร์ใหม่นี้ถูกนำมาใช้ใน Safari Technology Preview 216 เพื่อปรับปรุงไทโปกราฟีบนเว็บให้ประณีตและอ่านง่ายขึ้น
  • เดิมทีการจัดวางข้อความบนเว็บจะประมวลผลทีละบรรทัด แต่ pretty จะพิจารณาทั้งย่อหน้าเพื่อปรับตำแหน่งการขึ้นบรรทัดใหม่
  • ฟีเจอร์นี้ช่วยเพิ่มความอ่านง่ายและการเข้าถึง โดยได้แรงบันดาลใจจากวิธีจัดเรียงตัวพิมพ์แบบดั้งเดิม

เรียนรู้แนวทางการตัดบรรทัดที่ดีจากไทโปกราฟีแบบดั้งเดิม

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

ประวัติของวิธีตัดบรรทัดบนเว็บ

  • เว็บใช้วิธี "ประมวลผลทีละบรรทัดตั้งแต่บรรทัดแรก" มาตั้งแต่ปี 1991
  • วิธีนี้คำนวณความยาวข้อความของแต่ละบรรทัดแยกจากกัน และไม่คำนึงถึงความกลมกลืนระหว่างบรรทัด
  • เครื่องมืออย่าง InDesign หรือ LaTeX จะจัดบรรทัดโดยดูทั้งย่อหน้า แต่เว็บยังทำแบบนั้นไม่ได้จนกระทั่งเมื่อไม่นานมานี้
  • Safari Technology Preview 216 เป็นครั้งแรกที่มีการนำวิธีตัดบรรทัดโดยพิจารณาทั้งย่อหน้ามาใช้

ปัญหาที่ text-wrap: pretty แก้ไข

  • ประเมินทั้งย่อหน้าเพื่อกำหนดตำแหน่งการตัดบรรทัดที่เหมาะสมที่สุด
  • ป้องกันบรรทัดสุดท้ายที่สั้นเกินไป ปรับปรุงลักษณะปลายบรรทัด (rag) และลดการใช้ยัติภังค์ที่ไม่จำเป็น
  • เบราว์เซอร์ตระกูล Chromium ปรับปรุงเฉพาะ 4 บรรทัดสุดท้ายของย่อหน้า แต่ WebKit ใช้กับทั้งย่อหน้า
  • ยังไม่ได้ปรับปรุงปัญหา rivers แต่มีแผนจะเพิ่มในอนาคต

ความแตกต่างของการใช้งานในแต่ละเบราว์เซอร์

  • pretty สามารถทำงานต่างกันได้ในแต่ละเบราว์เซอร์ตามที่ CSS Working Group กำหนดไว้
  • WebKit ใช้กับทั้งย่อหน้า ส่วน Chromium ใช้กับเพียง 4 บรรทัดสุดท้าย
  • ดังนั้นนักพัฒนาไม่ควรใช้มันแค่เพื่อปรับบรรทัดสุดท้าย แต่สามารถใช้เพื่อยกระดับไทโปกราฟีโดยรวมได้

ดูเดโม

  • สามารถทดลองชุดค่าผสมของ pretty, balance, ยัติภังค์ และการจัดแนวได้ใน CodePen เดโม
  • เปิด "show guides" และ "show ghosts" เพื่อเปรียบเทียบก่อนและหลังการเปลี่ยนแปลงได้
  • สามารถดูผลลัพธ์ได้กับหลายภาษา เช่น อังกฤษ อาหรับ เยอรมัน จีน และญี่ปุ่น

คลายความกังวลด้านประสิทธิภาพ

  • เนื้อหาที่มีหลายบรรทัดมากอาจกระทบประสิทธิภาพได้ แต่สำหรับย่อหน้าทั่วไปไม่มีปัญหาด้านประสิทธิภาพ
  • หากไม่ใช่ย่อหน้าที่ยาวระดับหลายร้อยถึงหลายพันบรรทัด ก็สามารถใช้งานได้อย่างสบายใจ
  • หากจำเป็น WebKit มีแผนจะแบ่งย่อหน้าที่ยาวออกเป็นส่วน ๆ เพื่อรับประกันประสิทธิภาพ

ความแตกต่างระหว่าง pretty และ balance

  • pretty ยังรักษาให้ข้อความเติมเต็มความกว้างของคอนเทนเนอร์ พร้อมทำให้การตัดบรรทัดเป็นธรรมชาติมากขึ้น
  • balance เน้นทำให้ทุกบรรทัดมีความยาวใกล้เคียงกัน จึงเติมคอนเทนเนอร์ได้น้อยกว่า
  • โดยทั่วไป pretty เหมาะกับข้อความเนื้อหา ส่วน balance เหมาะกับพาดหัว คำบรรยาย และข้อความ teaser
  • แม้ทั้งคู่จะใช้กับข้อความสั้นได้ แต่กับเนื้อหายาวควรหลีกเลี่ยง balance

คำอธิบายค่าอื่น ๆ ของ text-wrap

text-wrap: avoid-short-last-lines

  • เป็นค่าที่เพิ่มเข้ามาใหม่ โดยมุ่งเน้นเฉพาะการหลีกเลี่ยงบรรทัดสุดท้ายที่สั้นเกินไป
  • ขณะนี้ยังไม่มีเบราว์เซอร์ใดนำไปใช้

text-wrap: auto

  • เป็นค่าเริ่มต้น โดยใช้อัลกอริทึม "greedy line breaking" แบบตัดทีละบรรทัดที่ใช้มาตั้งแต่ปี 1991
  • ในอนาคตค่าเริ่มต้นนี้อาจได้รับการปรับปรุงในตัวเบราว์เซอร์เอง

text-wrap: stable

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

รายละเอียดของพร็อพเพอร์ตี text-wrap

  • text-wrap เป็น shorthand ของสองพร็อพเพอร์ตีคือ text-wrap-mode และ text-wrap-style

  • text-wrap-mode: ตั้งค่าว่าอนุญาตให้ตัดบรรทัดหรือไม่ (wrap / nowrap)

  • text-wrap-style: เลือกอัลกอริทึมการตัดบรรทัด (auto, stable, balance, pretty, avoid-short-last-lines)

    text-wrap-style: pretty;  
text-wrap-mode: wrap;

  • เมื่อนำไปใช้ร่วมกับพร็อพเพอร์ตี white-space ควรตรวจสอบวิธีจัดการช่องว่างด้วย

สรุป

  • text-wrap: pretty ทำให้การตัดบรรทัดข้อความบนเว็บละเอียดและชาญฉลาดกว่าที่เคย
  • ถูกนำมาใช้ใน Safari Technology Preview 216 ด้วยวิธีประเมินทั้งย่อหน้า
  • แม้นำไปใช้กับเนื้อหายาวก็แทบไม่มีปัญหาด้านประสิทธิภาพ และช่วยเพิ่มทั้งความอ่านง่ายและความสวยงามอย่างมาก
  • ควรเข้าใจความต่างจาก balance และเลือกใช้ให้เหมาะกับประเภทของเนื้อหา

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-04-09
ความคิดเห็นจาก Hacker News
  • ขำกับคำพูดที่ว่ามีนักพัฒนาจำนวนมากกังวลเรื่องประสิทธิภาพของ "text-wrap: pretty" ยากจะเชื่อว่ามีนักพัฒนามากขนาดนั้นที่คำนึงถึงประสิทธิภาพของการตัดบรรทัดข้อความ
  • เนื้อหาในเดโมเป็นภาษาอังกฤษ และเป็นภาษาอังกฤษที่แปลก ๆ ไม่เกี่ยวกับหัวข้อ และจะเกี่ยวก็ต่อเมื่อพยายามปรับเรียงคำใหม่เพื่อให้การตัดบรรทัดดีขึ้น
  • หวังว่าจะมีการเพิ่มฟีเจอร์นี้ลงใน ereader เพราะ ereader มีเอนจินเลย์เอาต์ที่ไม่ค่อยดี
  • มีการทุ่มเทความพยายามและความใส่ใจกับการทำให้ข้อความออนไลน์สวยงามน้อยเกินไป เว็บพาข้อความถอยหลังไปหลายศตวรรษ ฟีเจอร์นี้จึงเป็นสิ่งที่น่ายินดี
  • มีการเพิ่มการรองรับ "text-wrap: pretty" ใน Safari Technology Preview ซึ่งนำความประณีตในระดับที่ไม่เคยมีมาก่อนมาสู่เว็บไทโปกราฟี ตามข้อมูลของ caniuse.com นั้น Chrome รองรับฟีเจอร์นี้มาตั้งแต่เดือนกันยายน 2023 แล้ว จึงเข้าใจได้ยากว่าคำว่า "ไม่เคยมีมาก่อน" หมายถึงอะไร
  • มีใครรู้ความแตกต่างระหว่าง "text-align: justify" กับ "text-wrap: pretty" ไหม? ใน Chrome นั้น "text-wrap: pretty" ให้ผลลัพธ์ที่นุ่มนวลกว่ามาก ฉันลองดูแล้วว่าการใช้ทั้งสองอย่างกับเนื้อหาหลักของบล็อกทั่วไปจะดีไหม และดูเหมือนว่าแต่ละอย่างให้ผลเปลี่ยนแปลงคนละแบบ
  • ฟีเจอร์นี้ยอดเยี่ยมมาก การโฟกัสกับบรรทัดสุดท้ายที่สั้นและความไม่เรียบของขอบข้อความไม่ใช่เรื่องน่าแปลกใจ แต่ยังไม่ได้มีการปรับเพื่อป้องกัน rivers ฉันนึกภาพไม่ออกว่าจะนิยามตัวชี้วัดสำหรับ rivers อย่างไร เลยสงสัยว่ามีใครคิดค้นตัวชี้วัดอันชาญฉลาดที่ใช้งานได้จริงขึ้นมาหรือยัง
  • ย่อหน้าที่พยายามหลีกเลี่ยงคำกำพร้ากลับปล่อยให้คำว่า "large" อยู่ลำพัง การใช้ "text-wrap: pretty" แล้วช่วยแก้ได้
  • จุดประสงค์ของ "pretty" ที่ CSS Working Group ออกแบบไว้ คือให้แต่ละเบราว์เซอร์ทำเท่าที่ทำได้เพื่อปรับปรุงการตัดบรรทัดข้อความ โดยไม่ได้บังคับให้ทุกเบราว์เซอร์ต้องเลือกแบบเดียวกัน เนื่องจากวิธีที่ Chrome นำไปใช้งาน นักพัฒนาเว็บหลายคนจึงคาดหวังว่าค่านี้มีไว้เพื่อป้องกันบรรทัดสุดท้ายที่สั้น แต่จริง ๆ แล้วนั่นไม่ใช่เจตนา
  • ตอนนี้กำลังใช้ "text-wrap: balance" กับพาดหัวอยู่แล้ว ก่อนหน้านี้เคยพยายามผูกบางคำเข้าด้วยกันเพื่อเลี่ยงการตัดบรรทัดที่ดูไม่ดี และ "text-wrap: pretty" ก็น่าจะแก้ปัญหาคล้ายกันในข้อความเนื้อหาได้