taffy

Taffy is related to Servo too, though apparently not officially part of the Servo project - but Servo does use it. https://github.com/DioxusLabs/taffy Used here (I think): https://github.com/servo/servo/tree/c639bb1a7b3aa0fd5e02b40d...

I see you're using html5ever for HTML parsing, and like it's trait/callback based API (me too). It looks like style/layout is not in scope at the moment, but if you're ever looking at adding style/layout capabilities to lightpanda, then you may find it useful to know that Stylo [0] (CSS / style system) and Taffy [1] (box-level layout) are both avaiable with a similar style of API (also Parley [2] which has a slightly different API style but can be combined with Taffy to implement inline/text layout). [0]: https://github.com/servo/stylo [1]: https://github.com/DioxusLabs/taffy [2]: https://github.com/linebender/parley --- Also, if you're interested in contributing C bindings for html5ever upstream then let me know / maybe open a github issue.

If you don't need JavaScript, then you might be interested in https://github.com/DioxusLabs/blitz. It pulls in Servo/Firefox's CSS engine Stylo (and Servo's HTML parser html5ever) and pairs it with our own layout engine (which we are implementing mostly as libraries: Taffy [0] for box-level layout and Parley [1] for text/inline layout) and DOM implementation. Rendering and networking are abstracted behind traits (with default implementations available) and you can drive it using your own event loop. Minimal binary sizes are around 5mb (although more typical build would be more like 10-15mb). [0]: https://github.com/DioxusLabs/taffy [1]: https://github.com/linebender/parley

> The current roadmap lists Shadow DOM and CSS Grid as priorities I've been working on the CSS Grid support. About to land "named grid lines and areas" support which should make a bunch more websites layout correctly. I'm biased because it's my project, but IMO the approach Servo is using for CSS Grid is pretty cool in that the actual implementation is in an external library (Taffy [0]) that can be used standalone and is widely used accross the Rust UI ecosystem, including in the Blitz [1] web engine (which also uses Taffy for Flexbox and Block layout), the Zed [2] text editor, and the Bevy [3] game engine. I'm hopeful that this approach of breaking down a web engine into independently usable modules with public APIs (which builds upon Servo's earlier work on modular libraries such as Stylo and html5ever) will make it easier for people to

Cool! I also have a standalone implementation of CSS Grid [1]. Implemented in Rust in my case (and we also support Flexbox and Block layout). Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. We aim to be fully web compatible, although we're not quite there yet. One thing we have that you may be particularly interested is a reasonably substantial test suite. The tests are defined as HTML snippets that we run through Chrome using webdriver in order the scrape (hopefully) correct assertions, and then format into pure-code unit tests. If you wanted to you could write your own test generator and reuse our snippets. (this test infrastructure is also partially shared with Yoga [2], the C++ Flexbox implementation that powers React Native) 1: http

> Create native applications that use the widely popular HTML/CSS paradigm for layout, but leave out much of the heavyweight stuff that a full JS/DOM/browser API implies. This looks like it can enable very large improvements over packaging browser engines like electron etc That's pretty much the pitch! > Some of the stories they told, like having to prerender and dynamically measure web pages in order to achieve some very simple layout relationships hit right at home. > Writing CSS feels, as Muratori said, more like presenting a case in the court of law, instead of building upon simple primitives > Perhaps the authors can find inspiration by looking at CSS houdini, which tries to make CSS extensible Pluggable layout algorithms are definitely something I'd like to enable in Blitz. I suspect JS for layout will be too slow in most cases. Bu

The one thing I'd really like for web layout is a "stretch unit" that works similarly to CSS Grid's fr units in that it would be defined as "taking up a proportion of available space after other siblings have been sized" except: - It would have no automatic minimum, so it would actually be equivalent to minmax(0, 1fr) (this would make it much more performant, avoiding the exponential time complexity of many existing CSS layout modes. - It could be used for the width/height properties (and potentially other places such as margin/padding/inset) If you had that along with a simplified 1-dimensional display mode (i.e. like flexbox except with the flexing disabled) then I think most people probably wouldn't want much more in most circumstances. Houdini is interesting, but as someone who has spent a lot of the last year implementing a web layou

I maintain a standalone web layout engine[0] (currently implementing Flexbox and CSS Grid) which has no scripting support. WPT layout tests using <script> is a major blocker to us running WPT tests against our library. Yoga (used by React Native) is in a similar position. Do you think the WPT would accept pull requests replacing such tests with equivalent tests that don't use <script> (perhaps using a build script to generate multiple tests instead - or simply writing out the tests longhand)? I could run against only the ref-tests, but if I can't get full coverage then the WPT seems to provide little value over our own test suite. [0]: https://github.com/DioxusLabs/taffy

I agree, I think there has to be something compilable to WebAssembly. A web search shows something that's written in Rust: https://github.com/DioxusLabs/taffy?tab=readme-ov-file#taffy

> Is there any easy to use/hack HTML layouting engine where I could experiment with custom CSS attributes and bridge that gap? Would anything from Servo be suitable? Servo could be used for this. You'd want to add support for parsing the CSS properties themselves to the style crate in https://github.com/servo/stylo and then the layout implementation to the layout2020 crate in https://github.com/servo/servo. You do effectively get a whole browser though. I'm currently working on building a lighter weight / hackable layout engine based on a combination of https://github.com/servo/stylo (for css parsing and selector resolution), https://github.com/DioxusLabs/taffy (for box-level layout) and https://github.com/pop-os/cosmic-text (for flow/inline layout). I expect to have something decent in around 6 months Neither of these setups currently ha

I maintain a web layout library that is designed to be integrated into other software: https://github.com/DioxusLabs/taffy It needs to be combined with a text layout engine (such as https://github.com/pop-os/cosmic-text), and it doesn't support everything yet (notable features that are currently missing: "float", "display: inline-block", "box-sizing: content-box", "position: static"). But we have Block, Flexbox and CSS Grid support with more on the way.

While there are a lot of Rust UI frameworks, none of them are really recommended for production use yet. I suspect a few of the will die off and work will coalesce a few once things mature a bit. Another nice feature of the Rust UI ecosystem is that lots of it is being built in a modular way. For example I maintain a layout engine [0] library which just does layout and can be easily integrated by anybody creating a UI library. And there a bunch of similar composable libraries covering rendering, text layout, accessibility, window creation, clipboard access, etc. [0]: https://github.com/DioxusLabs/taffy

You might be interested in the combination of Taffy [0] which handles box-level browser layout (block, flexbox, grid, etc) and Cosmic Text [1] which handles text-level layout and basic text editing functionality. Integrating them into browsers while retaining accessibility could be tricky. But in they're general they're relatively small standalone libraries implementing most of the layout algorithms that browsers implement (although there are currently a few key missing features like laying out "inline-block" items in line with text). [0]: https://github.com/DioxusLabs/taffy [1]: https://github.com/pop-os/cosmic-text

I maintain a library (https://github.com/DioxusLabs/taffy) that implements both Flexbox and CSS Grid and is designed to be easily embedded (similar to Yoga, which Ink is using), if anyone wants add CSS Grid support to their app/framework.