[css-overflow-3] Define scrolling terminology #8194 #7303 #7237

Author: fantasai

css-overflow-3/Overview.bs

@@ -131,7 +131,7 @@ Module Interactions</h3>
 -->
 
 <h2 id="overflow-concepts">
-Types of Overflow</h2>
+Overflow Concepts and Terminology</h2>
 
 	CSS uses the term <dfn export>overflow</dfn> to describe
 	the contents of a box
@@ -295,6 +295,12 @@ Scrollable Overflow</h3>
 
 	</ul>
 
+	Additionally, due to Web-compatibility constraints
+	(caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
+	UAs must clip any content in the [=negative scrollable overflow region=]
+	(thereby behaving as if they had no <a>scrollable overflow</a>
+	on the wrong side of the [=scroll origin=]).
+
 	<!--
 	Considerations:
 		* floats
@@ -315,6 +321,76 @@ Scrollable Overflow</h3>
 	in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
 	This means scrollbars can sometimes appear when not actually necessary.
 
+<h3 id="scrolling">
+Scrolling Overflow</h3>
+
+	A box’s [=overflow=] can be visible or clipped.
+	CSS also allows a box to be <dfn export>scroll container</dfn>
+	that allows the user to scroll clipped parts of its <a>scrollable overflow area</a>
+	into view.
+	The visual viewport of a <a>scroll container</a>
+	(through which the <a>scrollable overflow area</a> can be viewed)
+	coincides with its padding box,
+	and is called the <dfn export>scrollport</dfn>.
+	A box’s <dfn export>nearest scrollport</dfn>
+	is the [=scrollport=] of its nearest [=scroll container=] ancestor.
+
+	Scrolling operations can be initiated by the user
+	(for example, by manipulating a scrollbar, swiping a touchscreen, or using keyboard controls)
+	or by script
+	(for example, by the {{scrollIntoView()}} or {{focus()}} APIs).
+	The initial position of the [=scrollable overflow rectangle=] within the [=scrollport=]
+	before any scrolling operations take effect is the <dfn>initial scroll position</dfn>.
+	The [=initial scroll position=]
+	is typically dependent on the [=scroll container=]’s [=writing mode=],
+	and, unless otherwise specified,
+	coincides with its [=scroll origin position=].
+	However, the 'align-content' and 'justify-content' properties [[!CSS-ALIGN-3]]
+	can be used to change the [=initial scroll position=],
+	see [[css-align-3#overflow-scroll-position]].
+
+	A <dfn>scroll position</dfn> is a particular alignment
+	of the [=scrollable overflow rectangle=]
+	within its [=scrollport=].
+	It is associated with a <dfn>scroll offset</dfn>
+	which is its distance from the [=scroll origin=].
+
+	The <dfn>scroll origin</dfn> is the anchor coordinate of the [=scrollable overflow rectangle=],
+	from which the [=scrollable overflow rectangle=] expands.
+	Unless otherwise specified,
+	it is the [=block-start=] [=inline-start=] corner of the [=scrollable overflow rectangle=].
+	(For example, in a [=flex container=] it is the [=main-start=] [=cross-start=] corner.)
+	The area beyond the [=scroll origin=] in either axis
+	is considered the <dfn>negative scrollable overflow region</dfn>:
+	content rendered here is the not accessible to the reader,
+	see [[#scrollable]].
+	A [=scroll container=] is said to be scrolled to its [=scroll origin=]
+	when its [=scroll origin=] coincides with the corresponding corner of its [=scrollport=].
+	This [=scroll position=], the <dfn>scroll origin position</dfn>,
+	usually, but not always,
+	coincides with the [=initial scroll position=].
+
+	<div class="example">
+		For example,
+		the 'align-content' and 'justify-content' properties [[CSS-ALIGN-3]]
+		and [=scroll snapping=] [[CSS-SCROLL-SNAP-1]]
+		can change the [=initial scroll position=]
+		away from the [=scroll origin position=].
+	</div>
+
+	ISSUE: Check whether things like [=baseline alignment=]
+	depend on the [=initial scroll position=] or the [=scroll origin position=].
+
+	ISSUE: This doesn't define a coordinate system for [=scroll offsets=].
+	Whether they increase downward/rightward,
+	block/inline-axis endward,
+	or away from the [=scroll origin=] is not defined.
+	Should each API define its coordinate model?
+
+	The root viewport, which scrolls the page [=canvas=],
+	uses the <a>principal writing mode</a> for determining
+	its [=scroll origin=] and [=initial scroll position=].
+
 <!--
  ███████  ██     ██ ████████ ████████  ████████ ██        ███████  ██      ██
 ██     ██ ██     ██ ██       ██     ██ ██       ██       ██     ██ ██  ██  ██          ██   ██
@@ -326,21 +402,10 @@ Scrollable Overflow</h3>
 -->
 
 <h2 id="overflow-properties">
-Scrolling and Clipping Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties</h2>
+Scrolling and Clipping Overflow</h2>
 
-	These properties specify whether a box’s content
-	(including any <a>ink overflow</a>)
-	is clipped to its padding edge,
-	and if so,
-	whether it is a <dfn export>scroll container</dfn>
-	that allows the user to scroll clipped parts of its <a>scrollable overflow area</a>
-	into view.
-	The visual viewport of the <a>scroll container</a>
-	(through which the <a>scrollable overflow area</a> can be viewed)
-	coincides with its padding box,
-	and is called the <dfn export>scrollport</dfn>.
-	For convenience, a box’s <dfn export>nearest scrollport</dfn>
-	is the [=scrollport=] of its nearest [=scroll container=] ancestor.
+<h3 id="overflow-control">
+Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties</h3>
 
 	<pre class=propdef>
 		Name: overflow-x, overflow-y, overflow-block, overflow-inline
@@ -353,6 +418,10 @@ Scrolling and Clipping Overflow: the 'overflow-x', 'overflow-y', and 'overflow'
 		Animation type: discrete
 	</pre>
 
+	These properties specify whether a box’s [=overflow=] is clipped,
+	and if so,
+	whether it is a [=scroll container=].
+
 	The 'overflow-x' property specifies
 	the handling of <a>overflow</a> in the horizontal axis
 	(i.e., overflow from the left and right sides of the box),
@@ -510,31 +579,6 @@ Overflow in Print and Other Static Media</h3>
 	for example, e-book readers paginate content,
 	but are interactive.
 
-<h3 id="scrolling-direction">
-Scrolling Origin, Direction, and Restriction</h3>
-
-	The <dfn export>initial scroll position</dfn> is
-	the initial position of
-	the box’s <a>scrollable overflow area</a>
-	with respect to its border box,
-	prior to any user or programmatic scrolling that changes it.
-	The <a>initial scroll position</a>
-	is dependent on the box’s <a>writing mode</a>,
-	and is by default the <a>block-start</a>/<a>inline-start</a> edge
-	of the box’s <a>padding edge</a>.
-	However, the 'align-content' and 'justify-content' properties [[!CSS-ALIGN-3]]
-	can be used to change this,
-	see [[css-align-3#overflow-scroll-position]].
-
-	Due to Web-compatibility constraints
-	(caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
-	UAs must clip the <a>scrollable overflow area</a>
-	of <a>scroll containers</a>
-	on the <a>block-start</a> and </a>inline-start</a> sides of the box
-	(thereby behaving as if they had no <a>scrollable overflow</a> on that side).
-
-	The viewport uses the <a>principal writing mode</a> for these calculations.
-
 <h3 id="overflow-clip-margin">
 Expanding Clipping Bounds: the 'overflow-clip-margin' property</h3>