HN-Vorstellung: Dropflow, eine CSS-Layout-Engine für Node oder `<canvas>`

 (github.com/chearon)
3 Punkte von GN⁺ 2024-03-22 | 3 Kommentare | Auf WhatsApp teilen

Einführung in Dropflow

  • Dropflow ist eine CSS-Layout-Engine, die entwickelt wurde, um den Umfang grundlegender CSS-Standards zu erkunden, darunter Inline, Block, Float, Positionierung und Tabellen.
  • Sie unterstützt die Implementierung hochwertiger Textlayouts und kann viele Sprachen der Welt darstellen.
  • Sie kann im Backend mit Node und node-canvas zur Erzeugung von PDFs oder Bildern verwendet werden oder im Browser, um umfangreichen und umbrochenen Text auf einem Canvas zu rendern.

Hauptfunktionen

  • Unterstützung für mehr als 30 komplexe Eigenschaften wie float
  • Unterstützung für bidirektionalen und RTL-Text
  • Neben der Annahme von HTML und CSS Unterstützung für eine Hyperscript-API (h()), mit der Styles als Objekte angegeben werden
  • Alle OpenType-/TrueType-Buffer müssen registriert werden
  • Font-Fallback auf Graphem-Ebene
  • Unterstützung für farbige Aussprachzeichen
  • Erwünschte Zeilenumbrüche (z. B. Verschieben des Anfangspaddings in die nächste Zeile)
  • Optimiertes Shaping
  • Vererbte und kaskadierte Styles werden nicht zweimal berechnet
  • Behandlung möglichst vieler Edge Cases bei CSS-Layouts
  • Vollständige Typisierung
  • Viele Tests
  • Schnell

Unterstützte CSS-Regeln

  • Inline-Formatierung: Eigenschaften wie color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align und white-space funktionieren.
  • Block-Formatierung: Die Eigenschaften clear und float funktionieren.
  • Boxen und Positionierung: Eigenschaften wie background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width und z-index funktionieren.

Verwendung

  • Dropflow arbeitet auf einem DOM mit vererbten und berechneten Styles.
  • Mit der Funktion h() wird ein DOM erzeugt, und Styles werden als normale Objekte angegeben.
  • Das Registrieren von Schriftarten vor dem Layout ist ein zwingender Schritt.
  • Es kann über die gesamte Größe des Canvas layoutet und gezeichnet werden.

Leistungsmerkmale

  • Performance ist nach Korrektheit das zweitwichtigste Ziel.
  • Die Performance lässt sich anhand mehrerer Beispiele überprüfen.
  • Auf einem MacBook Pro von 2019 dauert die Umwandlung von HTML in ein Bild 9 ms, auf einem MacBook Pro von 2012 13 ms.
  • Die Umwandlung von "Der kleine Prinz" von HTML in ein Bild dauert auf einem MacBook Pro von 2019 weniger als 160 ms, auf einem MacBook Pro von 2012 weniger als 250 ms.
  • Das Erzeugen und Layouten eines Wortes mit 10 Zeichen (ohne Zeichnen) dauert auf einem MacBook Pro von 2019 weniger als 25 µs, auf einem MacBook Pro von 2012 weniger als 50 µs.
  • Mit der Hyperscript-API lässt sich die Parsing-Phase für HTML und CSS überspringen und direkt ein DOM erzeugen, um die höchste Performance zu erreichen.

API

  • Das Registrieren von Schriftarten und das Erzeugen des DOM sind die ersten beiden Schritte.
  • Das DOM kann auf ein Canvas gerendert werden; wenn das Layout beibehalten werden soll, können Funktionen auf niedrigerer Ebene verwendet werden.

HarfBuzz

  • Das Glyphen-Layout wird von HarfBuzz durchgeführt, das nach WebAssembly kompiliert wurde.
  • Dadurch lässt sich ein Genauigkeitsniveau erreichen, das mit der measureText-API nicht möglich ist.

Danksagung

  • dropflow hat keine Abhängigkeiten in package.json, wäre aber ohne viele andere Projekte nicht möglich gewesen.
  • JavaScript-Abhängigkeiten wurden für das Projekt angepasst und mit eingecheckt.

