- From: Robert Flack via GitHub <sysbot+gh@w3.org>
- Date: Wed, 24 Oct 2018 15:34:06 +0000
- To: public-fxtf-archive@w3.org
> > I wonder if instead of adding logical to each transform function we should add a logical "transform-function" which produces the correct flip for the writing mode.
>
> Just what I was about to suggest. Something like:
>
> ```
> transform: translate(100px, 200px) scale(2.0, 1.0) rotate(25deg) direction();
> ```
> So for eample, for LTR, `direction()` would be equivalent to `scale(1,1)`. And for RTL it would be equivalent to `scale(-1,1)` (a translate() may be needed as well I guess).
>
> ```
> transform: translate(100px, 200px) scale(2.0, 1.0) rotate(25deg) scale(-1,1);
> ```
> For vertical modes, ther would be some rotate() in there.
It's all in my codepen :-):
```css
*[dir=h_lr] {
writing-mode: horizontal-tb;
direction: ltr;
--logical-flip: matrix(1, 0, 0, 1, 0, 0); /* identity */
--inverse-logical-flip: var(--logical-flip);
}
*[dir=h_rl] {
writing-mode: horizontal-tb;
direction: rtl;
--logical-flip: matrix(-1, 0, 0, 1, 0, 0); /* equivalent to scale(-1, 1) */
--inverse-logical-flip: var(--logical-flip);
}
*[dir=v_lr] {
writing-mode: vertical-lr;
direction: ltr;
--logical-flip: matrix(0, 1, 1, 0, 0, 0); /* flips x and y components */
--inverse-logical-flip: var(--logical-flip);
}
*[dir=v_rl] {
writing-mode: vertical-lr;
direction: rtl;
--logical-flip: matrix(0, -1, 1, 0, 0, 0); /* flips components and inverts x component - inverse is not symmetric */
--inverse-logical-flip: matrix(0, 1, -1, 0, 0, 0); /* flips components and inverts y component. */
}
```
I think percentage resolution might also be a special case for vertical writing modes but I haven't tested this.
--
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/311#issuecomment-432708544 using your GitHub account
Received on Wednesday, 24 October 2018 15:34:07 UTC