[css-pseudo][css-writing-modes] Should we have `:writing-mode()` pseudo selector?

[otomad]

It is useful to have a :writing-mode() selector to style vertical controls, just like :dir() pseudo selector.

Example:

div {
    translate: 20px;

    &:dir(rtl) {
        translate: -20px;
    }

    &:writing-mode(vertical-rl),
    &:writing-mode(vertical-lr) {
        translate: 0 20px;
    }
}

[Loirooriol]

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

:writing-mode(horizontal-tb) {
  writing-mode: vertical-rl;
}
:not(:writing-mode(horizontal-tb)) {
  writing-mode: horizontal-tb;
}

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

[Loirooriol]

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

[otomad]

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:

: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:

Transform the icon according to the text direction:

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

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

---

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.

.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;
    );
}