[alreq] Should `touch-action` support logical directions like `pan-inline` / `pan-block`? (#289)

xfq has just created a new issue for https://github.com/w3c/alreq:

== Should `touch-action` support logical directions like `pan-inline` / `pan-block`? ==
This question was prompted by the Pointer Event issue at https://github.com/w3c/pointerevents/issues/505

**What is `touch-action`?**

Imagine you have an element on a webpage (like a map or a list) that you can interact with using touch. The `touch-action` CSS property tells the browser how to handle finger swipes on that element:

*   `touch-action: auto;` (the default): The browser tries to figure out if you're scrolling or zooming the page.
*   `touch-action: none;` : The browser *doesn't* handle swipes for scrolling/zooming.

**Directions in `touch-action`**

There are some values like `pan-left`, `pan-right`, `pan-up`, and `pan-down`. These tell the browser: "Only handle swipes for scrolling in *this specific direction*."

Example: imagine a list that's scrolled all the way to the top. The developer might set `touch-action: pan-down;` on it. This means:

*   If the user swipes *down* (to scroll down the list), the browser handles the scrolling.
*   If the user swipes *up* (trying to scroll past the top), the browser *doesn't* scroll.

**The Problem: Physical vs. Logical Directions**

These `pan-left`, `pan-right`, `pan-up`, `pan-down` values are based on the *physical* screen directions.

We are considering adding *logical* values like:

*   `pan-inline`: Allow scrolling only in the direction text flows (e.g., right for LTR horizontal, left for RTL horizontal).
*   `pan-block`: Allow scrolling only in the direction perpendicular to text flow (e.g., down for horizontal text).
*   Maybe also `pan-inline-reverse` and `pan-block-reverse` for when content is scrolled to the *end*.

These logical values would automatically adapt to the element's direction (ltr/rtl) and writing mode (horizontal/vertical).

**My question is: is adding these logical values (`pan-inline`, `pan-block`, etc.) important for authors working with RTL languages?**

-----

Alternatives: authors *could* achieve the same result without these new values. They could:
1.  Write separate CSS rules using direction selectors (like `:dir(rtl)`). For example:
    ```css
    .myList:dir(ltr) { touch-action: pan-right; }
    .myList:dir(rtl) { touch-action: pan-left; }
    ```
2.  Set the `touch-action` property using JavaScript after checking the element's direction.

Please view or discuss this issue at https://github.com/w3c/alreq/issues/289 using your GitHub account


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

Received on Monday, 7 April 2025 05:20:22 UTC