W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2021

Re: [csswg-drafts] [css-logical]Flow-relative syntax for transform (#1788)

From: Nicolas Hoffmann via GitHub <sysbot+gh@w3.org>
Date: Wed, 26 May 2021 13:51:15 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-848787375-1622037073-sysbot+gh@w3.org>
Yes, there are some cases where we would really need this, I'm facing one right now for a custom toggle:

LTR:
![image](https://user-images.githubusercontent.com/2578321/119670633-572e5680-be39-11eb-9ffe-340bcb90963e.png)

I'm doing: 
```
transform: translateX(<value>);
```
for active state.

But it will give this in RTL:
![image](https://user-images.githubusercontent.com/2578321/119670725-6a412680-be39-11eb-8fb6-ba0b8fad618f.png)

I have to do:
```
transform: translateX(-<value>);
```
To get the proper display:

![image](https://user-images.githubusercontent.com/2578321/119670509-3c5be200-be39-11eb-89a8-5a4c6d28d05e.png)

Something like: `translate-inline-start` would replace something like: 
```
[dir="rtl] .selector {
transform: translateX(-<value>);
}
```

And same for translateY, we would go for `translate-block-start`. 

For translateZ, I guess i18n does not encounter negative 3D written stuff... so it's okay :D 

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 26 May 2021 13:51:17 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:33 UTC