Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add handwriting keyword to touch-action CSS property #525

Open
wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

Add handwriting keyword to touch-action CSS property #525

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
83e0701
Add handwriting keyword
Oct 25, 2024
9860e27
Remove non-handwriting edits
Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 18 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -548,7 +548,7 @@ <h4><dfn>Attributes and default actions</dfn></h4>
</tbody>
</table>

<p>Viewport manipulations (panning and zooming) — generally, as a result of a <a>direct manipulation</a> interaction — are intentionally NOT a default action of pointer events, meaning that these behaviors (e.g. panning a page as a result of moving a finger on a touchscreen) cannot be suppressed by canceling a pointer event. Authors must instead use <code>touch-action</code> to explicitly <a>declare the direct manipulation behavior</a> for a region of the document. Removing this dependency on the cancelation of events facilitates performance optimizations by the user agent.</p>
<p>Viewport manipulations (panning and zooming) and editable text manipulations (handwriting) — generally, as a result of a <a>direct manipulation</a> interaction — are intentionally NOT a default action of pointer events, meaning that these behaviors (e.g. panning a page as a result of moving a finger on a touchscreen) cannot be suppressed by canceling a pointer event. Authors must instead use <code>touch-action</code> to explicitly <a>declare the direct manipulation behavior</a> for a region of the document. Removing this dependency on the cancelation of events facilitates performance optimizations by the user agent.</p>

<p>For {{GlobalEventHandlers/pointerenter}} and {{GlobalEventHandlers/pointerleave}} events, the {{EventInit/composed}} [[DOM]] attribute SHOULD be <code>false</code>; for all other pointer events in the table above, the attribute SHOULD be <code>true</code>.</p>

