Presentación en HN: Dropflow, un motor de layout CSS para Node o `<canvas>`

 (github.com/chearon)
3 puntos por GN⁺ 2024-03-22 | 3 comentarios | Compartir por WhatsApp

Presentación de Dropflow

  • Dropflow es un motor de layout CSS creado para explorar el alcance de estándares básicos de CSS (inline, block, float, positioning, tablas, etc.).
  • Soporta implementaciones de layout de texto de alta calidad y puede mostrar múltiples idiomas del mundo.
  • Puede usarse en el backend con Node y node-canvas para generar PDFs o imágenes, o en el navegador para renderizar texto enriquecido y con ajuste de línea en canvas.

Funciones principales

  • Soporte para más de 30 propiedades complejas como float
  • Soporte para texto bidireccional y RTL
  • Además de aceptar HTML y CSS, soporta una API de Hyperscript (h()) para aplicar estilos como objetos
  • Se deben registrar todos los buffers OpenType/TrueType
  • Fallback de fuentes a nivel de grafema
  • Soporte para diacríticos con color
  • Saltos de línea preferidos (por ejemplo, mover el padding inicial a la siguiente línea)
  • Shaping optimizado
  • Los estilos heredados y en cascada no se calculan dos veces
  • Maneja la mayor cantidad posible de casos límite de layout CSS
  • Tipado completo
  • Muchas pruebas
  • Rápido

Reglas CSS compatibles

  • Formato inline: propiedades como color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space y otras están funcionales.
  • Formato de bloque: las propiedades clear y float están funcionales.
  • Caja y posicionamiento: propiedades como background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index y otras están funcionales.

Cómo usarlo

  • Dropflow funciona sobre un DOM con estilos heredados y calculados.
  • Se usa la función h() para crear el DOM y definir estilos como objetos comunes.
  • Registrar las fuentes antes del layout es un paso obligatorio.
  • Se puede hacer el layout y dibujar sobre el tamaño completo del canvas.

Características de rendimiento

  • El rendimiento es el objetivo más importante después de la precisión.
  • Se puede comprobar el rendimiento con varios ejemplos.
  • Convertir HTML a imagen toma 9 ms en una MacBook Pro 2019 y 13 ms en una MacBook Pro 2012.
  • Convertir 'The Little Prince' de HTML a imagen toma menos de 160 ms en una MacBook Pro 2019 y menos de 250 ms en una MacBook Pro 2012.
  • Generar y hacer layout de una palabra de 10 caracteres (sin dibujar) toma menos de 25 µs en una MacBook Pro 2019 y menos de 50 µs en una MacBook Pro 2012.
  • Con la API de Hyperscript se puede omitir el parseo de HTML y CSS y crear el DOM directamente para lograr el mejor rendimiento.

API

  • El registro de fuentes y la creación del DOM son los dos primeros pasos.
  • Se puede renderizar el DOM en canvas o usar funciones de bajo nivel si se desea conservar el layout.

HarfBuzz

  • El layout de glifos es realizado por HarfBuzz compilado a WebAssembly.
  • Esto permite alcanzar un nivel de precisión imposible al usar la API measureText.

Agradecimientos

  • dropflow no tiene dependencias en package.json, pero fue posible gracias a muchos otros proyectos.
  • Las dependencias de Javascript fueron ajustadas para el proyecto e incluidas en el repositorio.

Opinión de GN⁺

  • Dropflow es una nueva herramienta para desarrolladores web que aborda la complejidad del layout CSS y ofrece un layout de texto consistente tanto en navegador como en backend.
  • Este tipo de herramienta puede ser especialmente útil para desarrollar aplicaciones web internacionalizadas que necesitan soportar varios idiomas y fuentes.
  • El uso de HarfBuzz puede mejorar mucho la precisión del renderizado de texto, aunque podría representar una barrera de entrada para desarrolladores no familiarizados con la tecnología WebAssembly.
  • Otros proyectos con funciones parecidas incluyen bibliotecas de layout que usan CSS Grid y Flexbox, pero Dropflow se enfoca en un enfoque más tradicional de layout CSS.
  • Antes de adoptar Dropflow, conviene evaluar si encaja bien con los requisitos del proyecto considerando rendimiento y compatibilidad.

Lecturas relacionadas

3 comentarios

 
winterjung 2024-03-23

El título original era "Show HN: Dropflow, a CSS layout engine for node or <canvas>". Ahora aparece como "GN⁺: Presentación en HN: motor de diseño CSS para node o <canvas>, Dropflow</canvas>".
 
dlehals2 2024-03-22

Como hay una etiqueta en el título, se rompe la parte del título en la página de detalle... jeje, hay que hacer escape...
 
GN⁺ 2024-03-22
Comentarios de Hacker News
  • Se enfatiza la importancia de contar con materiales que expliquen con claridad la "caja negra mágica" del motor de renderizado del navegador. Si se pudiera crear una especificación completa legible por máquinas para el renderizado de HTML y CSS, se podría generar un renderizador, y las particularidades del navegador podrían ser una extensión de eso.
  • Se expresa agradecimiento por este trabajo publicado como open source. El método actual para generar PDFs bonitos en el backend consiste en ejecutar un navegador headless y usar APIs del navegador para convertir HTML/CSS a PDF, pero se comenta que ejecutar instancias de navegador en el servidor y escalar adecuadamente para cargas de trabajo grandes resulta costoso. Ahora es posible diseñar y generar PDFs usando HTML/CSS sin el overhead del navegador.
  • Se relaciona con la curiosidad sobre si CSS y SVG pueden usarse como una abstracción para bibliotecas gráficas y de UI. node-canvas parece encargarse de la parte de dibujo, y esto parece poder cubrir la parte de layout necesaria en una biblioteca de UI. Se plantea la duda sobre la dificultad de implementar CSS.
  • Se agradece porque se estaba buscando algo como esto para un proyecto, y se menciona que también sería útil para otros proyectos que usen SVG o canvas.
  • Se comenta que la mayoría de la gente probablemente no se da cuenta de lo difícil que es convertir HTML a PNG de forma programática. Uno termina enfrentándose a innumerables pequeños problemas relacionados con las diferencias entre Node y el navegador, o entre HTML y canvas.
  • Se opina que es imposible imaginar la enorme cantidad de trabajo necesaria para entender CSS y construir un motor de layout a su alrededor.
  • Para quienes tienen dificultades con Flexbox, se presenta una herramienta que puede simplificar el proceso de crear layouts responsivos sin necesidad de enfocarse en diversas propiedades.
  • Se felicita por considerar esto un gran logro. Se da por hecho que se invirtió muchísimo tiempo, y se expresa curiosidad por saber si también están construyendo un producto de hojas de cálculo y uno de PDF (¿vista previa?), y cómo los combinan.
  • Se elogia el trabajo y se agradece a chearon.
  • Se comparte que se va a revisar la posibilidad de usar esto como base para algo como NativeScript o Node.js. El texto es uno de los elementos de UI más complejos que ofrece un framework de UI, y si Flow Layout funciona, eso resulta muy alentador. Se expresa interés en qué tanto han avanzado funciones como los gestos (en especial el resaltado de texto) y la integración con IME. En cualquier caso, se felicita por haberlo publicado como open source.