w3c / w3c/afrlreq

Should `touch-action` support logical directions like `pan-inline` / `pan-block`?

Open
#52 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

i:bidi_text i:interaction l:ff l:nqo question s:adlm s:arab s:nkoo
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-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:
    .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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.