Dropflow Tanıtımı
- Dropflow, temel CSS standartlarının (inline, block, float, positioning, table vb.) kapsamını keşfetmek için oluşturulmuş bir CSS yerleşim motorudur.
- Yüksek kaliteli metin yerleşimi uygulamasını destekler ve dünyanın birçok dilini görüntüleyebilir.
- Arka uçta Node ve node-canvas kullanarak PDF veya görsel üretmek ya da tarayıcıda canvas üzerinde zengin ve satır kaydırmalı metinler render etmek için kullanılabilir.
Başlıca özellikler
float gibi karmaşık olanlar dahil 30'dan fazla özelliği destekler- Çift yönlü ve RTL metin desteği
- HTML ve CSS kabul etmenin yanı sıra, stilleri nesne olarak tanımlayan Hyperscript(
h()) API desteği
- Tüm OpenType/TrueType buffer'larının kaydedilmesi gerekir
- Grapheme düzeyinde font fallback
- Renkli telaffuz işaretleri desteği
- Tercih edilen satır sonları desteği (ör. başlangıç padding'inin bir sonraki satıra taşınması)
- Optimize edilmiş shaping
- Kalıtım ve cascading stiller iki kez hesaplanmaz
- Mümkün olduğunca çok CSS yerleşim edge case'ini ele alır
- Tam typing
- Çok sayıda test
- Hızlı
Desteklenen CSS kuralları
- Inline formatting:
color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space gibi özellikler çalışır durumdadır.
- Block formatting:
clear, float özellikleri çalışır durumdadır.
- Kutu ve konumlandırma:
background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index gibi özellikler çalışır durumdadır.
Kullanım şekli
- Dropflow, kalıtılmış ve hesaplanmış stillere sahip bir DOM üzerinde çalışır.
h() fonksiyonu kullanılarak DOM oluşturulur ve stiller sıradan nesneler olarak tanımlanır.- Yerleşimden önce fontları kaydetmek zorunlu bir adımdır.
- Canvas'ın tam boyutunda yerleşim yapıp çizim gerçekleştirebilir.
Performans özellikleri
- Performanstan daha önemli olan hedef doğruluktur.
- Performans çeşitli örnekler üzerinden doğrulanabilir.
- 2019 model MacBook Pro'da HTML'yi görsele dönüştürmek 9 ms, 2012 model MacBook Pro'da ise 13 ms sürer.
- 'The Little Prince' metnini HTML'den görsele dönüştürmek 2019 model MacBook Pro'da 160 ms'den az, 2012 model MacBook Pro'da ise 250 ms'den az sürer.
- 10 harfli bir kelimeyi üretip yerleştirmek (çizim hariç), 2019 model MacBook Pro'da 25µs'den az, 2012 model MacBook Pro'da ise 50µs'den az sürer.
- Hyperscript API kullanılırsa HTML ve CSS parsing aşamaları atlanıp DOM doğrudan oluşturularak en yüksek performans elde edilebilir.
API
- İlk iki adım font kaydı ve DOM oluşturmadır.
- DOM, canvas'a render edilebilir; yerleşimi korumak isteniyorsa daha düşük seviyeli fonksiyonlar kullanılabilir.
HarfBuzz
- Glyph yerleşimi, WebAssembly'ye derlenmiş HarfBuzz tarafından gerçekleştirilir.
- Bu sayede
measureText API kullanılırken mümkün olmayan bir doğruluk seviyesi elde edilebilir.
Teşekkürler
- dropflow'un
package.json bağımlılığı yoktur, ancak birçok başka proje sayesinde mümkün olmuştur.
- Javascript bağımlılıkları projeye uyarlanarak depoya dahil edilmiştir.
GN⁺ Görüşü
- Dropflow, web geliştiricilerine CSS yerleşiminin karmaşıklığını yönetmek ve hem tarayıcıda hem de arka uçta tutarlı metin yerleşimi sunmak için yeni bir araçtır.
- Bu tür araçlar, özellikle çeşitli dilleri ve fontları desteklemesi gereken uluslararasılaştırılmış web uygulamaları geliştirmede faydalı olabilir.
- HarfBuzz kullanımı, metin render etme doğruluğunu büyük ölçüde artırabilir; ancak WebAssembly teknolojisine aşina olmayan geliştiriciler için giriş engeli oluşturabilir.
- Benzer işlevler sunan diğer projeler arasında CSS Grid ve Flexbox kullanan yerleşim kütüphaneleri bulunur; ancak Dropflow daha geleneksel CSS yerleşim yaklaşımına odaklanır.
- Dropflow'u benimsemeden önce, performans ve uyumluluğu dikkate alarak proje gereksinimlerine ne kadar uygun olduğunu değerlendirmek gerekir.
3 yorum
Orijinal başlık meğerse "Show HN: Dropflow, a CSS layout engine for node or <canvas>" imiş. Şu anda ise "GN⁺: HN Tanıtımı: node veya <canvas> için bir CSS yerleşim motoru, Dropflow</canvas>" olarak girilmiş görünüyor.
Başlıkta etiket olduğu için detay sayfasındaki başlık kısmı bozuluyor sanırım.. haha
escapelazım..Hacker News yorumu