Giới thiệu về Dropflow
- Dropflow là một công cụ layout CSS được tạo ra để khám phá phạm vi của các tiêu chuẩn CSS cơ bản (inline, block, float, positioning, table, v.v.).
- Hỗ trợ triển khai layout văn bản chất lượng cao và có thể hiển thị nhiều ngôn ngữ trên thế giới.
- Có thể dùng ở backend với Node và node-canvas để tạo PDF hoặc hình ảnh, hoặc trong trình duyệt để render văn bản phong phú có xuống dòng trên canvas.
Tính năng chính
- Hỗ trợ hơn 30 thuộc tính phức tạp như
float
- Hỗ trợ văn bản hai chiều và RTL
- Ngoài việc nhận HTML và CSS, còn hỗ trợ API Hyperscript (
h()) để định kiểu bằng đối tượng
- Cần đăng ký mọi buffer OpenType/TrueType
- Font fallback ở cấp độ grapheme
- Hỗ trợ dấu phát âm có màu
- Ngắt dòng mong muốn hơn (ví dụ: chuyển phần đệm đầu dòng sang dòng tiếp theo)
- Shaping được tối ưu hóa
- Style kế thừa và cascading không bị tính toán hai lần
- Xử lý nhiều edge case của layout CSS nhất có thể
- Typing đầy đủ
- Nhiều bài kiểm thử
- Nhanh
Các quy tắc CSS được hỗ trợ
- Định dạng inline: các thuộc tính như
color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space đang hoạt động.
- Định dạng block: các thuộc tính
clear, float đang hoạt động.
- Box và positioning: các thuộc tính như
background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index đang hoạt động.
Cách sử dụng
- Dropflow hoạt động trên DOM có style kế thừa và style đã được tính toán.
- Tạo DOM bằng hàm
h() và chỉ định style dưới dạng đối tượng thông thường.
- Đăng ký font trước khi layout là bước bắt buộc.
- Có thể layout và vẽ theo toàn bộ kích thước của canvas.
Đặc điểm hiệu năng
- Hiệu năng là mục tiêu quan trọng thứ hai sau độ chính xác.
- Có thể kiểm tra hiệu năng qua nhiều ví dụ.
- Trên MacBook Pro 2019, việc chuyển HTML thành hình ảnh mất 9ms; trên MacBook Pro 2012 mất 13ms.
- Việc chuyển 'The Little Prince' từ HTML thành hình ảnh mất dưới 160ms trên MacBook Pro 2019 và dưới 250ms trên MacBook Pro 2012.
- Việc tạo và layout một từ dài 10 ký tự (không bao gồm vẽ) mất dưới 25µs trên MacBook Pro 2019 và dưới 50µs trên MacBook Pro 2012.
- Dùng Hyperscript API có thể bỏ qua bước parse HTML và CSS, tạo DOM trực tiếp để đạt hiệu năng nhanh nhất.
API
- Đăng ký font và tạo DOM là hai bước đầu tiên.
- Có thể render DOM lên canvas hoặc dùng các hàm cấp thấp nếu muốn giữ lại layout.
HarfBuzz
- Layout glyph được thực hiện bởi HarfBuzz đã được biên dịch sang WebAssembly.
- Điều này cho phép đạt được mức độ chính xác mà khi dùng API
measureText là không thể.
Lời cảm ơn
- dropflow không có dependency
package.json, nhưng có được là nhờ nhiều dự án khác.
- Các dependency Javascript đã được chỉnh sửa cho phù hợp với dự án và được check in.
Ý kiến của GN⁺
- Dropflow là một công cụ mới giúp các nhà phát triển web giải quyết độ phức tạp của layout CSS và cung cấp layout văn bản nhất quán ở cả trình duyệt lẫn backend.
- Những công cụ như vậy có thể đặc biệt hữu ích trong việc phát triển các ứng dụng web quốc tế hóa cần hỗ trợ nhiều ngôn ngữ và font khác nhau.
- Việc sử dụng HarfBuzz có thể cải thiện đáng kể độ chính xác của render văn bản, nhưng cũng có thể là rào cản tiếp cận đối với các nhà phát triển chưa quen với công nghệ WebAssembly.
- Các dự án khác cung cấp tính năng tương tự gồm những thư viện layout dùng CSS Grid và Flexbox, nhưng Dropflow tập trung vào cách layout CSS truyền thống hơn.
- Trước khi áp dụng Dropflow, cần đánh giá xem nó có phù hợp với yêu cầu dự án hay không, đồng thời cân nhắc hiệu năng và khả năng tương thích.
3 bình luận
Tiêu đề gốc là "Show HN: Dropflow, một công cụ bố cục CSS cho node hoặc <canvas>" thì phải. Bây giờ lại đang được đưa vào là "GN⁺: Giới thiệu HN: Dropflow, một công cụ bố cục CSS cho node hoặc <canvas></canvas>".
Trong tiêu đề có thẻ nên phần tiêu đề ở trang chi tiết bị vỡ rồi.. haha, phải escape thôi..
Ý kiến Hacker News