Pretext.JS

ภาพรวม Pretext.JS

Pretext.JS คือเอนจินจัดวางตัวอักษรด้วย JavaScript/TypeScript ล้วน ที่มีความเร็วสูง ออกแบบมาเพื่อคำนวณและจัดตำแหน่งข้อความหลายบรรทัดด้วยเลขคณิตล้วน ๆ โดยไม่ต้องยุ่งกับ Document Object Model (DOM) เลย ช่วยตัดคอขวดด้านประสิทธิภาพจาก “forced synchronous reflows” ที่เกิดจากการวัด DOM แบบเดิม เช่น getBoundingClientRect() ทำให้การจัดวางข้อความเร็วและมีประสิทธิภาพกว่ามาก พัฒนาบนหลักการ “วัดครั้งเดียว ใช้จัด layout ได้ตลอดไป” ทำให้การคำนวณ layout ครั้งถัด ๆ ไปแทบจะเกิดขึ้นทันที

วัตถุประสงค์หลัก
ให้การวัด layout ข้อความ (เช่น ความสูง และจำนวนบรรทัด) ที่มีประสิทธิภาพสูง แม่นยำ และไม่มีการ reflow เหมาะกับเว็บอินเทอร์เฟซที่ซับซ้อนและเปลี่ยนแปลงตลอดเวลา แก้ปัญหาสำคัญเรื่องประสิทธิภาพจาก browser thrashing ที่เกิดจากการวัด DOM ซ้ำไปซ้ำมา

กลุ่มผู้ใช้เป้าหมาย
นักพัฒนาเว็บและทีมที่สร้าง UI ที่ต้องเน้นประสิทธิภาพและมีข้อความจำนวนมาก เช่น แอปที่ใช้ virtual scrolling list, อินเทอร์เฟซแชทของ AI, code editor, กระดานไวท์บอร์ดแบบร่วมมือกัน, data visualization และทุกกรณีที่ต้องการ layout ข้อความแบบไดนามิกที่ลื่นไหล รวดเร็ว และตอบสนองดี โดยไม่ลดทอนประสบการณ์ผู้ใช้

รายละเอียดฟังก์ชันและการทำงาน
Pretext.JS ทำงานหลัก ๆ สองขั้นตอน:

• prepare(text, font)
  ฟังก์ชันนี้รันหนึ่งครั้งสำหรับข้อความและสไตล์ฟอนต์ที่กำหนด ทำการจัดรูปแบบ whitespace ใหม่ ใช้กฎ Unicode line-break แบ่งส่วนข้อความ และวัดความกว้าง advance width ของ glyph แต่ละ segment อย่างแม่นยำผ่าน Canvas font engine ของเบราว์เซอร์ จากนั้นเก็บผลลัพธ์ไว้ใน “handle” ที่นำกลับมาใช้ซ้ำได้

• layout(handle, containerWidth, lineHeight)
  ฟังก์ชันนี้ใช้เพียงเลขคณิตและรันได้แทบจะทันที เมื่อมี handle ที่เตรียมไว้ ความกว้างของคอนเทนเนอร์ และ line height มันจะคำนวณจุดตัดบรรทัดโดยบวกความกว้างของ segment ต่าง ๆ คิดจำนวนบรรทัดรวม และหาความสูงรวมของข้อความ ที่สำคัญคือขั้นตอนนี้ไม่อ่าน DOM เลย ทำให้ไม่มี reflow เกิดขึ้น

ความสามารถหลัก

• Zero DOM Reads
  หลังจากเรียก prepare() ครั้งแรกแล้ว การเรียก layout() ทั้งหมดจะเป็นการคำนวณเชิงเลขล้วน ๆ ไม่แตะ getBoundingClientRect(), offsetHeight หรือ forced synchronous reflows อีกต่อไป

• Real Font Metrics
  ใช้ Canvas font engine แบบ native ของเบราว์เซอร์ในการวัดความกว้าง glyph เพื่อให้ผล layout ตรงกับการเรนเดอร์จริงของเบราว์เซอร์อย่างแม่นยำ

