Présentation sur HN : Dropflow, un moteur de mise en page CSS pour Node ou `<canvas>`

 (github.com/chearon)
3 points par GN⁺ 2024-03-22 | 3 commentaires | Partager sur WhatsApp

Présentation de Dropflow

  • Dropflow est un moteur de mise en page CSS créé pour explorer le périmètre des standards CSS fondamentaux (inline, block, float, positioning, table, etc.).
  • Il prend en charge une implémentation de haute qualité de la mise en page du texte et permet l’affichage de nombreuses langues du monde.
  • Il peut être utilisé côté backend avec Node et node-canvas pour générer des PDF ou des images, ou dans le navigateur pour rendre sur canvas du texte riche avec retour à la ligne.

Fonctionnalités principales

  • Prise en charge de plus de 30 propriétés complexes, comme float
  • Prise en charge du texte bidirectionnel et RTL
  • En plus d’accepter du HTML et du CSS, prise en charge d’une API Hyperscript (h()) permettant de définir les styles sous forme d’objets
  • Tous les buffers OpenType/TrueType doivent être enregistrés
  • Fallback de police au niveau des graphèmes
  • Prise en charge des signes diacritiques colorés
  • Sauts de ligne souhaitables pris en charge (par ex. déplacement du padding de début à la ligne suivante)
  • Shaping optimisé
  • Les styles hérités et en cascade ne sont pas calculés deux fois
  • Gestion d’autant de cas limites de mise en page CSS que possible
  • Typage complet
  • Beaucoup de tests
  • Rapide

Règles CSS prises en charge

  • Formatage inline : les propriétés telles que color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space, etc. sont opérationnelles.
  • Formatage block : les propriétés clear et float sont opérationnelles.
  • Boîtes et positionnement : les propriétés telles que background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index, etc. sont opérationnelles.

Utilisation

  • Dropflow fonctionne sur un DOM avec des styles hérités et calculés.
  • Le DOM est créé avec la fonction h(), et les styles sont définis comme des objets ordinaires.
  • L’enregistrement des polices avant la mise en page est une étape obligatoire.
  • Il est possible d’effectuer la mise en page sur toute la taille du canvas puis de dessiner.

Caractéristiques de performance

  • La performance est l’objectif le plus important après l’exactitude.
  • Les performances peuvent être vérifiées à travers plusieurs exemples.
  • Sur un MacBook Pro 2019, la conversion de HTML en image prend 9 ms, et sur un MacBook Pro 2012, 13 ms.
  • La conversion de The Little Prince de HTML en image prend moins de 160 ms sur un MacBook Pro 2019 et moins de 250 ms sur un MacBook Pro 2012.
  • La génération et la mise en page d’un mot de 10 caractères (sans le dessin) prennent moins de 25 µs sur un MacBook Pro 2019 et moins de 50 µs sur un MacBook Pro 2012.
  • Avec l’API Hyperscript, il est possible d’atteindre les meilleures performances en sautant l’étape de parsing HTML et CSS pour créer directement le DOM.

API

  • L’enregistrement des polices et la création du DOM constituent les deux premières étapes.
  • Il est possible de rendre le DOM sur un canvas ou d’utiliser des fonctions de plus bas niveau si l’on souhaite conserver la mise en page.

HarfBuzz

  • La mise en page des glyphes est assurée par HarfBuzz compilé en WebAssembly.
  • Cela permet d’atteindre un niveau de précision impossible avec l’API measureText.

Remerciements

  • dropflow n’a pas de dépendances package.json, mais il a été rendu possible grâce à de nombreux autres projets.
  • Les dépendances Javascript ont été modifiées pour correspondre au projet puis intégrées au dépôt.

