Re: [csswg-drafts] [css-pseudo][css-writing-modes] Should we have `:writing-mode()` pseudo selector? (#12939)

> If it refers to the parent then we already have `@container style()`

Yeah, that could be right. However, I think browsers can hardly implement `@container style()` beside custom properties. And perhaps a separate selector is easier to be implemented.

> This would introduce circularities if it refers to the same element

What about this:
```css
:dir(ltr) {
    direction: rtl;
}

:dir(rtl) {
    direction: ltr;
}
```

> Anyways, it seems that what you actually want is #1544

This could be helpful in most cases, but it may not be suitable for logical in certain special cases. For example:

<img width="682" height="314" alt="Image" src="https://github.com/user-attachments/assets/5746405d-3646-43c7-b1cb-418d0b135022" />

Transform the icon according to the text direction:

```css
.icon {
    &:dir(rtl) {
        transform: scaleX(-1); /* Or scale: -1 1; */
    }

    @container style(writing-mode: vertical-rl) {
        transform: rotate(90deg); /* Or rotate: 90deg; */
    }
}
```

---

<img width="906" height="356" alt="Image" src="https://github.com/user-attachments/assets/67f718b3-b353-4490-88d1-f79ff0541c16" />

For vertical form controls, it usually increasing the value from bottom to top, if authors want to create them by themselves, it may require some special processing.

```css
.progress-bar {
    --value: calc((attr(value type(<number>)) - attr(min type(<number>)) / (attr(max type(<number>) - attr(min type(<number>))));
}

.progress-bar-value {
    scale: var(--value);
    transform-origin: if(
        style(writing-mode: vertical-rl): bottom;
        style(direction: rtl): right;
        else: left;
    );
}
```

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


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

Received on Friday, 31 October 2025 21:08:41 UTC