• Multilingual by Design
  รองรับระบบการเขียนที่ซับซ้อนอย่างสมบูรณ์ เช่น CJK (จีน ญี่ปุ่น เกาหลี), อาหรับ, ฮีบรู, ไทย และฮินดี พร้อมการแบ่งข้อความตาม Unicode ที่ถูกต้องและจัดการ bidirectional text ได้

• TypeScript-Native
  พัฒนาด้วย TypeScript ตั้งแต่ต้น ให้ประเภทข้อมูล (types) ที่ชัดเจนครบถ้วนสำหรับทุกฟังก์ชัน พารามิเตอร์ และค่าที่ส่งกลับ โดยไม่ต้องพึ่งแพ็กเกจ @types ภายนอก

• Reusable Prepared Handles
  การเรียก prepare() เพียงครั้งเดียวจะได้ handle ที่นำกลับมาใช้คำนวณ layout ได้กับหลายความกว้างของคอนเทนเนอร์ (เช่น มือถือ แท็บเล็ต เดสก์ท็อป) ด้วย overhead ที่ต่ำมาก

• Zero Runtime Dependencies
  สร้างบนมาตรฐาน API ของเบราว์เซอร์ล้วน ๆ ทำให้ bundle มีขนาดเล็กและไม่ต้องกังวลกับปัญหาจากแพ็กเกจภายนอก

ประโยชน์ต่อผู้ใช้

• ประสิทธิภาพสูงมาก
  ทำให้การจัด layout ข้อความเร็วขึ้นได้ถึงราว 500 เท่าเมื่อเทียบกับวิธีที่พึ่ง DOM แบบดั้งเดิม รองรับการเลื่อนหน้าจอที่ลื่นที่ 60fps และ UI ที่ตอบสนองได้ดีแม้มี element ข้อความแบบไดนามิกนับพัน

• ประสบการณ์ผู้ใช้ดีขึ้น
  ลดปัญหา UI “thrashing” การเคลื่อน/ขยับ และการสั่นของ layout ทำให้ประสบการณ์การมองเห็นลื่นไหลและนิ่ง โดยเฉพาะใน feed เนื้อหาแบบ dynamic หรืออินเทอร์เฟซแชท

• Layout แม่นยำ
  ให้ค่าการวัดข้อความที่ตรงกับการเรนเดอร์จริงของเบราว์เซอร์ ป้องกันความไม่สอดคล้องด้านภาพ

• ลดความซับซ้อนในการพัฒนา
  มี API แบบ TypeScript-native ที่เข้าใจง่าย ช่วยซ่อนความยุ่งยากของการวัดข้อความ และเพิ่มประสิทธิภาพการทำงานของนักพัฒนา

• พร้อมสำหรับแอประดับสากล
  การรองรับระบบการเขียนหลากหลายอย่างแข็งแรง ทำให้สร้างแอประดับสากล (internationalized applications) ได้จริง

• น้ำหนักเบาและเสถียร
  ไม่มี dependency ภายนอก ทำให้ bundle เล็กลงและลดจุดล้มเหลว (point of failure)

ความเข้ากันได้และการผสานรวม

• Framework-Agnostic
  ในฐานะไลบรารี JavaScript/TypeScript ล้วน Pretext.JS สามารถผสานรวมได้อย่างราบรื่นกับทุกเฟรมเวิร์กเว็บสมัยใหม่ (เช่น React, Vue, Angular, Svelte) หรือโค้ด JavaScript เปล่า ๆ

• รองรับเบราว์เซอร์สมัยใหม่
  ใช้มาตรฐาน API ของเบราว์เซอร์ที่มีอยู่ในสภาพแวดล้อมเว็บสมัยใหม่ทั้งหมด

• การติดตั้ง
  ติดตั้งได้ง่ายผ่านตัวจัดการแพ็กเกจยอดนิยม: npm, pnpm และ bun

