แนะนำ Dropflow
- Dropflow เป็นเอนจินจัดวางเลย์เอาต์ CSS ที่สร้างขึ้นเพื่อสำรวจขอบเขตของมาตรฐาน CSS พื้นฐาน เช่น inline, block, float, positioning, table เป็นต้น
- รองรับการทำเลย์เอาต์ข้อความคุณภาพสูง และสามารถแสดงผลได้ในหลายภาษาทั่วโลก
- สามารถใช้บนแบ็กเอนด์ร่วมกับ Node และ node-canvas เพื่อสร้าง PDF หรือรูปภาพ หรือใช้ในเบราว์เซอร์เพื่อเรนเดอร์ข้อความแบบสมบูรณ์และตัดบรรทัดลงบนแคนวาสได้
ฟีเจอร์หลัก
- รองรับพร็อพเพอร์ตีกว่า 30 รายการที่ซับซ้อน เช่น
float
- รองรับข้อความสองทิศทางและ RTL
- นอกจากรับ HTML และ CSS แล้ว ยังรองรับ Hyperscript API (
h()) สำหรับกำหนดสไตล์ด้วยอ็อบเจ็กต์
- ต้องลงทะเบียนบัฟเฟอร์ OpenType/TrueType ทั้งหมด
- รองรับ font fallback ในระดับ grapheme
- รองรับเครื่องหมายกำกับการออกเสียงแบบมีสี
- รองรับการตัดบรรทัดที่เหมาะสม (เช่น ย้าย padding ตอนต้นไปยังบรรทัดถัดไป)
- shaping ที่ปรับให้มีประสิทธิภาพ
- สไตล์แบบ inheritance และ cascading จะไม่ถูกคำนวณซ้ำสองครั้ง
- จัดการ edge case ของเลย์เอาต์ CSS ได้มากที่สุดเท่าที่เป็นไปได้
- มี typing ครบถ้วน
- มีการทดสอบจำนวนมาก
- เร็ว
กฎ CSS ที่รองรับ
- การจัดรูปแบบแบบ inline: พร็อพเพอร์ตีอย่าง
color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space เป็นต้น อยู่ในสถานะใช้งานได้
- การจัดรูปแบบแบบ block: พร็อพเพอร์ตี
clear, float อยู่ในสถานะใช้งานได้
- กล่องและการจัดตำแหน่ง: พร็อพเพอร์ตีอย่าง
background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index เป็นต้น อยู่ในสถานะใช้งานได้
วิธีใช้งาน
- Dropflow ทำงานบน DOM ที่มีการสืบทอดและคำนวณสไตล์แล้ว
- ใช้ฟังก์ชัน
h() เพื่อสร้าง DOM และกำหนดสไตล์เป็นอ็อบเจ็กต์ทั่วไป
- การลงทะเบียนฟอนต์ก่อนทำเลย์เอาต์เป็นขั้นตอนที่จำเป็น
- สามารถทำเลย์เอาต์และวาดลงบนพื้นที่เต็มของแคนวาสได้
คุณลักษณะด้านประสิทธิภาพ
- ประสิทธิภาพเป็นเป้าหมายสำคัญรองจากความถูกต้อง
- สามารถตรวจสอบประสิทธิภาพได้ผ่านตัวอย่างหลายแบบ
- บน MacBook Pro รุ่นปี 2019 ใช้เวลา 9ms ในการแปลง HTML เป็นรูปภาพ และบน MacBook Pro รุ่นปี 2012 ใช้เวลา 13ms
- การแปลง 'The Little Prince' จาก HTML เป็นรูปภาพใช้เวลาน้อยกว่า 160ms บน MacBook Pro รุ่นปี 2019 และน้อยกว่า 250ms บน MacBook Pro รุ่นปี 2012
- การสร้างและทำเลย์เอาต์คำยาว 10 ตัวอักษรหนึ่งคำ (ไม่รวมการวาด) ใช้เวลาน้อยกว่า 25µs บน MacBook Pro รุ่นปี 2019 และน้อยกว่า 50µs บน MacBook Pro รุ่นปี 2012
- หากใช้ Hyperscript API จะสามารถข้ามขั้นตอนการพาร์ส HTML และ CSS แล้วสร้าง DOM โดยตรงเพื่อให้ได้ประสิทธิภาพสูงสุด
API
- การลงทะเบียนฟอนต์และการสร้าง DOM เป็นสองขั้นตอนแรก
- สามารถเรนเดอร์ DOM ลงบนแคนวาส หรือใช้ฟังก์ชันระดับล่างหากต้องการเก็บเลย์เอาต์ไว้
HarfBuzz
- การจัดวาง glyph ดำเนินการโดย HarfBuzz ที่คอมไพล์เป็น WebAssembly
- ทำให้ได้ความแม่นยำในระดับที่ไม่สามารถทำได้เมื่อใช้ API
measureText
คำขอบคุณ
- dropflow ไม่มี dependency ใน
package.json แต่เกิดขึ้นได้ด้วยความช่วยเหลือจากหลายโปรเจ็กต์อื่น
- dependency ฝั่ง Javascript ได้ถูกปรับแก้ให้เหมาะกับโปรเจ็กต์และเช็กอินไว้แล้ว
ความเห็นของ GN⁺
- Dropflow เป็นเครื่องมือใหม่สำหรับนักพัฒนาเว็บในการรับมือกับความซับซ้อนของเลย์เอาต์ CSS และมอบเลย์เอาต์ข้อความที่สม่ำเสมอทั้งในเบราว์เซอร์และแบ็กเอนด์
- เครื่องมือแบบนี้อาจมีประโยชน์อย่างยิ่งต่อการพัฒนาเว็บแอปที่รองรับหลายภาษาและหลายฟอนต์
- การใช้ HarfBuzz สามารถยกระดับความแม่นยำของการเรนเดอร์ข้อความได้มาก แต่ก็อาจเป็นอุปสรรคเริ่มต้นสำหรับนักพัฒนาที่ไม่คุ้นเคยกับเทคโนโลยี WebAssembly
- โปรเจ็กต์อื่นที่มีฟังก์ชันคล้ายกัน ได้แก่ ไลบรารีเลย์เอาต์ที่ใช้ CSS Grid และ Flexbox แต่ Dropflow มุ่งเน้นไปที่แนวทางเลย์เอาต์ CSS แบบดั้งเดิมมากกว่า
- ก่อนนำ Dropflow ไปใช้ ควรประเมินให้แน่ใจว่าเข้ากับความต้องการของโปรเจ็กต์ โดยคำนึงถึงทั้งประสิทธิภาพและความเข้ากันได้
3 ความคิดเห็น
ชื่อเรื่องต้นฉบับคือ "Show HN: Dropflow, a CSS layout engine for node or <canvas>" สินะ ตอนนี้กลับถูกใส่ไว้เป็น "GN⁺: HN แนะนำ: เอนจินเลย์เอาต์ CSS สำหรับ node หรือ <canvas>, Dropflow</canvas>" แทน
มีแท็กอยู่ในชื่อเรื่อง เลยทำให้ส่วนชื่อบนหน้ารายละเอียดเพี้ยนไปสินะ.. ฮ่าๆ ควร escape หน่อย..
ความคิดเห็นจาก Hacker News