compute config for mimicking (implementing) constraints layout / auto layout / css anchor

[softmarshmallow]

What problem does this solve or what need does it fill?

This is related to plain old "centering a div" prblem in box model.

Say, for android constraint layout, you effectively set both left + width + right to fix thing in center (ish), but in css, this would make either left or right to win based on writing direction.

What solution would you like?

While this is non-css standards, I think this behaviour could be achieved quite easly. We could consider introducing new style struct or new field, but instead, just perhpas introducing new 3rd parameter for controlling this behaviour?

What alternative(s) have you considered?

We usually would use flexbox for this situation, but that would require tidious tree re-construction just for that.

This is not a full proposal for supporting constraint / auto layout, but rather consider exposing the control of the behaviour how inset resolving works within the current implementation.

Additional context

https://github.com/user-attachments/assets/8a48e745-5553-49b2-b722-be53d19f3f16

https://github.com/user-attachments/assets/d2d6a5e2-64d9-425d-920b-790cd97a9d0e

References

• constraint center to css
• css anchor

[nicoburns]

Is it specifically the uneven left and right spacing that you want? Because completely centered is very easy to achieve in modern CSS using either:

• CSS Grid with align-items and justify-items both set to center
• Flexbox or CSS Grid with position:absolute and margin: auto

[softmarshmallow]

In short, yes the uneven "centering"

It's more of "can we configure the behaviour" then "can it be done in css" => Yes, it can be done with css.

As the math will be 95% identical (I presume) what I want to achieve is to implement (use) the 'constraint layout', as in android or 'auto layout' as in ios world.

While the current inset model (and its behaviour) is definately a predictable, and de-facto-standard way of building relatively positioned layout, some tools (Unity, Figma and legacy DnD android / ios) made choice to use "constraint" as user-first, designer-first model. - Which I recently made a similar choice.

Constraint vs Inset

• inset = left / top / right / bottom / width / height / min-max-width / min-max-height
• constraint = anchor-x / anchor-y / xy-anchor-mode / width / height / min-max-width / min-max-height
• constraint center to css
• css anchor
• canvas api ctx.textAlign = 'center';
• SVG text-anchor

I could organize the math more specifically based on organizing some fragmented standards if this is a 'maybe'