Hacker News Reader

Comment by nicoburns | Hacker News Reader

I maintain Taffy: AMA.

I am currently in the process of building a wider browser engine / GUI toolkit on top of it (https://github.com/dioxuslabs/blitz). As part of that I am implementing a lot of the messier parts of CSS layout (floats, etc), and also grinding on fixing all the WPT tests which we track here: https://blitz.is/status/wpt/css/css-flexbox.

The vision is a complete standalone implementation of the web layout algorithms that can be easily embedded (with individual algorithms enabled/disabled on a pay what you use basis), and which can also be part of a modular ecosystem of browser engine components that make it easier for people to create new browser engines.

Beyond Blitz, some notable users are:

- Servo which uses it only for CSS Grid

- Zed which uses it via it's GPUI toolkit.

View on HN

I used this for an internal project I can’t talk about, but it was a lifesaver. It allowed me to drop a really powerful layout system into a project that wasn’t doing traditional UI at all.

The results have been fantastic. Thank you for this awesome library. I love it.

Thanks for all this! I used Blitz a while ago for a product research spike around composing HTML to be rendered directly in a terminal with kitty or iterm's image protocol:

https://www.npmjs.com/package/kittyhtml

https://github.com/kkukshtel/kittyhtml

I guess you've reviewed a few layout systems, do you have a strong view re. which one is the platonic best, i.e. we can ignore the practical considerations of matching CSS just because it's very popular

The one from PanGUI (https://pangui.io/blog/05-layout-rework-and-benchmarks/) looks impressive. It seems to combine a lot of the power/flexibility from CSS with the performance of simpler systems. It's not open source though, so it's hard to evaluate properly.

One thing I would love to see is CSS gain new unit which represents "a proportion of free space" (after fixed-size things have been sized) similar to fr units from CSS Grid but usable for properties like width/height and that would disable the "automatic minimum/content based size" that causes so many of the performance pitfalls with CSS layout.

I think this could make CSS layout both faster and more intuitive for 90% of layouts. And you could retain the existing properties for advanced layouts and backwards compatibility.

Flutter's blog post "constraints go down, sizes go up" [0] is the classic that I would recommend to anyone trying to understand UI layout. It doesn't cover every possible approach, but it applies to most of them including CSS. If you combine with a rule of thumb for keeping layout fast: "content-based sizing XOR flexible sizing" then you're well on your way to making a good layout system.

[0]: https://medium.com/flutter-community/flutter-the-advanced-la...

I think Bevy uses it too, right?

Correct. Takumi (https://github.com/kane50613/takumi) which a JSX -> image generator might also be worth highlighting.

Floats? A fan of pain, are we?

Unfortunately 73% of websites use floats, so if you want to render the web then you have to support them!

Seriously? Wow.

I used it in https://fschutt.github.io/printpdf for the HTML-to-PDF layout, just as a note. It is very useful, thanks for your work. Good luck on Blitz.

Reply on news.ycombinator.com