Rewrite line-relative directions section. (Editorial.)

Author: fantasai

css3-writing-modes/Overview.html

@@ -2007,37 +2007,65 @@ <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
   <h3 id=line-directions><span class=secno>6.3. </span> Line-relative
    Directions</h3>
 
-  <p>The <dfn id=line-relative-directions>line-relative directions</dfn> <a
-   href="#over"><i>over</i></a>, <a href="#under"><i>under</i></a>, <a
-   href="#line-left"><i>line-left</i></a>, and <a
-   href="#line-right"><i>line-right</i></a> are defined relative to the <dfn
-   id=line-orientation>line orientation</dfn>, which is given by a
-   combination of &lsquo;<a href="#text-orientation0"><code
+  <p>The <dfn id=line-orientation>line orientation</dfn> determines which
+   side of a line box is the logical “top” (ascender side). It is given
+   by a combination of &lsquo;<a href="#text-orientation0"><code
    class=property>text-orientation</code></a>&rsquo; and &lsquo;<a
    href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;.
-   The <a href="#line-orientation"><i>line orientation</i></a> determines
-   which side of the line is the &ldquo;top&rdquo; and thus which sides are
-   <dfn id=under>under</dfn> (ascender side) and <dfn id=over>over</dfn>
-   (descender side) the line. The <i>line orientation<i> also affects the
-   interpretation of alignment (&lsquo;<code
-   class=property>vertical-align</code>&rsquo;) in the transverse dimension
-   of the line. </i></i>
-
-  <p>In addition to its <a href="#over"><i>over</i></a> and <a
-   href="#under"><i>under</i></a> sides, a line box, even a
-   vertically-oriented one, also has a "left" and "right" side, which we will
-   call the <a href="#line-left"><i>line-left</i></a> and <a
-   href="#line-right"><i>line-right</i></a> sides of the box (as distinct
-   from the physical left and physical right sides of the box). The <dfn
-   id=line-left>line-left</dfn> side of a box is nominally the side from
-   which <abbr title=left-to-right>LTR</abbr> text would start. The <dfn
-   id=line-right>line-right</dfn> side of a box is nominally the side from
-   which <abbr title=right-to-left>RTL</abbr> text would start. Depending on
-   the &lsquo;<a href="#writing-mode1"><code
-   class=property>writing-mode</code></a>&rsquo; and &lsquo;<a
-   href="#text-orientation0"><code
-   class=property>text-orientation</code></a>&rsquo; properties, the
-   line-left side of a box correspond to the physical left, top, or bottom.
+   Usually the line-relative “top” corresponds to the <a
+   href="#before"><i>before</i></a> side, but this is not always the case: in
+   Mongolian typesetting (and thus by default in &lsquo;<a
+   href="#vertical-lr"><code class=css>vertical-lr</code></a>&rsquo; writing
+   modes), the line-relative “top” corresponds to the <a
+   href="#after"><i>after</i></a> side. Hence the need for distinct
+   terminology.
+
+  <div class=figure> <img alt="Mongolian mixed with English"
+   src=mongolian-lr.jpg>
+   <p class=caption>A primarily Mongolian document, such as the one above, is
+    written in vertical lines stacking left to right, but lays its Latin text
+    with the tops of the glyphs towards the right. This makes the text run in
+    the same inline direction as Mongolian (top-to-bottom) and face the same
+    direction it does in other East Asian layouts (which have vertical lines
+    stacking right to left), but the glyphs' tops are facing the bottom of
+    the line stack rather than the top, which in an English paragraph would
+    be upside-down.
+  </div>
+
+  <p>In addition to a line-relative “top” and “bottom” to map things
+   like &lsquo;<code class=css>vertical-align: top</code>&rsquo;, CSS also
+   needs to refer to a line-relative “left” and “right” in order to
+   map things like &lsquo;<code class=css>text-align: left</code>&rsquo;.
+   Thus there are four <dfn id=line-relative-directions>line-relative
+   directions</dfn>, which are defined relative to the <a
+   href="#line-orientation"><i>line orientation</i></a> as follows:
+
+  <dl>
+   <dt><dfn id=over>over</dfn>
+
+   <dd>Nominally the side that corresponds to the ascender side or “top”
+    side of a line box. (The side overlines are typically drawn on.)
+
+   <dt><dfn id=under>under</dfn>
+
+   <dd>Opposite of <a href="#over"><i>over</i></a>: the line-relative
+    “bottom” or descender side. (The side underlines are typically drawn
+    on.)
+
+   <dt><dfn id=line-left>line-left</dfn>
+
+   <dd>Nominally the side from which <abbr title=left-to-right>LTR</abbr>
+    text would start.
+
+   <dt><dfn id=line-right>line-right</dfn>
+
+   <dd>Nominally the side from which <abbr title=right-to-left>RTL</abbr>
+    text would start. (Opposite of <a
+    href="#line-left"><i>line-left</i></a>.)
+  </dl>
+
+  <p>See the <a href=logical-to-physical>table below</a> for the exact
+   mappings between physical and line-relative directions.
 
   <div class=figure> <a href="diagrams/line-orient-up.svg"
    type="image/svg+xml"> <img alt="Line orientation compass" class=landscape
