Change the function description format

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -1257,41 +1257,43 @@ follow the following steps:
 <div algorithm="to calculate the distance">
 To <dfn lt="calculating the distance | to calculate the distance">calculate the <var>distance</var></dfn>, the function is defined as below:
 
-<var>distance</var> = <var>euclidian</var> - <var>alignment</var> + <var>displacement</var> - <var>sqrt(Overlap)</var>
+<pre class="prod">
+    <var>distance</var> = <var>euclidian</var> - <var>alignment</var> + <var>displacement</var> - <var>sqrt(Overlap)</var>
+</pre>
 
 The meaning of each factor in the function is as follows:
 
-<dl>
-    <dt><var>euclidian</var>:
+<dl dfn-type="value" dfn-for="spatial-navigation-distance-function">
+    <dt><var>euclidian</var>
     <dd>The euclidian distance between <var>P1</var> and <var>P2</var>
-    <dd>formula = sqrt(pow(P1, 2) + pow(P2, 2))
+    <dd>Defined as <pre class="prod">sqrt(pow(<var>P1</var>, 2) + pow(<var>P2</var>, 2))</pre>
 
-    <dt><var>alignment</var>:
+    <dt><var>alignment</var>
     <dd>The degree of alignment in <var>dir</var> between <var>searchOrigin</var> and <var>candidate</var>
-    <dd>formula = <var>alignBias</var> * <var>alignWeight</var>
+    <dd>Defined as <pre class="prod"><var>alignBias</var> * <var>alignWeight</var></pre>
 
         * <var>alignBias</var>
 
-            * If the <var>dir</var> is left or right,  height of <var>intersectRect</var> / the height of the candidate
-            * Else if the <var>dir</var> is up or down,  width of <var>intersectRect</var> / the width of the candidate
+            * If the <var>dir</var> is left or right,  height of <var>intersectRect</var> / the height of <var>candidate</var>
+            * Else if the <var>dir</var> is up or down,  width of <var>intersectRect</var> / the width of <var>candidate</var>
 
         * <var>alignWeight</var> is 5
 
-    <dt><var>displacement</var>:
+    <dt><var>displacement</var>
     <dd>The degree of displacement in <var>dir</var> between <var>searchOrigin</var> and <var>candidate</var>
-    <dd>formula = (absolute distance on the axis orthogonal to <var>dir</var> + <var>orthogonalBias</var>) * <var>orthogonalWeight</var>
+    <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>:
+        * <var>orthogonalBias</var>
             * If the <var>dir</var> is left or right, height of <var>searchOrigin</var> / 2
             * Else if the <var>dir</var> is up or down, width of <var>searchOrigin</var> / 2
 
         * <var>orthogonalWeight</var>:
             * If the <var>dir</var> is left or right, 30
             * Else if the <var>dir</var> is up or down, 2
 
-    <dt><var>sqrt(Overlap)</var>:
+    <dt><var>sqrt(Overlap)</var>
     <dd>The square root of the <var>intersectRect</var>(overlapped area) between the <a>boundary boxes</a> of <var>candidate</var> and <var>searchOrigin</var>
-    <dd>formula = sqrt(height of <var>intersectRect</var> * width of <var>intersectRect</var>)
+    <dd>Defined as <pre class="prod">sqrt(height of <var>intersectRect</var> * width of <var>intersectRect</var>)</pre>
 </dl>
 
 NOTE: The values of <var>alignWeight</var> and <var>orthogonalWeight</var> in the function are decided based on