Perkenalan HN: Dropflow, mesin layout CSS untuk Node atau <canvas>

 (github.com/chearon)
3 poin oleh GN⁺ 2024-03-22 | 3 komentar | Bagikan ke WhatsApp

Perkenalan Dropflow

  • Dropflow adalah mesin layout CSS yang dibuat untuk mengeksplorasi cakupan standar CSS dasar (inline, block, float, positioning, table, dan lain-lain).
  • Mendukung implementasi layout teks berkualitas tinggi dan dapat menampilkan berbagai bahasa di dunia.
  • Dapat digunakan di backend dengan Node dan node-canvas untuk menghasilkan PDF atau gambar, atau di browser untuk merender teks kaya dan terbungkus ke canvas.

Fitur utama

  • Mendukung lebih dari 30 properti kompleks seperti float
  • Mendukung teks bidirectional dan RTL
  • Selain menerima HTML dan CSS, juga mendukung API Hyperscript (h()) untuk memberi gaya dengan objek
  • Harus mendaftarkan semua buffer OpenType/TrueType
  • Fallback font pada tingkat grapheme
  • Mendukung tanda diakritik berwarna
  • Pemenggalan baris yang diinginkan (misalnya memindahkan padding awal ke baris berikutnya)
  • Shaping yang dioptimalkan
  • Gaya yang diwariskan dan cascade tidak dihitung dua kali
  • Menangani sebanyak mungkin edge case layout CSS
  • Typing lengkap
  • Banyak pengujian
  • Cepat

Aturan CSS yang didukung

  • Pemformatan inline: properti seperti color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space, dan lainnya berfungsi.
  • Pemformatan block: properti clear, float berfungsi.
  • Box dan positioning: properti seperti background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index, dan lainnya berfungsi.

Cara penggunaan

  • Dropflow bekerja pada DOM yang memiliki gaya turunan dan gaya hasil komputasi.
  • Gunakan fungsi h() untuk membuat DOM, dan tentukan gaya sebagai objek biasa.
  • Mendaftarkan font sebelum layout adalah langkah wajib.
  • Dapat melakukan layout dan menggambar pada ukuran penuh canvas.

Karakteristik performa

  • Performa adalah tujuan penting kedua setelah akurasi.
  • Performa dapat diperiksa melalui berbagai contoh.
  • Pada MacBook Pro 2019, mengonversi HTML menjadi gambar memerlukan 9ms, dan pada MacBook Pro 2012 memerlukan 13ms.
  • Mengonversi 'The Little Prince' dari HTML menjadi gambar memerlukan kurang dari 160ms pada MacBook Pro 2019, dan kurang dari 250ms pada MacBook Pro 2012.
  • Membuat dan me-layout kata 10 huruf (tanpa menggambar) memerlukan kurang dari 25µs pada MacBook Pro 2019, dan kurang dari 50µs pada MacBook Pro 2012.
  • Dengan menggunakan API Hyperscript, Anda dapat melewati tahap parsing HTML dan CSS dan langsung membuat DOM untuk mencapai performa tercepat.

API

  • Pendaftaran font dan pembuatan DOM adalah dua langkah pertama.
  • Anda dapat merender DOM ke canvas, atau menggunakan fungsi level rendah jika ingin mempertahankan layout.

HarfBuzz

  • Layout glyph dilakukan oleh HarfBuzz yang dikompilasi ke WebAssembly.
  • Ini memungkinkan tercapainya tingkat akurasi yang tidak mungkin diperoleh saat menggunakan API measureText.

Ucapan terima kasih

  • dropflow tidak memiliki dependensi package.json, tetapi proyek ini dimungkinkan berkat banyak proyek lain.
  • Dependensi Javascript telah dimodifikasi agar sesuai dengan proyek dan sudah di-check-in.

