Re: [csswg-drafts] [css-transforms][css-logical] Flow-relative Transforms (#1544)

Having similar issues now that I have changed most of my code to `block`/`inline`. I'll share my workaround for horizontal (inline);

```css
:root {
  --transform-inline: translateX(100%);
}
:root[dir=rtl] {
  --transform-inline: translateX(-100%);
}

.element {
  transform: var(--transform-inline);
}
````

I personally like the `transform: transformInline(100%) translateBlock(100%)` format. I'm not sure if we are able to detect vertical (block) writing mode, so I'm not sure how to workaround this without Javascript. If there isn't a way to do this with pure CSS, then I think we should add a new transform rule.

-- 
GitHub Notification of comment by clshortfuse
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1544#issuecomment-1057197560 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 2 March 2022 17:38:02 UTC