What does HackerNews think of yoga?
Yoga is a cross-platform layout engine which implements Flexbox. Follow https://twitter.com/yogalayout for updates.
[1] https://github.com/tripolskypetr/qml-flexbox/blob/master/obj...
[2] https://github.com/tripolskypetr/qml-flexbox/tree/master/thi...
[3] https://github.com/facebook/yoga
[4] https://github.com/tripolskypetr/qml-flexbox/blob/677a1287df...
P.S. I'll answer your other reply very soon. I'm releasing a new version of my app so it takes its toll on me.
We would like to run the Web Platform Test suite [3] against Taffy, however these are not in a standard format and many of the tests require JavaScript so we are not currently able to do that.
[0]: https://github.com/facebook/yoga
[1]: https://github.com/DioxusLabs/taffy/tree/main/test_fixtures
[2]: https://github.com/DioxusLabs/taffy/tree/main/scripts/gentes...
[3]: https://github.com/web-platform-tests/wpt/tree/master/css/cs...
The Flexbox implementation has been around from a few years, and was inherited from Taffy's abandoned predecessor library Stretch (which was previously featured on HN [0]) which was itself indirectly derived from Yoga [1] the C++ library which powers React Native.
What's new here is the CSS Grid implementation, which I believe is the first CSS Grid implementation available as an easily embeddable library rather than as part of a web browser. Meaning you can now get both 1D and 2D layout from the same library.
The CSS Grid implementation was written by me. So AMA.
[0]: https://news.ycombinator.com/item?id=19780790 [1]: https://github.com/facebook/yoga
...but it's easy enough to find on https://www.jsdelivr.com/package/npm/@vercel/og
It looks to be a tiny bit of glue code (minified but with source maps that I didn't examine), 2 wasm bundles which are probably open source, and an open source font.
Clever but I happen to be looking for documented open source stuff that does this. I guess knowing the names of yoga (which is a library from Facebook I already heard about) and resvg (which I probably already heard about) is a good starting point! https://github.com/facebook/yoga https://github.com/yisibl/resvg-js
Edit: fonts are here https://github.com/yisibl/resvg-js/search?q=font and the yoga part seems to be here https://news.ycombinator.com/item?id=33156130 It's pretty neat but I think most of this can be had without using facebook stuff :) https://time.com/6217730/myanmar-meta-rohingya-facebook/
I was thinking that this was going to be a crazy amount of layout engine work, but now I look a little closer it appears the layout work is farmed out to yoga [0] (not trying to take away anything from the effort here). So this project is almost a wrapper around running yoga as a renderer and using SVG as a form of backend target?
I say "appears" because the yoga landing page doesn't do a great job of explaining what it does.
EDIT Just looking at some of the information about the font side of things and the naming is a little confusing. You set embedFont=false to use text instead of converting the text to paths. embedFont=true sounds a lot like it will embed the _font_ required to render the _text_ - but it kinda does the opposite.
I'd be genuinely interested in hearing about your experiences with other layout and styling languages or tools, and what you like about them. I used to hate on CSS a lot, but eventually changed my view and grew to like it, and I think given its history it's actually quite good. I haven't had much in-depth experience with native alternatives, but when I've tried em out I usually found they each have their own shortcomings. For example, on macOS I'd say Auto Layout is certainly easier when getting started, but as soon as you want to create your own components from scratch it becomes rather challenging.
As for styling a container based on what it contains, if you know of any examples which showcase good execution of this idea I'd also love to check em out. I know of at least two proposals / libraries which are attempts at tackling that problem in CSS; take a look at CSS-Element-Queries [2] and EQCSS [3].
[0] https://gist.github.com/cesarandreu/3e87cb6993bedeb162b56482...
[1] https://github.com/facebook/yoga
The nice thing is, this is how all platform targets work. It's the platform extension's responsibility to map React Native to their platform. In the case of layout mapping, this typically involves mapping to the `Yoga`[1] layout engine on that platform.