DioxusLabs
Document that Taffy uses `box-sizing: border-box`
What problem does this solve or what need does it fill?
There are two box-sizing modes in CSS: content-box (the default) and border-box.
They determine how the sizes of the content box and the size of the element box are calculated. The content box is the area where the child elements can be placed, while the element box is the size of the whole element.
It is element size = content size + padding + border.
The margin is not included in either size.
Summarized:
content-box:- content width =
width - element width =
width+padding+border
- content width =
border-box:- content width =
width-padding-border - element width =
width
- content width =
So for content-box, the width and height attributes refer to the size of the content box, while for border-box the width and height refer to the whole element, including padding and border sizes.
In some cases, the border-box sizing can be more intuitive and useful.
For example, if you have 4 elements with width: 25%, they will not fit in their container if they have a border and/or padding specified and use content-box sizing.
What solution would you like?
Add a box_sizing attribute with BoxSizing::ContentBox (default) and BoxSizing::BorderBox as possible values, which change the sizing behavior of the node.
Additionally, Node should expose content_size and element_size functions to easily access the two different sizes.
What alternative(s) have you considered?
In theory, the new box sizing mode does not add any additional functionality. All layouts using border box sizing can also be implemented with content box sizing. However, it can often be more intuitive and easier to use the border box sizing mode.
Additional context
Additionally, Node should expose content_size and element_size functions to easily access the two different sizes.
This would be in order to read the values of these after all layouting has been performed?
Additionally, Node should expose content_size and element_size functions to easily access the two different sizes.
This would be in order to read the values of these after all layouting has been performed?
Yes, this is what I had in mind. AFAIK we already expose one of these sizes, so it makes sense to expose the other one as well.
Related #289
Based on the issue description it appears like taffy is already using the border-box sizing, which I did not expect.
So we might be able to close this issue entirely.
As noted above, Taffy already uses box-sizing: border-box. It's possible that we're not entirely compliant with that model, but any discrepancies should be treated as bugs: the feature is already supported. I'm changing this issue into a documentation issue: we ought to document this.
I would like us to create a comprehensive CSS property support matrix at some point, but I think that just adding a note about this to the README or similar would have value on it's own.