• การผสานกับ TypeScript
  การรองรับ TypeScript แบบ native ทำให้รวมเข้ากับโปรเจกต์ TypeScript ได้อย่างราบรื่นโดยไม่ต้องตั้งค่าเพิ่มเติม

ตัวอย่างการใช้งานจริงและเดโม

• Virtual Scroll
  เดโมการเรนเดอร์แถวที่มีความสูงแปรผัน 10,000 แถว ด้วยการเลื่อนที่ลื่น 60fps โดยคำนวณทั้งหมดโดยไม่อ่าน DOM

• AI Chat
  ใช้ล่วงหน้าคำนวณความสูงของ chat bubble สำหรับข้อความตอบแบบสตรีมจาก AI เพื่อลบปัญหา layout shift และอาการกระตุก

• Internationalization
  โชว์ layout ที่แม่นยำสำหรับ feed เนื้อหาหลายภาษา ที่ผสมภาษาจีน อาหรับ เกาหลี และตัวอักษรละตินใน virtualized list เดียวกัน

• Community Showcases
  มีตัวอย่างการใช้งานสร้างสรรค์ เช่น เอฟเฟกต์เขียนตัวอักษรบนทราย การแสดงข้อความแบบ geometric และการพันข้อความรอบวัตถุ 3D แบบเรียลไทม์ แสดงให้เห็นความยืดหยุ่นของไลบรารี

วิธีเข้าถึงและเริ่มใช้งาน

• การติดตั้ง

  • ใช้ npm: $ npm install @chenglou/pretext
  • ใช้ pnpm: $ pnpm add @chenglou/pretext
  • ใช้ bun: $ bun add @chenglou/pretext

• การใช้งาน

  1. import ฟังก์ชัน prepare และ layout:
     import { prepare, layout } from '@chenglou/pretext'
  2. เรียก prepare(text, font) หนึ่งครั้งเพื่อรับ handle ที่นำกลับมาใช้ซ้ำได้
  3. เรียก layout(handle, containerWidth, lineHeight) เพื่อรับค่าความสูงและจำนวนบรรทัดอย่างฉับไว

• การทดลองใช้งาน
  มี live playground และเดโมหลากหลายให้ลองเล่นและทำความเข้าใจได้ทันทีบนเว็บไซต์ทางการ (pretextjs.dev)

Pretext.JS คืออะไร?

Pretext.JS คือเอนจินจัดวางข้อความ (text layout engine) ที่ทำงานด้วย JavaScript/TypeScript ล้วน ๆ ที่มีความเร็วสูง ออกแบบมาเพื่อใช้คำนวณและจัดตำแหน่งข้อความหลายบรรทัดด้วยการคำนวณเชิงตัวเลข (arithmetic) อย่างเดียว โดยไม่ต้องยุ่งกับ DOM เลย จึงช่วยขจัดคอขวดด้านประสิทธิภาพที่มักเกิดจากการวัดค่าผ่าน DOM แบบดั้งเดิม

ทำไมจึงควรใช้ Pretext.JS สำหรับสร้างเนื้อหาเชิงโต้ตอบหรือทำแบบทดสอบออนไลน์?

Pretext.JS เหมาะอย่างยิ่งสำหรับงานที่ต้องการการเรนเดอร์ข้อความที่ทั้งเร็วและไดนามิกสูง เช่น การสร้างเนื้อหาเชิงโต้ตอบ หรือแบบทดสอบออนไลน์ ซึ่งการวัดค่าผ่าน DOM แบบเดิมอาจทำให้เว็บช้าลงอย่างมาก Pretext.JS ช่วยให้คุณคำนวณความสูงของข้อความและเลย์เอาต์สำหรับองค์ประกอบที่มีความสูงแปรผัน (variable-height elements), รายการแบบ virtualized lists หรือ text flow ที่ซับซ้อน (เช่น ตัวอักษรล้อมรอบรูปทรงต่าง ๆ) ได้อย่างแม่นยำ โดยไม่ต้องไปกระตุ้น browser reflow ทำให้ประสบการณ์ใช้งานลื่นไหล

