Support `direction` property (right-to-left layout)

[TimJentzsch]

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

The CSS layout specifications allow for reversed layout dependent on the direction property. This allows UI layouts to reflect the layout conventions of users of RTL languages (which conventionally start from the right) in addition to users of LTR langauges that usually expect layouts which start from the left.

What solution would you like?

Note: A PR for this has been started: https://github.com/DioxusLabs/taffy/pull/736

• [ ] Add a direction style with Ltr and Rtl variants
• [ ] Add support for generating this style in the test generator
• [ ] Update Flexbox algorithm to use this style
• [ ] Update CSS Grid algorithm to use this style
• [ ] Update Block algorithm to use this style

Additional context

More context on MDN

[TimJentzsch]

Here's more information about writing modes: https://drafts.csswg.org/css-writing-modes/#text-flow

Right-to-left will probably not be enough. We also have to consider vertical layouts.

[nicoburns]

There are really two CSS properties of concern here:

• direction which switches between left-to-right and right-to-left
• writing-mode which allows use to switch to vertical text

We probably eventually want to implement both, but we should probably start with direction which is the simpler of the two.

For direction, we will want something like the is_reverse boolean that we currently use for flex-direction, but it would (depending on the value set) be flipped an additional time by direction.

For writing-mode, I think we should change our axis handling. Rather than having a variable called dir (direction) that takes a FlexDirection, I think we should have a variable called main_axis that takes an AbsoluteAxis (Horizontal or Vertical. We can then also store a variable cross_axis, or we can access the cross axis by using main_axis.other() where the other method returns the opposite axis to the one stored. For CSS Grid it will be similar except that we will store an inline_axis rather than a main_axis.

By doing things this way I think we can keep the writing-mode/direction dependent code in one place (there will no doubt be some exceptions).

[nicoburns]

Supporting this will likely require the addition of "flow-relative" equivalents of the following style properties:

• size/min-size/max-size:
  • inline-size instead of width
  • block-size instead of height
• inset/border/padding/margin:
  • inset-inline-start instead of left
  • inset-inline-end instead of right
  • inset-block-start instead of top
  • inset-block-end instead of bottom

It will also require all of the above styles (both the new and the old ones) to have an "unset" state (e.g. be wrapped in Option) so that the default style of the one set of styles doesn't overwrite a set value in the other set. CSS defines precedence based on which style was declared first. But I think we could probably take a shortcut here and define a simpler precedence like "physical styles override flow-relative styles" or vice versa.