[css-nav-1] trailing spaces and line-breaking tweaks

See https://rhodesmill.org/brandon/2012/one-sentence-per-line/ for
rationale on line breaking

Author: frivoal

css-nav-1/Overview.bs

@@ -201,9 +201,9 @@ either because it is not a scrollable element
 or because it is already scrolled to the maximum in that direction,
 the User Agent will select the next <a>spatial navigation focus container</a> up the ancestry chain.
 
-The process of looking for an eligible focus target and 
-if there is any, then move the focus, 
-else if the <a>spatial navigation focus container</a> can be scrolled, then scroll, 
+The process of looking for an eligible focus target and
+if there is any, then move the focus,
+else if the <a>spatial navigation focus container</a> can be scrolled, then scroll,
 otherwise, going up to the next container
 is repeated until the ancestry chain reaches the root element.
 
@@ -213,7 +213,7 @@ the elements that are reachable by sequential navigation
 and by spatial navigation are almost the same:
     * Elements that are currently outside of the viewport of a scrollable element
         can only be reached once they have been scrolled into view
-    * Elements that cannot be scrolled into view. 
+    * Elements that cannot be scrolled into view.
         For instance, those are out of reach because they are placed at a negative offset.
 </div>
 
@@ -499,7 +499,7 @@ Note: the {{focusableAreas()}} and {{getSpatialNavigationContainer()}} methods a
 <div class=example id=focusAreas-visible>
     The following code shows how to get all the visible focusable elements in the current page using {{Element/focusableAreas()}}.
     If the method finds a <a>spatial navigation container</a>, it recursively finds focusable areas inside it.
-	However, <code>visible</code> is given to the {{FocusableAreasOptions/mode}} attribute of this method, 
+	However, <code>visible</code> is given to the {{FocusableAreasOptions/mode}} attribute of this method,
     the focusable element which isn’t inside the <a>scrollport</a> is excluded from the result.
 
     <pre><code highlight=markup>
@@ -982,15 +982,15 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
 
                 and return if the result is <code>false</code>.</span>
             3. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return
-        * Else if <var>eventTarget</var> <a>can be manually scrolled</a>, <a>directionally scroll the element</a> 
-              <var>eventTarget</var> in <var>direction</var> and return.
+        * Else if <var>eventTarget</var> <a>can be manually scrolled</a>,
+            <a>directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return.
         * Else, fallback to the next step.
 6. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatial navigation container</a>.
 7. <i>Loop</i>: Let <var>candidates</var> be the result of <a>finding focusable areas</a>
     within <var>container</var>, excluding <var>searchOrigin</var>
 8. If <var>candidates</var> is empty:
-    * If <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>, <a>directionally scroll the element</a>
-         <var>container</var> in <var>direction</var> and return.
+    * If <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>,
+        <a>directionally scroll the element</a> <var>container</var> in <var>direction</var> and return.
     * Else,
         1. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
             <span class=api><a>fire an event</a> named <a event>navnotarget</a> at <var>eventTarget</var> using {{NavigationEvent}} with:
@@ -1013,7 +1013,7 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
 9. Let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a>
     within <var>candidates</var> in <var>direction</var> starting from <var>searchOrigin</var>.
 10. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
-    <span class=api><a>fire an event</a> named <a event>navbeforefocus</a> at <var>eventTarget</var> using {{NavigationEvent}} with: 
+    <span class=api><a>fire an event</a> named <a event>navbeforefocus</a> at <var>eventTarget</var> using {{NavigationEvent}} with:
     * Set {{NavigationEvent/dir}} to <var>direction</var>
     * Set {{NavigationEvent/relatedTarget}} to <var>bestCandidate</var>
     * Set <code>bubbles</code> and <code>cancelable</code> attributes to <code>true</code>
@@ -1133,20 +1133,20 @@ run the following steps:
             whose boundary goes through the geometric center of the <var>searchOrigin</var>
             and is perpendicular to <var>dir</var>.
         2. For each <var>candidate</var> in <var>candidates</var>,
-            1. If the <var>searchOrigin</var> is an element, then find the points <var>P1</var> inside the <a>boundary box</a> 
+            1. If the <var>searchOrigin</var> is an element, then find the points <var>P1</var> inside the <a>boundary box</a>
                 of <var>searchOrigin</var> and P2 inside the boundary box of <var>candidate</var>.
-            2. Else if the <var>searchOrigin</var> is a point, then let the point <var>P1</var> be the <var>searchOrigin</var> 
+            2. Else if the <var>searchOrigin</var> is a point, then let the point <var>P1</var> be the <var>searchOrigin</var>
                 and find the point <var>P2</var> inside the <a>boundary box</a>.
         3. Let <var>intersectRect</var> be an <dfn>intersecting area</dfn> between the search origin and a candidate.
