Should `touch-action` support logical directions like `pan-inline` / `pan-block`?
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 11
- Forks
- 4
- PR merge metrics
- No merged PRs in 30d
Description
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-reverseandpan-block-reversefor 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:
- Write separate CSS rules using direction selectors (like
:dir(rtl)). For example:.myList:dir(ltr) { touch-action: pan-right; } .myList:dir(rtl) { touch-action: pan-left; } - Set the
touch-actionproperty using JavaScript after checking the element's direction.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the linked Pointer Events issue at w3c/pointerevents#505 and the discussion in this issue about logical versus physical touch-action directions. The work is complete when the project has a resolved position on whether values such as pan-inline, pan-block, and their reverse forms are needed for RTL and vertical writing modes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- internationalization
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100