L’avis de GN⁺

  • Dropflow est un nouvel outil destiné aux développeurs web pour gérer la complexité de la mise en page CSS et fournir une mise en page du texte cohérente à la fois dans le navigateur et côté backend.
  • Ce type d’outil peut être particulièrement utile pour le développement d’applications web internationalisées devant prendre en charge diverses langues et polices.
  • L’utilisation de HarfBuzz peut nettement améliorer la précision du rendu du texte, mais peut représenter une barrière à l’entrée pour les développeurs peu familiers avec la technologie WebAssembly.
  • Parmi les autres projets offrant des fonctionnalités similaires, on trouve des bibliothèques de mise en page utilisant CSS Grid et Flexbox, mais Dropflow se concentre sur une approche plus traditionnelle de la mise en page CSS.
  • Avant d’adopter Dropflow, il convient d’évaluer s’il correspond bien aux exigences du projet en tenant compte des performances et de la compatibilité.

À lire aussi

3 commentaires

 
winterjung 2024-03-23

Le titre original était donc « Show HN: Dropflow, a CSS layout engine for node or <canvas> ». Maintenant, il apparaît comme « GN⁺: Présentation de HN : moteur de mise en page CSS pour node ou <canvas>, Dropflow</canvas> ».
 
dlehals2 2024-03-22

Comme il y a des balises dans le titre, la partie titre de la page de détail s’affiche mal, haha. Il faut les échapper...
 
GN⁺ 2024-03-22
Commentaires Hacker News
  • Souligne l’importance de ressources qui expliquent clairement la « boîte noire magique » des moteurs de rendu des navigateurs. S’il était possible de créer une spécification complète lisible par une machine pour le rendu HTML et CSS, on pourrait générer un moteur de rendu, et les particularités des navigateurs pourraient en être des extensions.
  • Exprime sa gratitude pour ce travail publié en open source. La méthode actuelle pour générer de beaux PDF côté back-end consiste à exécuter un navigateur headless et à utiliser les API du navigateur pour convertir du HTML/CSS en PDF, mais cela revient cher car il faut faire tourner des instances de navigateur sur le serveur et les faire monter en charge correctement sous forte charge. Il est désormais possible de concevoir et de générer des PDF à partir de HTML/CSS sans la surcharge d’un navigateur.
  • Évoque la possibilité d’utiliser CSS et SVG comme abstraction au-dessus de bibliothèques graphiques et d’UI. node-canvas semble couvrir la partie dessin, et cela semble pouvoir prendre en charge la partie mise en page nécessaire dans une bibliothèque UI. S’interroge sur la difficulté d’implémenter CSS.
  • Dit qu’il cherchait quelque chose comme ça pour son projet et que cela sera aussi utile à d’autres projets utilisant SVG ou canvas.
  • Estime que la plupart des gens ne réalisent pas à quel point il est difficile de convertir du HTML en PNG de manière programmatique. On se retrouve face à une multitude de petits problèmes liés aux différences entre Node et le navigateur, ou entre HTML et canvas.
  • Explique qu’il n’arrive pas à imaginer l’énorme quantité de travail nécessaire pour comprendre CSS et construire un moteur de mise en page autour.
  • Pour les personnes qui ont du mal avec Flexbox, présente un outil qui peut simplifier la création de mises en page responsives sans avoir à se concentrer sur les nombreuses propriétés.
  • Félicite pour cette grande réussite. Est convaincu que beaucoup de temps y a été consacré et se demande s’ils développent aussi un produit de tableur et un produit PDF (aperçu ?), ainsi que la manière dont tout cela s’articule.
  • Fait l’éloge du travail et remercie chearon.
  • Partage qu’il va vérifier la possibilité d’utiliser cela comme élément de base pour quelque chose comme NativeScript ou Node.js. Le texte est l’un des composants UI les plus complexes fournis par un framework UI, et si le Flow Layout fonctionne, c’est très encourageant. S’intéresse au niveau d’avancement de fonctionnalités comme les gestes (en particulier la sélection/surlignage de texte) et l’intégration IME. Quoi qu’il en soit, félicite pour l’avoir publié en open source.