[flagged]
Show HN: Dropflow, a CSS layout engine for node or
61–70 of 146 posts
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#62[deleted]
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#63Perhaps 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…
As far as I remember, it's down to security concerns.
You can actually insert your HTML into a SVG foreignObject, and then drawImage() that onto your canvas. But your HTML-in-SVG document will need to load all its own resources, fonts, CSS etc.. which makes this process rather tedious.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#64I have nostalgia for a lot of things in webdev, hacking together floating layouts is not one of them. /s
But congrats on the work! I can definitely see this being useful for text formatting and layouting PDFs. Neat!
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#65[flagged]
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#66Earlier quoted context omitted.
As an aside its amazing how far the web has come, where the best way to make pretty pdf documents is to literally run a web browser on the server. This would have been so unthinkable back in the 90s & 2000s
I'm fairly certain that using a headless browser on the server is mainly about sandboxing all the security concerns that PDFs have, not aesthetics, but yes.
it's actually because layout-via-code for arbitrary documents is a humblingly complex problem, so leveraging existing layout engines is preferred.
This impressive effort looks far better than what I'd achieve, but when this approach has been tried before, it is eventually discovered that few organizations have the resources to maintain a rendering engine long-term.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#67This 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 t…
> It's also the most obscure because nobody has written down everything you need to know in one place
Your work might have been, or maybe still is, the worlds biggest chance for this to change!
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#68Perhaps 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.
Perhaps I worded it wrong: I meant to bring Glide Grid as an example how fast we can render millions of items to canvas.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#69This looks great. I've been using html2canvas but it doesn't support the 'filter' property yet. This will be an awesome alternative.
Re: Show HN: Dropflow, a CSS layout engine for node or <canvas>
#70Well 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
Yoga is great but only really supports flexbox. For most cases that can be enough but inline content (as shown in the Dropflow demo) is difficult with only flexbox layouts available.