Expand Down Expand Up @@ -580,8 +580,8 @@ <h4>Suppressing a pointer event stream</h4>
<ul>
<li>The user agent has opened a modal dialog or menu.</li>
<li>A pointer input device is physically disconnected, or a hoverable pointer input device (e.g. a hoverable pen/stylus) has left the hover range detectable by the digitizer.</li>
<li>The pointer is subsequently used by the user agent to manipulate the page viewport (e.g. panning or zooming). See the section on <a>touch-action</a> CSS property for details.
<div class="note">User agents can trigger panning or zooming through multiple pointer types (such as touch and pen), and therefore the start of a pan or zoom action may result in the suppression of various pointers, including pointers with different pointer types.</div>
<li>The pointer is subsequently used by the user agent to manipulate the page viewport (e.g. panning or zooming) or manipulate editable text (e.g., handwriting). See the section on <a>touch-action</a> CSS property for details.
<div class="note">User agents can trigger panning, zooming, or handwriting through multiple pointer types (such as touch and pen), and therefore the start of such actions may result in the suppression of various pointers, including pointers with different pointer types.</div>
</li>
<li>As part of the drag operation initiation algorithm as defined in the <a data-cite="html/#drag-and-drop-processing-model">drag and drop processing model</a> [[HTML]],
for the pointer that caused the drag operation.</li>
Expand Down Expand Up @@ -990,13 +990,13 @@ <h1>Extensions to the `Navigator` interface</h1>
</section>
<section>
<h1><dfn data-lt="direct manipulation behavior|declare the direct manipulation behavior">Declaring direct manipulation behavior</dfn></h1>
<p>As noted in <a>Attributes and Default Actions</a>, viewport manipulations (panning and zooming) cannot be suppressed by canceling a pointer event. Instead, authors must declaratively define which of these behaviors they want to allow, and which they want to suppress, using the <code>touch-action</code> CSS property.</p>
<div class="note">While the issue of pointers used to manipulate the viewport is generally limited to touch input (where a user's finger can both interact with content and pan/zoom the page), certain user agents may also allow the same types of (direct or indirect) manipulation for other pointer types. For instance, on mobile/tablet devices, users may also be able to scroll using a stylus. While, for historical reasons, the <code>touch-action</code> CSS property defined in this specification appears to refer only to touch inputs, it does in fact apply to all forms of pointer inputs that allow <a>direct manipulation</a> for panning and zooming.</div>
<p>As noted in <a>Attributes and Default Actions</a>, viewport manipulations (panning and zooming) and editable text manipulations (handwriting) cannot be suppressed by canceling a pointer event. Instead, authors must declaratively define which of these behaviors they want to allow, and which they want to suppress, using the <code>touch-action</code> CSS property.</p>
<div class="note">While the issue of pointers used to manipulate the viewport is generally limited to touch input (where a user's finger can both interact with content and pan/zoom the page), certain user agents may also allow the same types of (direct or indirect) manipulation for other pointer types. For instance, on mobile/tablet devices, users may also be able to scroll using a stylus. This also include pointers used to manipulate editable text with handwriting, through either touch (finger) or stylus digitizers that are direct (integrated into a display) or indirect (not integrated into a display). While, for historical reasons, the <code>touch-action</code> CSS property defined in this specification appears to refer only to touch inputs, it does in fact apply to all forms of pointer inputs that allow <a>direct manipulation</a> for panning, zooming, and handwriting.</div>
<section>
<h2>The <dfn><code>touch-action</code></dfn> CSS property</h2>
<table class="simple">
<tr><th>Name:</th><td><code>touch-action</code></td></tr>
<tr><th>Value:</th><td><code>auto</code> | <code>none</code> | [ [ <code>pan-x</code> | <code>pan-left</code> | <code>pan-right</code> ] || [ <code>pan-y</code> | <code>pan-up</code> | <code>pan-down</code> ] ] | <code>manipulation</code></td></tr>
<tr><th>Value:</th><td><code>auto</code> | <code>none</code> | [ [ <code>pan-x</code> | <code>pan-left</code> | <code>pan-right</code> ] || [ <code>pan-y</code> | <code>pan-up</code> | <code>pan-down</code> ] ] | <code>handwriting</code> | <code>manipulation</code></td></tr>
<tr><th>Initial:</th><td><code>auto</code></td></tr>
<tr><th>Applies to:</th><td>all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.</td></tr>
<tr><th>Inherited:</th><td>no</td></tr>
Expand All @@ -1005,11 +1005,11 @@ <h2>The <dfn><code>touch-action</code></dfn> CSS property</h2>
<tr><th>Computed value:</th><td>Same as specified value.</td></tr>
</table>

<p>The <code>touch-action</code> CSS property determines whether <a>direct manipulation</a> interactions (which are not limited to touch, despite the property's name) MAY trigger the user agent's panning and zooming behavior. See the section on <a><code>touch-action</code> values</a>.</p>
<p>The <code>touch-action</code> CSS property determines whether <a>direct manipulation</a> interactions (which are not limited to touch, despite the property's name) MAY trigger the user agent's panning, zooming and handwriting behavior. See the section on <a><code>touch-action</code> values</a>.</p>

<p>Right before starting to pan or zoom, the user agent MUST <a>suppress a pointer event stream</a> if all of the following conditions are true:</p>
<p>Right before starting to pan, zoom, or handwrite the user agent MUST <a>suppress a pointer event stream</a> if all of the following conditions are true:</p>
<ul>
<li>The user agent has determined (via methods out of scope for this specification) that a direct manipulation interaction is to be consumed for panning or zooming,</li>
<li>The user agent has determined (via methods out of scope for this specification) that a direct manipulation interaction is to be consumed for panning, zooming, or handwriting,</li>
<li>a {{GlobalEventHandlers/pointerdown}} event has been sent for the pointer, and</li>
<li>a {{GlobalEventHandlers/pointerup}} or {{GlobalEventHandlers/pointercancel}} event (following the above mentioned {{GlobalEventHandlers/pointerdown}}) has not yet been sent for the pointer.</li>
</ul>
Expand All @@ -1026,24 +1026,27 @@ <h2>Determining supported direct manipulation behavior</h2>
<li>A direct manipulation interaction for panning and zooming <dfn data-lt="conforming-touch-behavior">conforms to an element's <code>touch-action</code></dfn> if the behavior is allowed in the coordinate space of the element. Note that if CSS transforms have been applied, the element's coordinate space may differ from the screen coordinate in a way that affects the conformity here; for example, the X axis of an element rotated by 90 degrees with respect to the screen will be parallel to the Y-axis of the screen coordinate.</li>
<li>A direct manipulation interaction for panning is supported if it <a data-lt="conforming-touch-behavior">conforms</a> to the <code>touch-action</code> property of each element between the hit tested element and its nearest inclusive ancestor that is a [=scroll container=] (as defined in [[CSS-OVERFLOW-3]]).</li>
<li>A direct manipulation interaction for zooming is supported if it <a data-lt="conforming-touch-behavior">conforms</a> to the <code>touch-action</code> property of each element between the hit tested element and the <code>document</code> element of the [=top-level browsing context=] (as defined in [[HTML]]).</li>
<li>Once panning or zooming has been started, and the user agent has already determined whether or not the gesture should be handled as a user agent direct manipulation behavior, any changes to the relevant <code>touch-action</code> value will be ignored for the duration of the action. For instance, programmatically changing the <code>touch-action</code> value for an element from <code>auto</code> to <code>none</code> as part of a {{GlobalEventHandlers/pointerdown}} handler script will not result in the user agent aborting or suppressing any of the pan or zoom behavior for that input for as long as that pointer is active.</li>
<li>A direct manipulation interaction for handwriting is supported if it <a data-lt="conforming-touch-behavior">conforms</a> to the <code>touch-action</code> property of each element between and including the text editable hit tested element and all ancestors up to but excluding the nearest ancestor that is not text editable.</li>
<li>Once panning, zooming, or handwriting has been started, and the user agent has already determined whether or not the gesture should be handled as a user agent direct manipulation behavior, any changes to the relevant <code>touch-action</code> value will be ignored for the duration of the action. For instance, programmatically changing the <code>touch-action</code> value for an element from <code>auto</code> to <code>none</code> as part of a {{GlobalEventHandlers/pointerdown}} handler script will not result in the user agent aborting or suppressing any of the pan or zoom behavior for that input for as long as that pointer is active.</li>
<li>Similarly, in the case of the various <code>touch-action</code> values of <code>pan-*</code>, once the user agent has determined whether to handle a gesture directly or not at the start of the gesture, a subsequent change in the direction of the same gesture SHOULD be ignored by the user agent for as long as that pointer is active. For instance, if an element has been set to <code>touch-action: pan-y</code> (meaning that only vertical panning is handled by the user agent), and a touch gesture starts off horizontally, no vertical panning should occur if the user changes the direction of their gesture to be vertical while their finger is still touching the screen.</li>
</ul>

<div class="note">Some user agents support panning and zooming interactions involving multiple concurrent pointers (e.g. multi-touch). Methods for processing or associating the <code>touch-action</code> values of multiple concurrent pointers is out of scope for this specification.</div>
<div class="note">Some user agents support panning, zooming, and handwriting interactions involving multiple concurrent pointers (e.g. multi-touch). Methods for processing or associating the <code>touch-action</code> values of multiple concurrent pointers is out of scope for this specification.</div>
</section>

<section>
<h2><dfn data-lt="touch-action values">Details of <code>touch-action</code> values</dfn></h2>
<p>The <code>touch-action</code> property covers direct manipulation behaviors related to viewport panning and zooming. Any additional user agent behaviors, such as text selection/highlighting, or activating links and form controls, MUST NOT be affected by this CSS property.</p>
<p>The <code>touch-action</code> property covers direct manipulation behaviors related to viewport (panning and zooming) and editable text manipulations (handwriting). Any additional user agent behaviors, such as text selection/highlighting, or activating links and form controls, MUST NOT be affected by this CSS property.</p>
<div class="note">The terms "panning" and "scrolling" are considered synonymous (or, more aptly, "panning" is "scrolling" using a direct manipulation input). Defining an interaction or gesture for triggering panning/scrolling, or for triggering behavior for the <code>auto</code> or <code>none</code> values, are out of scope for this specification.</div>
<dl>
<dt>auto</dt>
<dd>The user agent MAY consider any permitted direct manipulation behaviors related to panning and zooming of the viewport that begin on the element.</dd>
<dd>The user agent MAY consider any permitted direct manipulation behaviors related to panning and zooming of the viewport or manipulating editable text with handwriting that begin on the element.</dd>
<dt>none</dt>
<dd>Direct manipulation interactions that begin on the element MUST NOT trigger behaviors related to viewport panning and zooming.</dd>
<dd>Direct manipulation interactions that begin on the element MUST NOT trigger behaviors related to viewport panning and zooming or manipulating editable text with handwriting.</dd>
<dt>pan-x<br>pan-left<br>pan-right<br>pan-y<br>pan-up<br>pan-down</dt>
<dd>The user agent MAY consider direct manipulation interactions that begin on the element only for the purposes of panning that starts in any of the directions specified by all of the listed values. Once panning has started, the direction may be reversed by the user even if panning that starts in the reversed direction is disallowed. In contrast, when panning is restricted to a single axis (eg. <code>pan-y</code>), the axis cannot be changed during panning.</dd>
<dt>handwriting</dt>
<dd>The user agent MAY consider direct manipulation interactions, for both touch (finger) and pen digitizer input devices whether direct (integrated into a display) or indirect (not integrated into a display), that begin on the element only for the purposes of handwriting.</dd>
<dt>manipulation</dt>
<dd>The user agent MAY consider direct manipulation interactions that begin on the element only for the purposes of panning and <strong>continuous</strong> zooming (such as pinch-zoom), but MUST NOT trigger other related behaviors that rely on multiple activations that must happen within a set period of time (such as double-tap to zoom, or double-tap and hold for single-finger zoom).</dd>
</dl>
Expand Down Expand Up @@ -1570,7 +1573,7 @@ <h1>Glossary</h1>
<dd>A type of input sensing device in which a surface can detect input which is in contact and/or in close proximity. Most commonly, this is the surface that senses input from the touch contact or a pen/stylus.</dd>
<dt><dfn>direct manipulation</dfn></dt>
<dd>Certain user agents (such as browsers on a touchscreen device) implement a "direct manipulation" metaphor where a pointer not only interacts with controls, but
is also used to directly pan or zoom the current page, providing the illusion of direct physical contact. As an example, users on a touchscreen device are generally
is also used to directly pan or zoom the current page, or manipulate editable text controls with handwriting, providing the illusion of direct physical contact. As an example, users on a touchscreen device are generally
able to use a finger or a stylus to "grab" a page and pan it by moving the pointer, directly manipulating the page. Contrast this with a mouse pointer on a regular
desktop/laptop, where panning is done by using a scrollbar, rather than by "dragging" the page.
<div class="note">In some cases, touchpads (like those found on a laptop) will allow the user to scroll by "dragging" on the touchpad. However, this is generally achieved
Expand Down