Use <dl> to define flow-relative directions

Author: fantasai

css3-writing-modes/Overview.html

@@ -1916,25 +1916,41 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
    defined relative to the flow of content on the page. In an <abbr
    title=left-to-right>LTR</abbr> &lsquo;<a href="#horizontal-tb"><code
    class=css>horizontal-tb</code></a>&rsquo; writing mode, they correspond to
-   the top, bottom, left, and right directions, respectively.
+   the top, bottom, left, and right directions, respectively. They are
+   defined as follows:
 
-  <p>The <dfn id=before>before</dfn> side of a box is nominally the side that
-   comes earlier in the block progression, as determined by the &lsquo;<a
-   href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;
-   property. Similarly the <dfn id=after>after</dfn> side is the side that
-   comes later in the progression.
+  <dl>
+   <dt><dfn id=before>before</dfn>
 
-  <p>The <dfn id=start>start</dfn> side of a box is nominally the side from
-   which text of its inline base direction will start. For boxes with a used
-   &lsquo;<a href="#direction0"><code
-   class=property>direction</code></a>&rsquo; value of &lsquo;<a
-   href="#ltr"><code class=css>ltr</code></a>&rsquo;, this means the <a
-   href="#line-left"><i>line-left</i></a> side. For boxes with a used
-   &lsquo;<a href="#direction0"><code
-   class=property>direction</code></a>&rsquo; value of &lsquo;<a
-   href="#rtl"><code class=css>rtl</code></a>&rsquo;, this means the <a
-   href="#line-right"><i>line-right</i></a> side. The side opposite the start
-   side is the <dfn id=end>end</dfn> side.
+   <dd>Nominally the side that comes earlier in the block progression, as
+    determined by the &lsquo;<a href="#writing-mode1"><code
+    class=property>writing-mode</code></a>&rsquo; property: the physical top
+    in &lsquo;<a href="#horizontal-tb"><code
+    class=css>horizontal-tb</code></a>&rsquo; mode, the right in &lsquo;<a
+    href="#vertical-rl"><code class=css>vertical-rl</code></a>&rsquo;, and
+    the left in &lsquo;<a href="#vertical-lr"><code
+    class=css>vertical-lr</code></a>&rsquo;.
+
+   <dt><dfn id=after>after</dfn>
+
+   <dd>The side opposite <a href="#before"><i>before</i></a>.
+
+   <dt><dfn id=start>start</dfn>
+
+   <dd>Nominally the side from which text of its inline base direction will
+    start. For boxes with a used &lsquo;<a href="#direction0"><code
+    class=property>direction</code></a>&rsquo; value of &lsquo;<a
+    href="#ltr"><code class=css>ltr</code></a>&rsquo;, this means the <a
+    href="#line-left"><i>line-left</i></a> side. For boxes with a used
+    &lsquo;<a href="#direction0"><code
+    class=property>direction</code></a>&rsquo; value of &lsquo;<a
+    href="#rtl"><code class=css>rtl</code></a>&rsquo;, this means the <a
+    href="#line-right"><i>line-right</i></a> side.
+
+   <dt><dfn id=end>end</dfn>
+
+   <dd>The side opposite the <a href="#start"><i>start</i></a>.
+  </dl>
 
   <p class=note>Note that while determining the <a
    href="#before"><i>before</i></a> and <a href="#after"><i>after</i></a>

css3-writing-modes/Overview.src.html

@@ -1375,19 +1375,25 @@ <h3 id="logical-directions">
     content on the page.
     In an <abbr title="left-to-right">LTR</abbr>
     ''horizontal-tb'' writing mode, they correspond to the
-    top, bottom, left, and right directions, respectively.
-    
-  <p>The <dfn>before</dfn> side of a box is nominally the side that comes
-    earlier in the block progression, as determined by the 'writing-mode'
-    property. Similarly the <dfn>after</dfn> side is the side that comes later
-    in the progression.
-
-  <p>The <dfn>start</dfn> side of a box is nominally the side from which
-    text of its inline base direction will start. For boxes with
-    a used 'direction' value of ''ltr'', this means the <i>line-left</i>
-    side. For boxes with a used 'direction' value of ''rtl'', this means
-    the <i>line-right</i> side. The side opposite the start side is the
-    <dfn>end</dfn> side.
+    top, bottom, left, and right directions, respectively. They are
+    defined as follows:
+
+  <dl>
+  <dt><dfn>before</dfn>
+    <dd>Nominally the side that comes earlier in the block progression,
+    as determined by the 'writing-mode' property: the physical top
+    in ''horizontal-tb'' mode, the right in ''vertical-rl'', and the
+    left in ''vertical-lr''.
+  <dt><dfn>after</dfn>
+    <dd>The side opposite <i>before</i>.
+  <dt><dfn>start</dfn>
+    <dd>Nominally the side from which text of its inline base direction
+    will start. For boxes with a used 'direction' value of ''ltr'',
+    this means the <i>line-left</i> side. For boxes with a used 'direction'
+    value of ''rtl'', this means the <i>line-right</i> side.
+  <dt><dfn>end</dfn>
+    <dd>The side opposite the <i>start</i>.
+  </dl>
 
   <p class="note">Note that while determining the <i>before</i> and
     <i>after</i> sides of a box depends only on the 'writing-mode' property,