[css-nav-1] Fix and upate the description

Update the description about `spatial-navigation-function`

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -1171,7 +1171,7 @@ run the following steps:
 </div>
 
 <div algorithm="to find the shortest the distance">
-To <dfn lt="find the shortest distance">find the shortest distance</dfn>
+To <dfn lt="find the shortest distance | finding the shortest distance">find the shortest distance</dfn>
 between a <var>reference</var> and a <var>candidate</var>
 in direction <var>dir</var>,
 find the points <var>P1</var> and <var>P2</var>,
@@ -1504,36 +1504,41 @@ Selecting the navigation algorithm: the 'spatial-navigation-function' property</
 Name: spatial-navigation-function
 Value: normal | grid
 Initial: normal
-Applies to: <a>spatial navigation container</a>
+Applies to: <a>spatial navigation focus container</a>
 Inherited: yes
 </pre>
 
-Depending on the layout types, the default algorithm of spatial navigation may need the fine tune.
+The default algorithm of spatial navigation specified in the [[#processing-model]] may need the fine tune depending on the layout types.
+This property allows the author to indicate which navigation algorithm is reasonable for spatial navigation behavior.
+
+Its values are defined as follows:
 
 <dl dfn-for=spatial-navigation-function dfn-type=value>
     <dt><dfn>normal</dfn>
     <dd>
         Moves the focus with the default focus navigation algorithm defined by UA.
-        In general, the focus moves to the closest element from the <a>spatial navigation starting point</a>.
+
+        In general, the focus moves to the element with the closest distance calculated by <a>finding the shortest distance</a>.
 
     <dt><dfn>grid</dfn>
     <dd>
-        Moves the focus to the closest element based on 2D rectilinear distance.
-
-        If there are more than one aligned candidates in the navigation direction,
-            Among the aligned candidates, select the best one as a result of the calculation from the distance
-            along the axis which corresponds to the navigation direction.
-            In case of best candidates more than two, select the best one with the minimum amount of alignment.
-
-        Else if there isn't any aligned candidate in a given direction,
-            Among not aligned)candidates, select the best ones as a result of calculation from the distance
-             along the axis which corresponds to the navigation direction.
-            In case of best candidates more than two, select the best one with the minimum distance
-            along the axis which is orthogonal to the navigation direction.
+        Moves the focus to the element which is aligned most in the navigation direction.
+
+        * If there are more than one aligned candidates in the navigation direction,
+             select the element with the closest distance along the axis which corresponds to the navigation direction.
+            In case of multiple elements with the same distance,
+             select the element with the minimum amount of alignment.
+
+        * Else if there isn't any aligned candidate in a given direction,
+             select the element with the closest distance along the axis which corresponds to the navigation direction.
+            In case of multiple elements with the same distance,
+             select the element with the minimum distance along the axis which is orthogonal to the navigation direction.
 </dl>
 
+NOTE: These values are negotiated with the users' preferences which seems natural spatial navigation behavior for their pages.
+
 <div class=example>
-    This example shows how the focus moves differently by the value of <code>spatial-navigation-function</code>.
+    This example shows how the focus moves differently by the value of <code highlight=css>spatial-navigation-function</code>.
 
     <figure>
         <img alt="" src="images/spatnav-function.png" style="width: 500px;"/>
@@ -1542,9 +1547,9 @@ Depending on the layout types, the default algorithm of spatial navigation may n
 
     Let the element which contains "A", "B", "C" and "D" is the <a>spatial navigation focus container</a>.
 
-    If <code>normal</code> value is given to <code>spatial-navigation-function</code> of the element,
-    when the user presses the down arrow key, the focus will move to "C".
-    Otherwise, <code>grid</code> was specified to the element, the focus will move to "B".
+    When the user presses the down arrow key,
+    if <code highlight=css>normal</code> value is given to <code highlight=css>spatial-navigation-function</code> of the element, the focus will move to "B".
+    Otherwise, <code highlight=css>grid</code> value was specified to the element, the focus will move to "C".
 </div>
 
 <h2 class=no-num id=scrolling>Appendix A. Scroll extensions</h2>