For the last 5 years I've been working on a layout engine that targets CSS2 and some more modern properties.<p>Live demo: <a href="https://chearon.github.io/dropflow/" rel="nofollow">https://chearon.github.io/dropflow/</a><p>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.<p>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.
This is an amazing piece of work. Thanks for making this open-source.<p>The default way of generating beautiful PDFs in the backend these days is, running a headless browser and using browser APIs to turn HTML/CSS into PDFs. And apparently, it's a bit costly running instances of browser in the server and scale it properly for huge workloads.<p>This is literally a game changer. Now it's possible to design PDFs using HTML/css and generate them without the browser overhead!
This sounds great.<p>In a past role, my job was to develop an immersive, online learning platform. We used Oculus Quest 2s to do foreign language training for DoD personnel. WebXR, Three.js, etc, because I had had enough Unity3D for one lifetime and we didn't want to submit to app store reviews. We had a fleet of our own devices, so it was fine.<p>One of the biggest challenges with the project was creating a workflow for didactic content. By myself. I had an employee who I supervised working for me, but most of the work was of such high technical level that it was way over their head and we couldn't afford to hire anyone else. I eventually landed on having our actual language instructors use PowerPoint to create PDFs, use a bespoke editor I created to upload the PDF into a content database and position them in the training environments, and then used PDFJS to render them to canvas elements to then texture on a 3D quad.<p>Something like this would have made it possible for me to avoid having people go out of band into PowerPoint to make those materials. The PowerPoint route did dramatically improve our workflow speed over a previous attempt to get people to author images in Photoshop. But if I could have built the "sign" editor into the app, it would have improved it even more by eliminating the "guess what will look good in the environment, export to PDF, upload to the database (oh, BTW, not a lot of people know how to keep files well organized), then find out how it really looks" cycle.<p>Oh well. We didn't have a business development team or market department that knew anything about selling products instead of services, so I guess the point is moot anyway.
Oh wonderful. Thank you! I was looking for something like this for my project <a href="https://htwins.net/scale2" rel="nofollow">https://htwins.net/scale2</a> and others which use svg or canvas
For anyone struggling with flexbox, you can use this tool to streamline the process of creating<p>responsive layouts, removing the need to focus on multiple properties: <a href="https://flexboxcss.com" rel="nofollow">https://flexboxcss.com</a>
Brilliant! It's super important that stuff like this exists, demystifying the magic boxes of browser rendering engines.<p>It would be great if we could create a full machine readable spec for html and CSS rendering, so that renderers can be generated. Browser quirks could then be extensions to that. Like <a href="https://github.com/tawesoft/html5spec">https://github.com/tawesoft/html5spec</a> but used for real engines.
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).<p>I wonder how hard it was to implement css. I've heard it can be pretty complex.
Truly a service to the world. I think this is a classic example of "somebody ought to do $X" and nobody ever having done it. Thanks.<p>As someone who loves working with CSS for layout, I am mostly relying on Flexbox and Grids these days — it is totally understandable that these are not supported yet — but do you plan to do so at some point? If so, how can others help?
This is incredible --- @chearon thank you for open sourcing this!<p>I think most folks probably don't realize how difficult it is to go from HTML -> PNG programmatically. You get hit with a thousand papercuts related to either Node<>Browser differences or HTML<>Canvas differences.
Great achievement, congratulations!<p>This reminds me of flying saucer, a CSS render written in pure Java. Successfully used it in multiple projects for rendering PDFs in the past. It has some great features to handle paged media. For example, it can repeat table headers on a new page, if there is a page-break within the table.<p>Unfortunately, it seems that it doesn't get much active development anymore.<p><a href="https://github.com/flyingsaucerproject/flyingsaucer">https://github.com/flyingsaucerproject/flyingsaucer</a>
This is a big achievement, congrats! A lot of time must have been put into this I am sure. And you are also making a spreadsheet product AND a PDF (preview?) product? How do you combine it?
There is also HTML/CSS layout engine litehtml (<a href="https://github.com/litehtml/litehtml">https://github.com/litehtml/litehtml</a>) and even a full-blown web engine in JS: WebKit.js (<a href="https://github.com/trevorlinton/webkit.js">https://github.com/trevorlinton/webkit.js</a>)
Thanks for sharing this. I’ll be checking its potential as a base element for something like NativeScript or Node.js.<p>Text is about the most complex UI element that a UI framework offers, and if you’ve got Flow Layout working, that’s very encouraging! Will be interested how far along things like gestures (particularly text highlighting) and IME integration are. In any case, kudos for opensourcing this!
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<p>[0] <a href="https://pagedjs.org/about/" rel="nofollow">https://pagedjs.org/about/</a>
Feels a bit like history repeating (well, rhyming) with the time back when Java was "the language of web applets" and then Sun created the Hotjava browser and confusion reached the point where minds simply blank out. Few technological novelties have been forgotten more decidedly than Hotjava. Despite marking an intersection of two technological fields (browsers and the JVM) that have shown extreme staying power through the last quarter century.<p>But the idea of using html for text styling has stuck, Swing UI do text styling with html (and rudimentary css!) to this day. Html would not be a lingua franca if its use was limited to the equivalent of native speakers (browsers).
How suitable would this be for a text editor of sorts, and what latency would one expect? Using the demo it's difficult to gauge the latency by just eyeballing it.
This looks great. I've been using html2canvas but it doesn't support the 'filter' property yet. This will be an awesome alternative.
Does anyone have a similar solution for drawing graphs / charts in a Node environment without a browser dependency? Last time I explored this I couldn't find any good solutions.
The layout algorithm for CSS 2.1 is not well defined. How did you interpret the algorithm? I may be missing it from a quick glance, but it’s not obvious from your code.
why not ship a desktop application at this point with support for a special schema?<p>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.
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.<p>I was looking at Glide Grid the other day, and it renders so fast, even with 1 million rows; it's somehow responsive. There should be an easier way to render HTML to canvas without resorting to low-level primitives. Why is canvas faster than the "regular" DOM renderer?
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.<p>Satori is meant for rendering Open Graph images (e.g. the little images that come up when you post a link on Twitter/Slack/Facebook), but I found that it works well for rendering arbitrary images. Satori has no native dependencies, so it kinda "just works" on the backend. It supports a subset of modern CSS, including flexbox.<p>My use case is posting match reports for League of Legends into a Discord text channel, e.g. person X just played a match, here are their stats.<p>It's quite nice because there are almost zero server-side native dependencies (the one exception is the library to convert svg -> png requires some native libraries).<p>Here's what a match report looks like: [1]<p>Here's an example of what the JSX looks like: [2]<p>I also built a small project [3] that renders the JSX in a browser to make developing the images just as easy as developing a normal website.<p>If others are interested in this, I would by happy to write a blog post about the process.<p>[0]: <a href="https://github.com/vercel/satori">https://github.com/vercel/satori</a><p>[1]: <a href="https://github.com/shepherdjerred/glitter/blob/main/assets/postmatch.png">https://github.com/shepherdjerred/glitter/blob/main/assets/p...</a><p>[2]: <a href="https://github.com/shepherdjerred/glitter/blob/main/packages/backend/src/league/image/html/report.tsx">https://github.com/shepherdjerred/glitter/blob/main/packages...</a><p>[3]: <a href="https://github.com/shepherdjerred/glitter/tree/main/packages/preview">https://github.com/shepherdjerred/glitter/tree/main/packages...</a>
I worry that this sort of technology is going to lead to webapps that aren't really what we've grown to think of as "the web" but which will instead be closer to a VNC window where you just see pixels and can't interact with anything or see how stuff works in devtools.
Its too bad browsers don't support this.<p><pre><code> // 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(...);</code></pre>
I have nostalgia for a lot of things in webdev, hacking together floating layouts is not one of them. /s<p>But congrats on the work! I can definitely see this being useful for text formatting and layouting PDFs. Neat!