Show HN: Dropflow, a CSS layout engine for node or • Hacker News Board

Show HN: Dropflow, a CSS layout engine for node or <canvas>

#1

Post by chearon » Thu, Mar 21, 2024, 1:58 PM UTC

For the last 5 years I've been working on a layout engine that targets CSS2 and some more modern properties.

Live demo: https://chearon.github.io/dropflow/

It matches browsers in all cases I can find where they agree, and it's fast. It supports `position`, `inline-block`, `z-index`, and complex properties like `float` and `vertical-align`. It doesn't support high-level layout like flexbox or grid yet, but you can get intrinsics to easily divide space yourself and paint multiple layout trees. It has a great text layout implementation, and supporting non-Latin scripts is a top priority.

I've wanted this to exist as far back as 2013, and the desire kept coming up: for a way to get detailed intrinsics, for high quality rich text layout to canvas and SVG, and for server-side rich text. We currently use it in CellEngine for our new canvas-based spreadsheet library to layout text in hundreds of thousands of cells, and will be using it soon to render PDFs with thousands of pages in a few seconds.

Show HN: Dropflow, a CSS layout engine for node or
github.com

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#2

Post by big_paps » Thu, Mar 21, 2024, 2:27 PM UTC

Well this looks like something useful. Can't imaging how much work is needed to first understand css and then to build a layout engine around it.

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#3

Post by lovegrenoble » Thu, Mar 21, 2024, 2:31 PM UTC

For anyone struggling with flexbox, you can use this tool to streamline the process of creating

responsive layouts, removing the need to focus on multiple properties: https://flexboxcss.com

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#4

Post by troupo » Thu, Mar 21, 2024, 2:31 PM UTC

big_paps wrote: post #2

Well this looks like something useful. Can't imaging how much work is needed to first understand css and then to build a layout engine around it.

There's also Facebook's Yoga: https://github.com/facebook/yoga

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#5

Post by bobajeff » Thu, Mar 21, 2024, 2:37 PM UTC

This sounds close to what I've been wondering about lately. I was wondering if css and svg could be used as abstraction over graphics and UI libraries. This is my first time hearing of node-canvas looks like it fills the drawing part of the solution. While this may do the layout portion (which is all I need from a UI library).

I wonder how hard it was to implement css. I've heard it can be pretty complex.

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#6

Post by ape4 » Thu, Mar 21, 2024, 2:58 PM UTC

Its too bad browsers don't support this.

    // Do CSS layout in the regular document
    const doc = new CssLayout(document);
    doc.layout(...);

    // Do CSS layout on your own canvas
    const mycanvas = new CssLayout(document.getElementById('mycanvas'));
    mycanvas.layout(...);

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#7

Post by awesomekling » Thu, Mar 21, 2024, 2:59 PM UTC

Super cool! Nice job, chearon :)

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#8

Post by [deleted] » Thu, Mar 21, 2024, 3:00 PM UTC

ape4 wrote: post #6

Its too bad browsers don't support this. // Do CSS layout in the regular document const doc = new CssLayout(document); doc.layout(...); // Do CSS layout on your own canvas const mycanvas = new CssLayout(document.getElementById('mycanvas')); mycanvas.layout(...);

[deleted]

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#9

Post by 1oooqooq » Thu, Mar 21, 2024, 3:09 PM UTC

why not ship a desktop application at this point with support for a special schema?

i can understand the abuse for server side rendering, but at this poit you pretty much have a bad browser engine. running inside a 2d hack in a browser engine. sigh.

Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>

#10

Post by chearon » Thu, Mar 21, 2024, 3:10 PM UTC

bobajeff wrote: post #5

This sounds close to what I've been wondering about lately. I was wondering if css and svg could be used as abstraction over graphics and UI libraries. This is my first time hearing of node-canvas looks like it fills the drawing part of the solution. While this may do the layout portion (which is all I need from a UI library). I wonder how hard it was to implement css. I've heard it can be pretty complex.

> wondering if css and svg could be used as abstraction over graphics and UI libraries

There's another project called Sciter that uses CSS to target native graphics libraries: https://sciter.com

> I wonder how hard it was to implement css. I've heard it can be pretty complex.

It was hard, but the biggest barrier is the obscurity of the knowledge.

Text layout is the hardest, because working with glyphs and iterating them in reverse for RTL is brain-breaking. And line wrapping gets really complicated. It's also the most obscure because nobody has written down everything you need to know in one place. After I finished block layout early on, I had to stop for a couple of years (only working a few hours a week though) and learn all of the ins, outs, dos, and don'ts around shaping and itemizing text. A lot of that I learned by reading Pango's [1] source code, and a lot I pieced together from Google searches.

But other than that, the W3C specifications cover almost everything. The CSS2 standard [2] is one of the most beautiful things I've ever read. It's internally consistent, concise, and obviously the result of years of deliberation, trial and error. (CSS3 is great, but CSS2 is the bedrock for everything).

[1] https://gitlab.gnome.org/GNOME/pango/

[2] https://www.w3.org/TR/CSS22/