Live data from Hacker News

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

github.com

51–60 of 146 posts

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

#51
post #47

Perhaps I'm missing something, but why can't we render HTML directly onto the canvas in the browser? The parser is there, the layout engine is already implemented, and the calculation of box layout is already done. It should be doable without going in circles. If only the browser had a flag indicating which "surface" to render on. I was looking at Glide Grid the other day, and it renders so fast, even with 1 million…

Glide grid renders to canvas also.

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

#52
post #47

Perhaps I'm missing something, but why can't we render HTML directly onto the canvas in the browser? The parser is there, the layout engine is already implemented, and the calculation of box layout is already done. It should be doable without going in circles. If only the browser had a flag indicating which "surface" to render on. I was looking at Glide Grid the other day, and it renders so fast, even with 1 million…

But if all you want to do is render HTML then why use ?

I'm only speculating, but it doesn't seem surprising that regular DOM rendering logic - which has to handle approximately a bazillion different rules and special cases - is slower than a custom renderer written for a specific subset of HTML.

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

#53
post #47

Perhaps I'm missing something, but why can't we render HTML directly onto the canvas in the browser? The parser is there, the layout engine is already implemented, and the calculation of box layout is already done. It should be doable without going in circles. If only the browser had a flag indicating which "surface" to render on. I was looking at Glide Grid the other day, and it renders so fast, even with 1 million…

Glide Grid is an amazing achievement I have to say!

You can have a fast DOM without canvas, but it requires creative thinking. DataGridXL also renders millions of cells, but it does not use canvas as its main renderer (https://www.datagridxl.com/demos/one-million-cells).

The way it works: only columns are their own DOM nodes. For browsers it's just too much to ask to re-render let's say (20rows*10cols) 200 DOM nodes while keeping scrolling at 60fps.

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

#55
post #23

Earlier quoted context omitted.

Accessibility features would need to be added to canvases before that reality's possible, so we've got a ways to go yet before we need to worry too much about that.

traditionally, lack of accessibility has unfortunately not held back people's use of tech, see Flash and most SPAs

The people who would do this canvas trickery are the people that would be held back by the lack of accessibility.

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

#56

This looks great. As you mention PDF, do you plan to support the various @page properties that add pagination? For example like pagedjs[0] but native? Major usecases are books and invoices [0] https://pagedjs.org/about/

Yes, this is pretty high up on my list. I've already done a little bit of work on pagination/fragmentation, but it will take me some time.

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

#57
post #47

Perhaps I'm missing something, but why can't we render HTML directly onto the canvas in the browser? The parser is there, the layout engine is already implemented, and the calculation of box layout is already done. It should be doable without going in circles. If only the browser had a flag indicating which "surface" to render on. I was looking at Glide Grid the other day, and it renders so fast, even with 1 million…

[deleted]

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

#58

I've used satori [0] on the backend with TypeScript/Deno to render React JSX + tailwind CSS as an SVG (which is then rendered to a PNG). Of course you could use another flavor of JSX (or even plain HTML) or omit tailwind, but it's really cool that you can use the same stack as a typical frontend and render it as an image. Satori is meant for rendering Open Graph images (e.g. the little images that come up when you po…

[deleted]

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

#60
post #47

Perhaps I'm missing something, but why can't we render HTML directly onto the canvas in the browser? The parser is there, the layout engine is already implemented, and the calculation of box layout is already done. It should be doable without going in circles. If only the browser had a flag indicating which "surface" to render on. I was looking at Glide Grid the other day, and it renders so fast, even with 1 million…

But if all you want to do is render HTML then why use ? I'm only speculating, but it doesn't seem surprising that regular DOM rendering logic - which has to handle approximately a bazillion different rules and special cases - is slower than a custom renderer written for a specific subset of HTML.

If you want to do any kind of text or diegetic UI in webgl, you are begging for DOM rendering to canvas (which is then sent to a texture)
Post reply on HN