Justif - การจัดชิดขอบสองด้านแบบ Knuth-Plass และไมโครไทโปกราฟีสำหรับเว็บ

 (justif.lyall.co)
1 คะแนน โดย GN⁺ 2 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Justif คือเดโมบนเว็บที่ให้เปรียบเทียบการเรนเดอร์เริ่มต้นของเบราว์เซอร์กับการจัดข้อความชิดขอบสองด้านระดับงานพิมพ์ได้โดยตรง
  • สามารถตั้งค่า การตัดคำด้วยยัติภังค์และการยื่นตัวอักษร การขยายความกว้าง การปรับระยะห่างตัวอักษร และการปรับระยะบรรทัดสุดท้ายได้แยกกัน
  • ปรับความกว้างขั้นต่ำของบรรทัดสุดท้ายและช่วงของ การยื่นเครื่องหมายวรรคตอนออกนอกขอบ ได้ และยังเปรียบเทียบกับผลลัพธ์จากการใช้ text-wrap: pretty ได้ด้วย
  • ไม่เพียงทดสอบได้กับงานวรรณกรรมและเอกสารเทคนิคภาษาอังกฤษ แต่ยังทดสอบ ข้อความ RTL ภาษา Hebrew·Arabic และภาษาญี่ปุ่น ได้ด้วย ทั้งกับแบบอักษร serif, sans และ monospace
  • วัดจำนวนบรรทัด การขึ้นบรรทัดใหม่ด้วยยัติภังค์ บรรทัดล้น บรรทัดสุดท้ายที่สั้น รวมถึง ความแปรปรวนของช่องว่างและริเวอร์ (rivers) โดยแสดงเทียบกับการเรนเดอร์ของเบราว์เซอร์แบบเคียงกัน

การจัดชิดขอบสองด้านและการตั้งค่ารายละเอียด

  • Justif ถูกออกแบบมาเพื่อทดสอบ การจัดชิดขอบสองด้านแบบ Knuth-Plass และฟีเจอร์ไมโครไทโปกราฟีหลายอย่างบนเว็บ
    • การตัดคำด้วยยัติภังค์
    • การยื่นตัวอักษร
    • การขยายความกว้าง
    • การปรับระยะห่างตัวอักษร
    • การปรับระยะบรรทัดสุดท้าย
  • การยื่นเครื่องหมายวรรคตอนออกนอกขอบ ใช้งานได้เมื่อเปิดการยื่นตัวอักษร และสามารถใช้กับท้ายบรรทัด ต้นย่อหน้า หรือทั้งช่วงได้
  • ความกว้างขั้นต่ำของบรรทัดสุดท้ายปรับได้ที่ 0.33 และความกว้างเนื้อหาปรับได้ที่ 13em