@@ -2061,14 +2089,6 @@ <h3 id=line-directions><span class=secno>6.3. </span> Line-relative
    </div>
   </div>
 
-  <p class=note>Note also that while the <a href="#over"><i>over</i></a> and
-   <a href="#under"><i>under</i></a> directions often map to the same
-   directions as <a href="#before">before</a> and <a href="#after">after</a>
-   respectively, this mapping is reversed for some combinations of &lsquo;<a
-   href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;
-   and &lsquo;<a href="#text-orientation0"><code
-   class=property>text-orientation</code></a>&rsquo;.
-
   <h3 id=logical-to-physical><span class=secno>6.4. </span>
    Abstract-to-Physical Mappings</h3>
 

css3-writing-modes/Overview.src.html

@@ -1441,26 +1441,49 @@ <h3 id="logical-directions">
 <h3 id="line-directions">
 Line-relative Directions</h3>
 
-  <p>The <dfn>line-relative directions</dfn> <i>over</i>, <i>under</i>,
-    <i>line-left</i>, and <i>line-right</i> are defined relative to the
-    <dfn>line orientation</dfn>, which is given by a combination of
-    'text-orientation' and 'writing-mode'. The <i>line orientation</i>
-    determines which side of the line is the &ldquo;top&rdquo; and
-    thus which sides are <dfn>under</dfn> (ascender side) and
-    <dfn>over</dfn> (descender side) the line. The <i>line orientation<i>
-    also affects the interpretation of alignment ('vertical-align') in the
-    transverse dimension of the line.
-
-  <p>In addition to its <i>over</i> and <i>under</i> sides, a line box, even
-    a vertically-oriented one, also has a "left" and "right" side, which we
-    will call the <i>line-left</i> and <i>line-right</i> sides of the box (as
-    distinct from the physical left and physical right sides of the box).
-    The <dfn>line-left</dfn> side of a box is nominally the side from which 
-    <abbr title="left-to-right">LTR</abbr> text would start. The
-    <dfn>line-right</dfn> side of a box is nominally the side from which
-    <abbr title="right-to-left">RTL</abbr> text would start. Depending on the
-    'writing-mode' and 'text-orientation' properties, the line-left side of
-    a box correspond to the physical left, top, or bottom.
+  <p>The <dfn>line orientation</dfn> determines which side of a line
+    box is the logical “top” (ascender side). It is given by a combination
+    of 'text-orientation' and 'writing-mode'. Usually the line-relative “top”
+    corresponds to the <i>before</i> side, but this is not always the case:
+    in Mongolian typesetting (and thus by default in ''vertical-lr'' writing
+    modes), the line-relative “top” corresponds to the <i>after</i> side.
+    Hence the need for distinct terminology.
+
+  <div class="figure">
+    <img src="mongolian-lr.jpg" alt="Mongolian mixed with English">
+    <p class="caption">A primarily Mongolian document, such as the one above, is written in
+    vertical lines stacking left to right, but lays its Latin text with
+    the tops of the glyphs towards the right. This makes the text run in
+    the same inline direction as Mongolian (top-to-bottom) and face the
+    same direction it does in other East Asian layouts (which have vertical
+    lines stacking right to left), but the glyphs' tops are facing the
+    bottom of the line stack rather than the top, which in an English
+    paragraph would be upside-down.
+  </div>
+
+  <p>In addition to a line-relative “top” and “bottom” to map things like
+    'vertical-align: top', CSS also needs to refer to a line-relative
+    “left” and “right” in order to map things like ''text-align: left''.
+    Thus there are four <dfn>line-relative directions</dfn>, which are
+    defined relative to the <i>line orientation</i> as follows:
+
+  <dl>
+  <dt><dfn>over</dfn>
+    <dd>Nominally the side that corresponds to the ascender side or “top”
+      side of a line box. (The side overlines are typically drawn on.)
+  <dt><dfn>under</dfn>
+    <dd>Opposite of <i>over</i>: the line-relative “bottom” or descender side.
+    (The side underlines are typically drawn on.)
+  <dt><dfn>line-left</dfn>
+    <dd>Nominally the side from which <abbr title="left-to-right">LTR</abbr>
+    text would start.
+  <dt><dfn>line-right</dfn>
+    <dd>Nominally the side from which <abbr title="right-to-left">RTL</abbr>
+    text would start. (Opposite of <i>line-left</i>.)
+  </dl>
+
+  <p>See the <a href="logical-to-physical">table below</a> for the exact
+    mappings between physical and line-relative directions.
 
   <div class="figure">
     <a href="diagrams/line-orient-up.svg" type="image/svg+xml">
@@ -1485,11 +1508,6 @@ <h3 id="line-directions">
     </div>
   </div>
 
-  <p class="note">Note also that while the <i>over</i> and <i>under</i>
-    directions often map to the same directions as <a href="#before">before</a>
-    and <a href="#after">after</a> respectively, this mapping is reversed
-    for some combinations of 'writing-mode' and 'text-orientation'.
-
 <h3 id="logical-to-physical">
 Abstract-to-Physical Mappings</h3>