Meinung von GN⁺

  • Dropflow ist ein neues Werkzeug für Webentwickler, das die Komplexität von CSS-Layouts adressiert und konsistente Textlayouts sowohl im Browser als auch im Backend bietet.
  • Solche Werkzeuge können besonders bei der Entwicklung internationalisierter Webanwendungen nützlich sein, die viele Sprachen und Schriftarten unterstützen müssen.
  • Der Einsatz von HarfBuzz kann die Genauigkeit des Textrenderings deutlich verbessern, könnte aber für Entwickler, die mit WebAssembly nicht vertraut sind, eine Einstiegshürde darstellen.
  • Ähnliche Projekte mit vergleichbarer Funktionalität sind Layout-Bibliotheken auf Basis von CSS Grid und Flexbox, doch Dropflow konzentriert sich auf traditionellere CSS-Layout-Ansätze.
  • Vor der Einführung von Dropflow sollte unter Berücksichtigung von Performance und Kompatibilität geprüft werden, ob es gut zu den Anforderungen des Projekts passt.

Verwandte Beiträge

3 Kommentare

 
winterjung 2024-03-23

Der ursprüngliche Titel war wohl „Show HN: Dropflow, a CSS layout engine for node or <canvas>“. Jetzt steht dort allerdings „GN⁺: HN-Einführung: CSS-Layout-Engine für Node oder <canvas>, Dropflow</canvas>`“.
 
dlehals2 2024-03-22

Im Titel sind Tags enthalten, daher wird der Titelbereich auf der Detailseite beschädigt … haha. Man sollte escapen …
 
GN⁺ 2024-03-22
Hacker-News-Kommentare
  • Es wird die Bedeutung von Materialien betont, die die „Black Box“ der Browser-Rendering-Engine klar erklären. Wenn man eine vollständige maschinenlesbare Spezifikation für das Rendern von HTML und CSS erstellen könnte, müsste man damit einen Renderer erzeugen können, und die Besonderheiten des Browsers könnten dann als dessen Erweiterung betrachtet werden.
  • Es wird Dank für diese als Open Source bereitgestellte Arbeit ausgesprochen. Die derzeitige Methode, im Backend schöne PDFs zu erzeugen, besteht darin, einen Headless-Browser auszuführen und über Browser-APIs HTML/CSS in PDF umzuwandeln; das sei teuer, weil dafür Browser-Instanzen auf dem Server laufen müssen und eine sinnvolle Skalierung bei hoher Last kostspielig ist. Nun kann man PDFs mit HTML/CSS entwerfen und erzeugen, ohne den Overhead eines Browsers.
  • Dies stehe im Zusammenhang mit der Frage, ob sich CSS und SVG als Abstraktion für Grafik- und UI-Bibliotheken verwenden lassen. Es scheint, als übernehme node-canvas den Zeichenanteil, sodass dies offenbar auch den für UI-Bibliotheken nötigen Layout-Teil leisten könnte. Dabei wird die Frage aufgeworfen, wie schwierig die Implementierung von CSS ist.
  • Es wird gedankt mit dem Hinweis, dass man für ein Projekt nach genau so etwas gesucht habe und es auch für andere Projekte nützlich sein dürfte, die SVG oder Canvas verwenden.
  • Es wird angemerkt, dass den meisten Menschen wohl nicht klar ist, wie schwierig es ist, HTML programmatisch in PNG umzuwandeln. Man stoße dabei auf unzählige kleine Probleme, die mit den Unterschieden zwischen Node und dem Browser oder zwischen HTML und Canvas zusammenhängen.
  • Es wird die Ansicht geäußert, dass man sich das enorme Arbeitspensum, das zum Verständnis von CSS und zum Aufbau einer Layout-Engine darum herum nötig ist, kaum vorstellen kann.
  • Für Menschen, die mit Flexbox Schwierigkeiten haben, wird ein Tool vorgestellt, das den Prozess zur Erstellung responsiver Layouts vereinfachen kann, ohne dass man sich auf die verschiedenen Eigenschaften im Detail konzentrieren muss.
  • Es wird zu dieser großen Leistung gratuliert. Man ist sicher, dass viel Zeit investiert wurde, und fragt sich, ob außerdem ein Tabellenkalkulationsprodukt und ein PDF-Produkt (Vorschau?) entwickelt werden und wie diese miteinander kombiniert werden.
  • Zusammen mit Lob für die Arbeit wird chearon gedankt.
  • Es wird geteilt, dass man prüfen werde, ob sich dies als Baustein für so etwas wie NativeScript oder Node.js verwenden lässt. Text sei eines der komplexesten UI-Elemente, die ein UI-Framework bereitstellt, und wenn Flow Layout funktioniert, sei das sehr ermutigend. Es wird Interesse daran geäußert, wie weit Funktionen wie Gesten (insbesondere Texthervorhebung) und die IME-Integration fortgeschritten sind. Unabhängig davon wird gelobt, dass es als Open Source veröffentlicht wurde.