-        4. Select the <var>P1</var> and <var>P2</var> that make the smallest <var>distance</var> between those two points by 
-            <a>calculating the distance</a>.        
+        4. Select the <var>P1</var> and <var>P2</var> that make the smallest <var>distance</var> between those two points by
+            <a>calculating the distance</a>.
         5. Return the item of the <var>candidates</var> set that has the smallest <var>distance</var>.
             If several have the same distance,
             return the first one in document order,
             unless its [=boundary box=] overlaps with the [=boundary box=] of an other item at the same distance,
             and that item is higher in the CSS [=painting order=].
             In that case, return that item instead,
-            unless it too is overlapped with another higher item at the same distance, recursively.    
+            unless it too is overlapped with another higher item at the same distance, recursively.
 
 </div>
 
@@ -1168,9 +1168,9 @@ The meaning of each factor in the function is as follows:
     <dd>Defined as <pre class="prod">(absolute distance on the axis orthogonal to <var>dir</var> + <var>orthogonalBias</var>) * <var>orthogonalWeight</var></pre>
 
         * <var>orthogonalBias</var>
-            * If the <var>dir</var> is {{SpatialNavigationDirection/left}} or {{SpatialNavigationDirection/right}}, 
+            * If the <var>dir</var> is {{SpatialNavigationDirection/left}} or {{SpatialNavigationDirection/right}},
                 height of <var>searchOrigin</var> / 2
-            * Else if the <var>dir</var> is {{SpatialNavigationDirection/up}} or {{SpatialNavigationDirection/down}}, 
+            * Else if the <var>dir</var> is {{SpatialNavigationDirection/up}} or {{SpatialNavigationDirection/down}},
                 width of <var>searchOrigin</var> / 2
 
         * <var>orthogonalWeight</var>:
@@ -1183,23 +1183,23 @@ The meaning of each factor in the function is as follows:
 
         * <var>alignBias</var>
 
-            * If the <var>dir</var> is {{SpatialNavigationDirection/left}} or {{SpatialNavigationDirection/right}}, 
+            * If the <var>dir</var> is {{SpatialNavigationDirection/left}} or {{SpatialNavigationDirection/right}},
                 height of <var>intersectRect</var> / height of <var>candidate</var>
-            * Else if the <var>dir</var> is {{SpatialNavigationDirection/up}} or {{SpatialNavigationDirection/down}}, 
+            * Else if the <var>dir</var> is {{SpatialNavigationDirection/up}} or {{SpatialNavigationDirection/down}},
                 width of <var>intersectRect</var> / width of <var>candidate</var>
 
         * <var>alignWeight</var> is 5
 
     <dt><var>sqrt(Overlap)</var>
     <dd>The square root of an <a>overlapping area</a> between the <a>boundary boxes</a> of <var>searchOrigin</var> and <var>candidate</var>
-    <dd>Let <var>overlapRect</var> be 
+    <dd>Let <var>overlapRect</var> be
     <var>intersectRect</var> if the <a>overlapping area</a> exists,
     and 0 otherwise.
     <dd>Defined as <pre class="prod">sqrt(height of <var>overlapRect</var> * width of <var>overlapRect</var>)</pre>
 </dl>
 
-NOTE: The values of <var>alignWeight</var> and <var>orthogonalWeight</var> in the function are decided based on 
-        the collected <a href="https://wicg.github.io/spatial-navigation/tests/ux/list.html">UX test cases</a>. 
+NOTE: The values of <var>alignWeight</var> and <var>orthogonalWeight</var> in the function are decided based on
+        the collected <a href="https://wicg.github.io/spatial-navigation/tests/ux/list.html">UX test cases</a>.
         It aims to show the generally expected result in the real pages.
         Everyone is welcome to contribute to the test cases!
 
@@ -1221,9 +1221,9 @@ NOTE: The values of <var>alignWeight</var> and <var>orthogonalWeight</var> in th
     </figure>
 
     In the case above, the search origin element and the candidate element are aligned and the requested direction is {{SpatialNavigationDirection/right}}.
-    The <a>intersecting area</a> is created with 
+    The <a>intersecting area</a> is created with
     (1) The gap between two elements.
-    (2) The parts of the edges from each element which are overlapped 
+    (2) The parts of the edges from each element which are overlapped
         when the right edge of the search origin element and the left edge of the candidate are projected to each other.
 </div>
 </div>
@@ -1369,7 +1369,7 @@ the proper spatial navigation behavior.
     <dd>If the element is a <a>scroll container</a>,
         then directional input moves the focus to the candidates in the optimal viewing region.
         When there isn't any visible candidate, then the container scrolls.
-        
+
         Otherwise, the focus moves to the candidates in the viewport.
 
     <dt><dfn>focus</dfn>
@@ -1409,7 +1409,7 @@ Pressing the right arrow key moves the focus directly to it without scrolling ma
             grid-template-columns: repeat(1, 1fr);
             height: 300px;
             width: 200px;
-            overflow-y: scroll;            
+            overflow-y: scroll;
             spatial-navigation-action: focus;
         }
         .item {