Pretext.JS ช่วยเพิ่มประสิทธิภาพได้อย่างไร เมื่อเทียบกับการวัดข้อความด้วย JavaScript แบบเดิม?

การวัดข้อความด้วย JavaScript แบบดั้งเดิม (เช่น getBoundingClientRect()) จะบังคับให้เบราว์เซอร์ต้องทำขั้นตอนการเรนเดอร์ใหม่ทั้งชุด หรือที่เรียกว่า “forced synchronous reflow” ซึ่งมีค่าใช้จ่ายสูงมาก Pretext.JS เลี่ยงปัญหานี้ด้วยการวัดข้อความเพียงครั้งเดียวผ่าน Canvas แล้วหลังจากนั้นจะใช้การคำนวณเชิงตัวเลขล้วน ๆ สำหรับขั้นตอน layout ทั้งหมด (เช่น การตัดบรรทัด การคำนวณความสูงรวม) แนวทางนี้สามารถเร็วขึ้นได้ถึง 500 เท่า ไม่มีการอ่านค่า DOM ระหว่าง layout เลย และตัดกับดักด้านประสิทธิภาพออกไป

ฟีเจอร์และความสามารถหลักของ Pretext.JS มีอะไรบ้าง?

Pretext.JS มาพร้อมความสามารถที่ทรงพลังหลายอย่าง:

Zero DOM Reads

หลังจากเตรียมค่าเริ่มต้นแล้ว คำสั่ง layout ทั้งหมดจะเป็นเพียงการคำนวณเชิงตัวเลขเท่านั้น

Real Font Metrics

ใช้ font engine ของ Canvas บนเบราว์เซอร์เพื่อให้ได้ความกว้าง glyph ที่แม่นยำ

Multilingual by Design

รองรับ CJK, อาหรับ, ฮีบรู, ภาษาไทย, ฮินดี, เกาหลี และตัวอักษรสองทิศทาง (bidirectional text)

TypeScript-native

สร้างบน TypeScript พร้อม type ที่แม่นยำ

Reusable Prepared Handles

เรียก prepare() หนึ่งครั้ง แล้วนำไปใช้ซ้ำกับความกว้างของ container ใด ๆ ก็ได้

Zero Runtime Dependencies

พึ่งพาเฉพาะมาตรฐาน API ของเบราว์เซอร์เท่านั้น ไม่มี dependency ขณะรันไทม์

ติดตั้ง Pretext.JS อย่างไร?

คุณสามารถติดตั้ง Pretext.JS ได้อย่างง่ายดายผ่านตัวจัดการแพ็กเกจที่คุณใช้:

• npm install @chenglou/pretext
• pnpm add @chenglou/pretext
• bun add @chenglou/pretext

อีเมลซัพพอร์ต & ช่องทางติดต่อฝ่ายลูกค้า & ช่องทางติดต่อขอคืนเงินของ Pretext.JS

Pretext.JS เป็นไลบรารี JavaScript แบบโอเพนซอร์ส เนื้อหาที่ให้มานี้ไม่ได้ระบุอีเมลสำหรับซัพพอร์ต ช่องทางติดต่อฝ่ายบริการลูกค้า หรือข้อมูลเกี่ยวกับการขอคืนเงินโดยเฉพาะ หากต้องการขอความช่วยเหลือจากชุมชนหรือพูดคุยแลกเปลี่ยน สามารถดูได้จาก GitHub repository หรือช่องทางชุมชนของโครงการ

Pretext.JS Login

Pretext.JS เป็นไลบรารี JavaScript สำหรับนักพัฒนา ไม่ใช่บริการเว็บที่มีระบบบัญชีผู้ใช้ จึงไม่มีหน้าหรือ ลิงก์สำหรับล็อกอินของ Pretext.JS

Pretext.JS Sign up

Pretext.JS เป็นไลบรารี JavaScript และไม่ต้องให้ผู้ใช้สมัครสมาชิกหรือเปิดบัญชี คุณสามารถติดตั้งและนำไปใช้ในโปรเจกต์ของคุณได้ทันที