[css-scroll-snap] Rearrange prose to be clearer about value mapping to longhands, link to css-logical. Fixes #1050.

Author: fantasai

css-scroll-snap/Overview.bs

@@ -404,21 +404,29 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
     Animatable: as length, percentage, or calc
     </pre>
 
-    The 'scroll-padding' property defines the
-    <dfn>optimal viewing region</dfn> of the scrollport,
+    This property is a <a>shorthand property</a> that sets
+    all of the <a href="#longhands"><css>scroll-padding-*</css> longhands</a>
+    in one declaration,
+    assigning values to the longhands representing each side
+    exactly as the 'padding' property does for its longhands.
+
+    Values must be non-negative
+    and represent inward offsets from the corresponding edge of the scrollport.
+    These offsets define the
+    <dfn>optimal viewing region</dfn> of the scrollport:
     the region used as the target region for placing things in view of the user.
-    It allows the author to exclude regions of the scrollport
+    This allows the author to exclude regions of the scrollport
     that are obscured by other content
     (such as fixed-positioned toolbars or sidebars)
     or simply to put more breathing room
     between a targetted element and the edges of the scrollport.
 
-    The 'scroll-padding' effectively reduces the region of the viewport
+    The 'scroll-padding' offsets effectively reduce the region of the viewport
     that is considered “viewable” <em>for scrolling operations</em>:
-    it has no effect on layout,
+    they have no effect on layout,
     on the scroll origin or initial position,
     or on whether or not an element is considered actually <em>visible</em>,
-    but it should
+    but should
     affect whether an element or the caret is considered scrolled into view,
     and reduce the amount of scrolling for paging operations
     (such as using the <kbd>PgUp</kbd> and <kbd>PgDn</kbd> keys
@@ -431,10 +439,6 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
     the area of the scrollport that is used as the <a>alignment container</a>
     for the <a>scroll snap areas</a> when calculating <a>snap positions</a>.
 
-    Values must be non-negative
-    and are interpreted as for 'padding',
-    specifying inward offsets from each edge of the scrollport.
-
     <div class="example">
         In this example, 'scroll-padding' is used to center slideshow images
         within the portion of the scrollport
@@ -459,10 +463,6 @@ Scroll Snapport: the 'scroll-padding' property {#scroll-padding}
         </pre>
     </div>
 
-    This property is a <a>shorthand property</a> that sets
-    all of the <a href="#longhands"><css>scroll-padding-*</css> longhands</a>
-    in one declaration.
-
 Aligning Scroll Snap Areas:  Properties on the elements {#properties-on-the-elements}
 =====================================================================================
 
@@ -491,22 +491,22 @@ Scroll Snapping Area: the 'scroll-snap-margin' property {#scroll-snap-margin}
     Animatable: as length
     </pre>
 
-    The 'scroll-snap-margin' property defines
-    the <dfn lt="scroll snap area" local-lt="snap area">scroll snap area</dfn>
+    This property is a <a>shorthand property</a> that sets
+    all of the <a href="#longhands"><css>scroll-snap-margin-*</css> longhands</a>
+    in one declaration,
+    assigning values to the longhands representing each side
+    exactly as the 'margin' property does for its longhands.
+
+    Values represent outsets defining the
+    <dfn lt="scroll snap area" local-lt="snap area">scroll snap area</dfn>
     that is used for snapping this box to the snapport.
-    The <<length>> values give outsets
-    (interpreted as for 'margin' or 'border-image-outset').
     The <a>scroll snap area</a> is the rectangular bounding box of the transformed border box,
     plus the specified outsets,
     axis-aligned in the <a>scroll container’s</a> coordinate space.
 
     Note: This ensures that the <a>scroll snap area</a> is always rectangular
     and axis-aligned to the <a>scroll container’s</a> coordinate space.
 
-    This property is a <a>shorthand property</a> that sets
-    all of the <a href="#longhands"><css>scroll-snap-margin-*</css> longhands</a>
-    in one declaration.
-
 <!--
    ███    ██       ████  ██████   ██    ██
   ██ ██   ██        ██  ██    ██  ███   ██
@@ -916,6 +916,8 @@ Choosing Snap Positions {#choosing}
 Appendix A: Longhands {#longhands}
 ==================================
 
+The physical and logical longhands interact as defined in [[!CSS-LOGICAL-1]].
+
 Physical Longhands for 'scroll-padding' {#padding-longhands-physical}
 ----------------------------------------------------------------------