การเปรียบเทียบข้อความ·แบบอักษร และการวัดผล

  • เลือกข้อความสำหรับเปรียบเทียบได้จาก Alice in Wonderland, Frog Prince, Frankenstein, Ulysses, โพสต์เชิงเทคนิค, RFC 2324 และตัวอย่างแบบอักษร
  • มีข้อความ RTL ภาษา Hebrew·Arabic และข้อความภาษาญี่ปุ่นให้ด้วย
  • แบบอักษรที่รองรับรวมถึง Junicode, EB Garamond, Alegreya, IM Fell English, Vollkorn, Amstelvar, Latin Modern, Georgia, Roboto Flex, Courier Prime, IBM Plex Mono และแบบอักษรของระบบ
  • เมื่อคลิกหรือกดค้างที่ผลลัพธ์ ระบบจะแสดง การเรนเดอร์เริ่มต้นของเบราว์เซอร์ เพื่อเปรียบเทียบกับการเรนเดอร์ของ Justif
  • เครื่องมือเปรียบเทียบรองรับ text-wrap: pretty, การทำให้พร่า, ไม้บรรทัดระยะขอบ และการแสดงช่องว่างที่ไม่สม่ำเสมอ
  • ตัวชี้วัดประกอบด้วยจำนวนบรรทัด การขึ้นบรรทัดใหม่ด้วยยัติภังค์ บรรทัดล้น บรรทัดสุดท้ายที่สั้น ริเวอร์ รวมถึงค่าเฉลี่ยของช่องว่าง ค่าเบี่ยงเบนเฉลี่ยเมื่อเทียบกับช่องว่างตามธรรมชาติ ส่วนเบี่ยงเบนมาตรฐาน และช่องว่างที่กว้างที่สุด

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

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

 
GN⁺ 2 시간 전
ความคิดเห็นบน Lobste.rs

  • โปรเจกต์นี้ vibe coded ด้วย Fable https://news.ycombinator.com/item?id=48946738#49002419

    • สงสัยจริง ๆ ว่าจำเป็นต้องติดแท็กนี้ไหม ทั้งที่หัวข้อของบทความไม่ได้เกี่ยวกับ vibe coding
      ไม่สนใจอ่านประสบการณ์การใช้ LLM เลยอยากกรองออก แต่ในทางปฏิบัติดูเหมือนว่าแค่มีข้อสงสัยว่าใช้ผู้ช่วยเขียนโค้ด ก็จะติดแท็กนี้โดยไม่เกี่ยวกับเนื้อหาหลัก
      กรณีนี้ชัดเจนว่าใช้จริง แต่ก็เคยเห็นบทความโปรเจกต์ถูกติดแท็กเพียงเพราะโปรเจกต์รับ contributor ที่ใช้ผู้ช่วยเขียนโค้ดด้วย
    • ยอมรับอย่างไม่ปิดบังว่าใช้ LLM ตอนสร้างโปรเจกต์นี้
      อย่างไรก็ตาม คำว่า vibe coding และแท็กที่ใช้ที่นี่สูญเสียประโยชน์ไปแล้ว และจำเป็นต้องมีถ้อยคำที่แม่นยำและสร้างสรรค์กว่านี้ เพื่อแยกบทความที่พูดถึงการใช้ LLM ออกจากผลงานที่บังเอิญใช้ LLM ในกระบวนการสร้าง
    • กุ้งล็อบสเตอร์ 1: “เขาพัฒนายารักษามะเร็งได้แล้ว!”
      กุ้งล็อบสเตอร์ 2: “ใช่… แต่เขาใช้ AlphaFold กับ CRISPR แล้วก็… ตึ่งโป๊ะ… Fable ด้วยนะ”
      กุ้งล็อบสเตอร์ 1: “พระเจ้า รับไม่ได้! เพื่อมนุษยชาติ เราควรทิ้งทั้งหมดแล้วใช้ 40 ปี วาดโปรตีนด้วยดินสอสีบนกระดานดำใหม่!”

  • ผลลัพธ์ดูยอดเยี่ยมมาก และยังดีกว่า TeX ที่ไม่ได้ใช้แพ็กเกจ microtype เสียอีก
    ฟีเจอร์การจัดพิมพ์ แบบนี้ควรให้เบราว์เซอร์จัดการโดยตรง
    เบราว์เซอร์บางตัว implement text-wrap: pretty แล้ว แต่ดูเหมือนจะจำกัดไว้แค่ไม่กี่บรรทัด

    • Safari รุ่นใหม่ ๆ implement pretty ได้ค่อนข้างถูกต้องแล้ว แต่มีบั๊กเมื่อใช้ร่วมกับ justify
      https://matklad.github.io/2026/02/14/justifying-text-wrap-pretty.html
    • ถ้าดู สเปก text-wrap: pretty จะเห็นว่าเป็นแค่ hint ล้วน ๆ ที่ไม่ได้กำหนดพฤติกรรมไว้ชัดเจน
      กล่าวเพียงว่า user agent ควรให้ความสำคัญกับการจัดวางที่ดีกว่าความเร็ว และควรพิจารณาหลายบรรทัดเมื่อตัดสินใจตัดบรรทัด นอกนั้นเหมือนกับ auto
      อาจหลีกเลี่ยงบรรทัดสุดท้ายที่สั้นเกินไป ช่องว่างที่ดูเหมือนสายน้ำไหลระหว่างบรรทัด หรือขีด hyphen ต่อเนื่องได้ แต่วิธีปรับปรุงที่แน่นอนต่างกันไปตามเบราว์เซอร์
      เท่าที่จำได้ มันถูกใส่ไว้ในสเปกเพื่อหลีกเลี่ยงการกำหนดข้อจำกัดมากเกินไป หลังจากหลายเบราว์เซอร์บอกว่าจะ implement กันคนละแบบ
      คล้ายกับกรณี Web SQL ถูกยกเลิก เพราะเปิดเผยความจริงว่า implementation สุดท้ายก็จะใช้ SQLite
      หวังว่าสักวันฟีเจอร์เหล่านี้จะถูกใช้เป็นค่าเริ่มต้นใน text-wrap: auto จน text-wrap: pretty ไม่มีผลอะไร และหวังว่า https://bugzilla.mozilla.org/show_bug.cgi?id=630181 จะถูก implement ด้วย
      hint แบบนี้ไม่ใช่เรื่องใหม่ และ will-change ก็เคยเป็น hint สำหรับ optimization ให้เบราว์เซอร์รุ่นก่อนหน้า
      ตอนถูกทำเป็นสเปก Firefox แทบไม่จำเป็นต้องใช้แล้ว และสำหรับ engine รุ่นถัดไปบางตัวก็ไม่ช่วยเลย แต่กลับถูกนำไปใช้เกินจำเป็นอย่างหนัก บางทีคงดีกว่าถ้าคง transformZ(0) ซึ่งเป็นทางลัดที่เห็นชัดเจนไว้
    • ในโลกอุดมคติ ไลบรารีนี้ไม่ควรต้องมีอยู่
      ในเดโมสามารถสลับ text-wrap: pretty เพื่อทดสอบพฤติกรรมของแต่ละเบราว์เซอร์ได้ และแนวทางของ Blink·WebKit·Gecko แตกต่างกันอย่างน่าประหลาดใจ จึงแนะนำให้ลองตรวจสอบในหลายเบราว์เซอร์

  • ผมคิดมานานแล้วว่า hanging punctuation มักถูกใช้หนักเกินไป
    ถ้ามันสะดุดตา ก็แปลว่ามากเกินไปแล้ว โดยเฉพาะ “ ที่แทบจะเด่นเสมอ จึงควรยื่นออกมาน้อยกว่าครึ่งของตอนนี้ด้วยซ้ำ
    กลับกัน ผมชอบเวลาที่ “ ตอนต้นย่อหน้าทำหน้าที่เหมือนการเยื้องเล็ก ๆ
    ถ้าปิด hanging แล้วเปิดเฉพาะ protrusion ที่ละเอียดกว่า ผลลัพธ์ยังพอรับได้ แต่ส่วนใหญ่ผมชอบปิดทั้งสองอย่างมากกว่า
    การจัดการแบบนี้ขึ้นกับฟอนต์อย่างมาก
    ในฟอนต์ serif ชื่อ Equity ที่ผมใช้ ถ้าใช้กับ “f,” ที่ท้ายบรรทัด เครื่องหมาย comma ถูก kerning เข้าไปอยู่ใต้ f อยู่แล้ว ทำให้ส่วนบนของ f โผล่ออกนอกบรรทัดไปด้วย ดูแปลก
    ถ้าฟอนต์ serif วางหางหรือปุ่มของตัวอักษรไว้นอกความกว้างตัวอักษรจนยื่นออกมาอย่างเป็นธรรมชาติ สิ่งเหล่านั้นน่าจะเป็นเป้าหมายที่เหมาะกว่าส่วนใหญ่ของเครื่องหมายวรรคตอน
    สำหรับ การปรับระยะตัวอักษร นั้น letter-spacing อันตรายเพราะทำงานกับ ligature ได้ไม่ดี
    ถ้า ligature ถูกใช้ก่อน ก็จะกลายเป็น “T h i s i s fi n e!” และถ้า letter-spacing ที่ไม่ใช่ 0 ปิด ligature ตัว f ก็จะชนกับจุดของ i
    ส่วนใหญ่มักเกิดแบบหลัง แต่ก็ขึ้นกับระบบตัวเขียน ฟอนต์ และฟีเจอร์ OpenType ที่เปิดไว้ชัดเจน และยังเกิดขึ้นโดยไม่ตั้งใจได้ง่ายด้วย

    • โดยส่วนตัวผมชอบรูปลักษณ์ของ hanging punctuation แต่แน่นอนว่าสามารถเปลี่ยนได้ด้วยการตั้งค่า
      เห็นด้วยว่า ligature ทำให้การปรับระยะตัวอักษรยุ่งยาก แต่ถ้าเป็นขีดจำกัดเริ่มต้นที่ ±3% ผมคิดว่าดูใช้ได้
      ในตัวอย่าง “Type Specimen” สามารถดูส่วนท้ายของย่อหน้าแรกที่มี ligature fl, fi, ffi ต่อเนื่องกันได้ และขีดจำกัด 3% ก็ตั้งค่าได้
    • ปรากฏการณ์ที่ทำให้หงุดหงิดบนเว็บสวีเดนบางเว็บ ซึ่งเครื่องหมายอัญประกาศปิดแบบขวาถูกทิ้งไว้เดี่ยว ๆ ที่ท้ายบรรทัดก่อนหน้า น่าจะอธิบายได้ด้วย การแขวนเครื่องหมายวรรคตอน
      ภาษาสวีเดนใช้เครื่องหมายอัญประกาศคู่แบบขวาทั้งตอนเริ่มและตอนจบของคำอ้าง
      สงสัยมานานแล้วว่ามีวิธีบอกภาษา หรือ locale ของข้อความหนึ่ง ๆ ให้เบราว์เซอร์รู้ เพื่อให้จัดการเครื่องหมายอัญประกาศ จุดทศนิยม และอื่น ๆ โดยอัตโนมัติหรือไม่

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

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

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

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