Pendapat GN⁺

  • Dropflow adalah alat baru bagi pengembang web untuk mengatasi kompleksitas layout CSS dan menyediakan layout teks yang konsisten baik di browser maupun backend.
  • Alat seperti ini dapat sangat berguna terutama untuk pengembangan aplikasi web yang terinternasionalisasi dan harus mendukung berbagai bahasa serta font.
  • Penggunaan HarfBuzz dapat sangat meningkatkan akurasi perenderan teks, tetapi bisa menjadi hambatan awal bagi pengembang yang belum akrab dengan teknologi WebAssembly.
  • Proyek lain dengan fungsi serupa mencakup pustaka layout yang menggunakan CSS Grid dan Flexbox, tetapi Dropflow berfokus pada pendekatan layout CSS yang lebih tradisional.
  • Sebelum mengadopsi Dropflow, perlu dievaluasi apakah alat ini sesuai dengan kebutuhan proyek dengan mempertimbangkan performa dan kompatibilitas.

Bacaan terkait

3 komentar

 
winterjung 2024-03-23

Judul aslinya ternyata adalah "Show HN: Dropflow, mesin layout CSS untuk node atau <canvas>". Sekarang judulnya masuk sebagai "GN⁺: Perkenalan HN: Dropflow, mesin layout CSS untuk node atau <canvas></canvas>".
 
dlehals2 2024-03-22

Karena ada tag di judul, bagian judul di halaman detail jadi rusak ya.. haha, perlu di-escape..
 
GN⁺ 2024-03-22
Komentar Hacker News
  • Menekankan pentingnya materi yang menjelaskan dengan jelas 'kotak ajaib' dari mesin rendering browser. Jika bisa dibuat spesifikasi lengkap yang dapat dibaca mesin untuk rendering HTML dan CSS, renderer dapat dibuat, dan keanehan browser bisa menjadi perluasannya.
  • Menyampaikan terima kasih atas karya ini yang tersedia sebagai open source. Saat ini, cara membuat PDF yang indah di backend adalah dengan menjalankan browser headless dan menggunakan API browser untuk mengubah HTML/CSS menjadi PDF, tetapi ini mahal karena harus menjalankan instance browser di server dan menskalakannya dengan baik untuk beban kerja besar. Sekarang PDF dapat dirancang dan dibuat menggunakan HTML/CSS tanpa overhead browser.
  • Terkait rasa penasaran apakah CSS dan SVG dapat digunakan sebagai abstraksi untuk library grafis dan UI. node-canvas tampaknya mengisi bagian menggambar, dan ini terlihat mampu menangani bagian layout yang dibutuhkan dalam library UI. Mengajukan pertanyaan tentang sulitnya mengimplementasikan CSS.
  • Menyampaikan apresiasi karena sudah lama mencari sesuatu seperti ini untuk proyek, dan ini juga akan berguna untuk proyek lain yang menggunakan SVG atau canvas.
  • Mengatakan bahwa kebanyakan orang mungkin tidak menyadari betapa sulitnya mengubah HTML menjadi PNG secara terprogram. Akan muncul banyak masalah kecil terkait perbedaan antara Node dan browser, atau antara HTML dan canvas.
  • Menyampaikan pendapat bahwa sulit membayangkan besarnya pekerjaan yang dibutuhkan untuk memahami CSS dan membangun mesin layout di sekitarnya.
  • Bagi orang yang kesulitan dengan Flexbox, memperkenalkan alat yang dapat menyederhanakan proses membuat layout responsif tanpa perlu fokus pada berbagai properti.
  • Menyampaikan selamat karena ini pencapaian besar. Yakin banyak waktu telah dicurahkan, dan menyatakan rasa ingin tahu apakah juga sedang membuat produk spreadsheet dan produk PDF (pratinjau?), serta bagaimana keduanya digabungkan.
  • Memuji pekerjaannya dan berterima kasih kepada chearon.
  • Membagikan bahwa akan memeriksa kemungkinan menggunakan ini sebagai fondasi untuk hal seperti NativeScript atau Node.js. Teks adalah salah satu elemen UI paling kompleks yang disediakan framework UI, dan jika Flow Layout berfungsi, itu sangat menggembirakan. Menyatakan ketertarikan pada sejauh mana fitur seperti gesture (terutama penyorotan teks) dan integrasi IME telah berkembang. Bagaimanapun, menyampaikan pujian karena telah merilisnya sebagai open source.