Utilities with Logical Properties

[Ayman97]

Hey
It would be so useful if you add the support of logical properties like (inline-start, inline-end, block-start, block-end) in addition to: top, left, right, bottom.

It would be useful in multilanguage websites to make consistent animations without making some weird hacks.

[milesingrams]

Unfortunately I don't believe that would be possible given that our translations are using the css "translate" function which doesn't change based on language like the logical properties do. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate()

CSS may implement this in the future but until then we will likely stick with screen directions (up down left right).

In the mean time you can use the --xyz-translate-x and --xyz-translate-y for full control over translations allowing you to customize as needed.

Thanks for the feedback!

[mattaningram]

This is an interesting ask. I can definitely see that you would want animations to switch direction for an RTL language site compared to an LTR site.

Perhaps you can set up a dynamic xyz attribute (v-xyz in our Vue docs) to switch left to right etc if it detects a different language mode?