W3C home > Mailing lists > Public > public-css-commits@w3.org > November 2011

csswg/css3-writing-modes Overview.html,1.219,1.220 Overview.src.html,1.229,1.230

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 18 Nov 2011 04:34:22 +0000
To: public-css-commits@w3.org
Message-Id: <E1RRG9e-00066l-EV@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-writing-modes
In directory hutz:/tmp/cvs-serv23465

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Reorganize/revise Abstract Box Terminology section. (Editorial.)

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-writing-modes/Overview.html,v
retrieving revision 1.219
retrieving revision 1.220
diff -u -d -r1.219 -r1.220
--- Overview.html	17 Nov 2011 23:43:44 -0000	1.219
+++ Overview.html	18 Nov 2011 04:34:20 -0000	1.220
@@ -32,7 +32,7 @@
 
    <h1>CSS Writing Modes Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 November
     2011</h2>
 
    <dl>
@@ -41,7 +41,7 @@
     <dd><a
      href="http://dev.w3.org/csswg/css3-writing-modes/">http://dev.w3.org/csswg/css3-writing-modes/</a>
      <!--
-    <dd><a href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20111117/">http://www.w3.org/TR/2011/ED-css3-writing-modes-20111117/</a>
+    <dd><a href="http://www.w3.org/TR/2011/WD-css3-writing-modes-20111118/">http://www.w3.org/TR/2011/ED-css3-writing-modes-20111118/</a>
 -->
      
 
@@ -238,18 +238,15 @@
     Terminology</a>
     <ul class=toc>
      <li><a href="#abstract-dimensions"><span class=secno>6.1. </span>
-      Logical Dimensions</a>
+      Abstract Dimensions</a>
 
-     <li><a href="#abstract-directions"><span class=secno>6.2. </span>
-      Abstract and Physical Directions</a>
+     <li><a href="#logical-directions"><span class=secno>6.2. </span>
+      Flow-relative Directions</a>
 
      <li><a href="#line-directions"><span class=secno>6.3. </span>
       Line-relative Directions</a>
 
-     <li><a href="#logical-directions"><span class=secno>6.4. </span>
-      Flow-relative Directions</a>
-
-     <li><a href="#logical-to-physical"><span class=secno>6.5. </span>
+     <li><a href="#logical-to-physical"><span class=secno>6.4. </span>
       Abstract-to-Physical Mappings</a>
     </ul>
 
@@ -1804,23 +1801,67 @@
 
   <h2 id=abstract-box><span class=secno>6. </span> Abstract Box Terminology</h2>
 
-  <p><a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> defines
-   the box layout model of CSS in detail. However, it only defines the box
-   model for the &lsquo;<a href="#horizontal-tb"><code
-   class=css>horizontal-tb</code></a>&rsquo; writing mode. CSS box layout in
-   writing modes other than &lsquo;<a href="#horizontal-tb"><code
-   class=css>horizontal-tb</code></a>&rsquo; is analogous to the box layout
-   defined in CSS2.1 if directions and dimensions are abstracted and remapped
-   appropriately. This section defines abstract directional and dimensional
-   terms and their mappings in order to define box layout for other writing
-   modes, and to provide terminology for future specs to define their layout
-   concepts abstractly.
+  <p>CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+   defines the box layout model of CSS in detail, but only for the &lsquo;<a
+   href="#horizontal-tb"><code class=css>horizontal-tb</code></a>&rsquo;
+   writing mode. Layout is analogous in writing modes other than &lsquo;<a
+   href="#horizontal-tb"><code class=css>horizontal-tb</code></a>&rsquo;;
+   however directional and dimensional terms in CSS2.1 must be abstracted and
+   remapped appropriately.
 
-  <h3 id=abstract-dimensions><span class=secno>6.1. </span> Logical
+  <p>This section defines abstract directional and dimensional terms and
+   their mappings in order to define box layout for other writing modes, and
+   to provide terminology for future specs to define their layout concepts
+   abstractly. (The next section explains how to apply them to CSS2.1 layout
+   calculations and how to handle <a href="#orthogonal-flows">orthogonal
+   flows</a>.) Although they derive from the behavior of text, these abstract
+   mappings exist even for boxes that do not contain any line boxes: they are
+   calculated directly from the values of the &lsquo;<a
+   href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;,
+   &lsquo;<a href="#text-orientation0"><code
+   class=property>text-orientation</code></a>&rsquo;, and &lsquo;<a
+   href="#direction0"><code class=property>direction</code></a>&rsquo;
+   properties.
+
+  <p>There are three sets of directional terms in CSS:
+
+  <dl>
+   <dt>physical
+
+   <dd>Interpreted relative to the page, independent of writing mode. The
+    physical directions are <i>left</i>, <i>right</i>, <i>top</i>, and
+    <i>bottom</i>.
+
+   <dt><a href=logical-directions>flow-relative</a>
+
+   <dd>Interpreted relative to the flow of content. The flow-relative
+    directions are <a href="#start"><i>start</i></a>, <a
+    href="#end"><i>end</i></a>, <a href="#before"><i>before</i></a>, and <a
+    href="#after"><i>after</i></a>.
+
+   <dt><a href=line-directions>line-relative</a>
+
+   <dd>Interpreted relative to the orientation of the line box. The
+    line-relative directions are <a href="#line-left"><i>line-left</i></a>,
+    <a href="#line-right"><i>line-right</i></a>, <a
+    href="#over"><i>over</i></a>, and <a href="#under"><i>under</i></a>.
+  </dl>
+
+  <p>The <dfn id=physical-dimensions>physical dimensions</dfn> are
+   <i>width</i> and <i>height</i>, which correspond to measurements along the
+   <i>x-axis</i> (<i>vertical dimension</i>) and <i>y-axis</i> (<i>horizontal
+   dimension</i>), respectively. <a href=abstract-dimensions>Abstract
+   dimensions</a> are identical in both flow-relative and line-relative
+   terms, so there is only one set of these terms.
+
+  <h3 id=abstract-dimensions><span class=secno>6.1. </span> Abstract
    Dimensions</h3>
 
+  <p>The <dfn id=abstract-dimensions0>abstract dimensions</dfn> are defined
+   below:
+
   <dl>
-   <dt><dfn id=block-flow-dimension>block flow dimension</dfn>
+   <dt><dfn id=block-dimension>block dimension</dfn>
 
    <dd>The dimension perpendicular to the flow of text with in a line, the
     <i>vertical dimension</i> in horizontal writing modes, and the
@@ -1834,7 +1875,7 @@
 
    <dt><dfn id=inline-axis>inline-axis</dfn>
 
-   <dd>The axis in the block flow dimension, i.e. the <i>vertical axis</i> in
+   <dd>The axis in the block dimension, i.e. the <i>vertical axis</i> in
     horizontal writing modes and the <i>horizontal axis</i> in vertical
     writing modes.
 
@@ -1849,9 +1890,9 @@
 
    <dt>
 
-   <dd>A measurement in the block flow dimension: refers to the physical
-    height (vertical dimension) in horizontal writing modes, and to the
-    physical width (horizontal dimension) in vertical writing modes.
+   <dd>A measurement in the block dimension: refers to the physical height
+    (vertical dimension) in horizontal writing modes, and to the physical
+    width (horizontal dimension) in vertical writing modes.
 
    <dt><dfn id=measure>measure</dfn> or <dfn id=logical-width>logical
     width</dfn>
@@ -1866,126 +1907,40 @@
     typography</a>.)
   </dl>
 
-  <h3 id=abstract-directions><span class=secno>6.2. </span> Abstract and
-   Physical Directions</h3>
-
-  <p>The terms <dfn id=left>left</dfn>, <dfn id=right>right</dfn>, <dfn
-   id=top>top</dfn>, and <dfn id=bottom>bottom</dfn> are always interpreted
-   physically, i.e. with respect to the page independent of writing mode. Two
-   abstract mappings are possible for these directions: line-relative and
-   flow-relative, which are defined below.
-
-  <p>Although they derive from the behavior of text, these directional terms
-   exist even for boxes that do not contain any line boxes: they are
-   calculated directly from the values of the &lsquo;<a
-   href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;,
-   &lsquo;<a href="#text-orientation0"><code
-   class=property>text-orientation</code></a>&rsquo;, and &lsquo;<a
-   href="#direction0"><code class=property>direction</code></a>&rsquo;
-   properties.
-
-  <h3 id=line-directions><span class=secno>6.3. </span> Line-relative
-   Directions</h3>
-
-  <p>Although the block flow direction given by &lsquo;<a
-   href="#writing-mode1"><code class=property>writing-mode</code></a>&rsquo;
-   determines whether the line is oriented horizontally or vertically, it
-   doesn't say anything about how the contents within the line are arranged.
-
-  <p>The <dfn id=line-relative-directions>line-relative directions</dfn> are
-   <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>. The <dfn
-   id=line-orientation>line orientation</dfn>, which 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;,
-   determines which side of the line is the "top" and thus which sides are
-   <dfn id=under>under</dfn> (ascender side) and <dfn id=over>over</dfn>
-   (descender side) the line. The line orientation also affects the
-   interpretation of alignment (&lsquo;<code
-   class=property>vertical-align</code>&rsquo;) in the transverse dimension
-   of the line.
-
-  <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> edge of a box is nominally the edge from
-   which <abbr title=left-to-right>LTR</abbr> text would start. The <dfn
-   id=line-right>line-right</dfn> edge of a box is nominally the edge 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 could be on the physical left, top, or bottom.
-
-  <div class=figure> <a href="diagrams/line-orient-up.svg"
-   type="image/svg+xml"> <img alt="Line orientation compass" class=landscape
-   src="diagrams/line-orient-up.png"></a>
-   <p class=caption>Line orientation compass</p>
-  </div>
-
-  <div class=figurepair>
-   <div class=figure> <a href="diagrams/line-orient-right.svg"
-    type="image/svg+xml"> <img alt="Typical orientation in vertical"
-    class=portrait src="diagrams/line-orient-right.png"></a>
-    <p class=caption>Typical orientation in vertical</p>
-   </div>
-
-   <div class=figure> <a href="diagrams/line-orient-left.svg"
-    type="image/svg+xml"> <img
-    alt="Line orientation with ''text-orientation: sideways-left''"
-    class=portrait src="diagrams/line-orient-left.png"></a>
-    <p class=caption>Line orientation with &lsquo;<code
-     class=css>text-orientation: sideways-left</code>&rsquo;</p>
-   </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-directions><span class=secno>6.4. </span> Flow-relative
+  <h3 id=logical-directions><span class=secno>6.2. </span> Flow-relative
    Directions</h3>
 
-  <p>The <dfn id=flow-relative-directions>flow-relative directions</dfn> are
-   <a href="#before">before</a>, <a href="#after">after</a>, <a
-   href="#start">start</a>, and <a href="#end">end</a>. In an <abbr
+  <p>The <dfn id=flow-relative-directions>flow-relative directions</dfn>, <a
+   href="#before"><i>before</i></a>, <a href="#after"><i>after</i></a>, <a
+   href="#start"><i>start</i></a>, and <a href="#end"><i>end</i></a>, are
+   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.
 
-  <p>The <dfn id=before>before</dfn> edge of a box is nominally the edge that
+  <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> edge is the edge that
+   property. Similarly the <dfn id=after>after</dfn> side is the side that
    comes later in the progression.
 
-  <p>The <dfn id=start>start</dfn> edge of a box is nominally the edge from
+  <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> edge. For boxes with a used
+   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> edge. The edge opposite the start
-   edge is the <dfn id=end>end</dfn> edge.
+   href="#line-right"><i>line-right</i></a> side. The side opposite the start
+   side is the <dfn id=end>end</dfn> side.
 
   <p class=note>Note that while determining the <a
    href="#before"><i>before</i></a> and <a href="#after"><i>after</i></a>
-   edges of a box depends only on the &lsquo;<a href="#writing-mode1"><code
+   sides of a box depends only on the &lsquo;<a href="#writing-mode1"><code
    class=property>writing-mode</code></a>&rsquo; property, determining the <a
-   href="#start"><i>start</i></a> and <a href="#end"><i>end</i></a> edges of
+   href="#start"><i>start</i></a> and <a href="#end"><i>end</i></a> sides of
    a box depends not only on the &lsquo;<a href="#writing-mode1"><code
    class=property>writing-mode</code></a>&rsquo; property but also the
    &lsquo;<a href="#direction0"><code
@@ -2033,7 +1988,72 @@
     </pre>
   </div>
 
-  <h3 id=logical-to-physical><span class=secno>6.5. </span>
+  <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
+   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.
+
+  <div class=figure> <a href="diagrams/line-orient-up.svg"
+   type="image/svg+xml"> <img alt="Line orientation compass" class=landscape
+   src="diagrams/line-orient-up.png"></a>
+   <p class=caption>Line orientation compass</p>
+  </div>
+
+  <div class=figurepair>
+   <div class=figure> <a href="diagrams/line-orient-right.svg"
+    type="image/svg+xml"> <img alt="Typical orientation in vertical"
+    class=portrait src="diagrams/line-orient-right.png"></a>
+    <p class=caption>Typical orientation in vertical</p>
+   </div>
+
+   <div class=figure> <a href="diagrams/line-orient-left.svg"
+    type="image/svg+xml"> <img
+    alt="Line orientation with ''text-orientation: sideways-left''"
+    class=portrait src="diagrams/line-orient-left.png"></a>
+    <p class=caption>Line orientation with &lsquo;<code
+     class=css>text-orientation: sideways-left</code>&rsquo;</p>
+   </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>
 
   <p>The following table summarizes the abstract-to-physical mappings:
@@ -2537,12 +2557,12 @@
    layout rules related to the box properties (margins, borders, padding) and
    any properties related to positioning the box within its containing block
    (&lsquo;<code class=property>float</code>&rsquo;, &lsquo;<code
-   class=property>clear</code>&rsquo;, &lsquo;<a href="#top"><code
-   class=property>top</code></a>&rsquo;, &lsquo;<a href="#bottom"><code
-   class=property>bottom</code></a>&rsquo;, &lsquo;<a href="#left"><code
-   class=property>left</code></a>&rsquo;, &lsquo;<a href="#right"><code
-   class=property>right</code></a>&rsquo;) For inline-level elements, the
-   writing mode of the <em>parent element</em> is used instead.
+   class=property>clear</code>&rsquo;, &lsquo;<code
+   class=property>top</code>&rsquo;, &lsquo;<code
+   class=property>bottom</code>&rsquo;, &lsquo;<code
+   class=property>left</code>&rsquo;, &lsquo;<code
+   class=property>right</code>&rsquo;) For inline-level elements, the writing
+   mode of the <em>parent element</em> is used instead.
 
   <p>For example, the margin that is dropped when a box's inline dimension is
    <a
@@ -2586,10 +2606,9 @@
    directions, respectively.
 
   <p>The line-right and line-left directions are calculated with respect to
-   the writing mode of the element and used to interpret the &lsquo;<a
-   href="#left"><code class=css>left</code></a>&rsquo; and &lsquo;<a
-   href="#right"><code class=css>right</code></a>&rsquo; values of the
-   following properties:
+   the writing mode of the element and used to interpret the &lsquo;<code
+   class=css>left</code>&rsquo; and &lsquo;<code
+   class=css>right</code>&rsquo; values of the following properties:
 
   <ul>
    <li>the &lsquo;<code class=property>text-align</code>&rsquo; property <a
@@ -2598,9 +2617,9 @@
 
   <p>The line-right and line-left directions are calculated with respect to
    the writing mode of the <em>containing block</em> of the element and used
-   to interpret the &lsquo;<a href="#left"><code
-   class=css>left</code></a>&rsquo; and &lsquo;<a href="#right"><code
-   class=css>right</code></a>&rsquo; values of the following properties:
+   to interpret the &lsquo;<code class=css>left</code>&rsquo; and
+   &lsquo;<code class=css>right</code>&rsquo; values of the following
+   properties:
 
   <ul>
    <li>the &lsquo;<code class=property>float</code>&rsquo; property <a
@@ -2708,10 +2727,9 @@
    caption before and after the table box, respectively. For tables with
    &lsquo;<a href="#horizontal-tb"><code
    class=css>horizontal-tb</code></a>&rsquo; writing mode, they are
-   equivalent to the existing &lsquo;<a href="#top"><code
-   class=css>top</code></a>&rsquo; and &lsquo;<a href="#bottom"><code
-   class=css>bottom</code></a>&rsquo; values, respectively. <a href="#CSS21"
-   rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+   equivalent to the existing &lsquo;<code class=css>top</code>&rsquo; and
+   &lsquo;<code class=css>bottom</code>&rsquo; values, respectively. <a
+   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 
   <p class=note>For implementations that support the &lsquo;<code
    class=property>top-outside</code>&rsquo; and &lsquo;<code
@@ -2719,31 +2737,29 @@
    &lsquo;<code class=property>before-outside</code>&rsquo; and &lsquo;<code
    class=property>after-outside</code>&rsquo; will be similarly introduced.
 
-  <p>Implementations that support the &lsquo;<a href="#top"><code
-   class=css>top</code></a>&rsquo; and &lsquo;<a href="#bottom"><code
-   class=css>bottom</code></a>&rsquo; values of the &lsquo;<code
+  <p>Implementations that support the &lsquo;<code
+   class=css>top</code>&rsquo; and &lsquo;<code
+   class=css>bottom</code>&rsquo; values of the &lsquo;<code
    class=property>caption-side</code>&rsquo; property but do not support side
-   captions (i.e. &lsquo;<a href="#left"><code
-   class=css>left</code></a>&rsquo; and &lsquo;<a href="#right"><code
-   class=css>right</code></a>&rsquo; captions in horizontal writing modes)
-   must treat &lsquo;<a href="#top"><code class=css>top</code></a>&rsquo; and
-   &lsquo;<a href="#bottom"><code class=css>bottom</code></a>&rsquo; as
-   &lsquo;<a href="#before"><code class=css>before</code></a>&rsquo;, when
-   the table is in a vertical writing mode.
+   captions (i.e. &lsquo;<code class=css>left</code>&rsquo; and &lsquo;<code
+   class=css>right</code>&rsquo; captions in horizontal writing modes) must
+   treat &lsquo;<code class=css>top</code>&rsquo; and &lsquo;<code
+   class=css>bottom</code>&rsquo; as &lsquo;<a href="#before"><code
+   class=css>before</code></a>&rsquo;, when the table is in a vertical
+   writing mode.
 
-  <p>For implementations that do support side captions (i.e. the &lsquo;<a
-   href="#left"><code class=css>left</code></a>&rsquo; and &lsquo;<a
-   href="#right"><code class=css>right</code></a>&rsquo; values from the
-   obsolete CSS&nbsp;2.0 specification <a href="#CSS2"
-   rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>), this module also introduces
-   the &lsquo;<a href="#start"><code class=css>start</code></a>&rsquo; and
-   &lsquo;<a href="#end"><code class=css>end</code></a>&rsquo; values, which
-   behave similarly and which position the caption on the start and end sides
-   of the table box, calculated with respect to the writing mode of the table
-   element. For such implementations, the &lsquo;<a href="#top"><code
-   class=css>top</code></a>&rsquo; and &lsquo;<a href="#bottom"><code
-   class=css>bottom</code></a>&rsquo; values must place the caption on the
-   top and bottom sides of the table box, respectively.
+  <p>For implementations that do support side captions (i.e. the &lsquo;<code
+   class=css>left</code>&rsquo; and &lsquo;<code
+   class=css>right</code>&rsquo; values from the obsolete CSS&nbsp;2.0
+   specification <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>),
+   this module also introduces the &lsquo;<a href="#start"><code
+   class=css>start</code></a>&rsquo; and &lsquo;<a href="#end"><code
+   class=css>end</code></a>&rsquo; values, which behave similarly and which
+   position the caption on the start and end sides of the table box,
+   calculated with respect to the writing mode of the table element. For such
+   implementations, the &lsquo;<code class=css>top</code>&rsquo; and
+   &lsquo;<code class=css>bottom</code>&rsquo; values must place the caption
+   on the top and bottom sides of the table box, respectively.
 
   <p class=note>The CSS2.0 side caption model had some <a
    href="http://lists.w3.org/Archives/Public/www-style/2002Dec/0142.html">problems</a>

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-writing-modes/Overview.src.html,v
retrieving revision 1.229
retrieving revision 1.230
diff -u -d -r1.229 -r1.230
--- Overview.src.html	17 Nov 2011 23:43:44 -0000	1.229
+++ Overview.src.html	18 Nov 2011 04:34:20 -0000	1.230
@@ -1291,20 +1291,53 @@
 <h2 id="abstract-box">
 Abstract Box Terminology</h2>
 
-  <p>[[!CSS21]] defines the box layout model of CSS in detail. However,
-    it only defines the box model for the ''horizontal-tb'' writing mode.
-    CSS box layout in writing modes other than ''horizontal-tb'' is
-    analogous to the box layout defined in CSS2.1 if directions and
-    dimensions are abstracted and remapped appropriately. This section
-    defines abstract directional and dimensional terms and their mappings
-    in order to define box layout for other writing modes, and to provide
-    terminology for future specs to define their layout concepts abstractly.
+  <p>CSS2.1 [[!CSS21]] defines the box layout model of CSS in detail,
+    but only for the ''horizontal-tb'' writing mode. Layout is analogous
+    in writing modes other than ''horizontal-tb''; however directional
+    and dimensional terms in CSS2.1 must be abstracted and remapped
+    appropriately.
+    
+  <p>This section defines abstract directional and dimensional terms and
+    their mappings in order to define box layout for other writing modes,
+    and to provide terminology for future specs to define their layout
+    concepts abstractly. (The next section explains how to apply them to
+    CSS2.1 layout calculations and how to handle
+    <a href="#orthogonal-flows">orthogonal flows</a>.)
+    Although they derive from the behavior of text, these abstract
+    mappings exist even for boxes that do not contain any line boxes:
+    they are calculated directly from the values of the 'writing-mode',
+    'text-orientation', and 'direction' properties.
+
+  <p>There are three sets of directional terms in CSS:
+  
+  <dl>
+  <dt>physical
+    <dd>Interpreted relative to the page, independent of writing mode.
+    The physical directions are <i>left</i>, <i>right</i>, <i>top</i>, and
+    <i>bottom</i>.
+  <dt><a href="logical-directions">flow-relative</a>
+    <dd>Interpreted relative to the flow of content. The flow-relative
+    directions are <i>start</i>, <i>end</i>, <i>before</i>, and <i>after</i>.
+  <dt><a href="line-directions">line-relative</a>
+    <dd>Interpreted relative to the orientation of the line box.
+    The line-relative directions are <i>line-left</i>, <i>line-right</i>,
+    <i>over</i>, and <i>under</i>.
+  </dl>
+
+  <p>The <dfn>physical dimensions</dfn> are <i>width</i> and <i>height</i>,
+    which correspond to measurements along the <i>x-axis</i>
+    (<i>vertical dimension</i>) and <i>y-axis</i> (<i>horizontal dimension</i>),
+    respectively. <a href="abstract-dimensions">Abstract dimensions</a>
+    are identical in both flow-relative and line-relative terms, so there
+    is only one set of these terms.
 
 <h3 id="abstract-dimensions">
-Logical Dimensions</h3>
+Abstract Dimensions</h3>
+
+  <p>The <dfn>abstract dimensions</dfn> are defined below:
 
   <dl>
-    <dt><dfn>block flow dimension</dfn></dt>
+    <dt><dfn>block dimension</dfn></dt>
       <dd>The dimension perpendicular to the flow of text with in a line,
         the <i>vertical dimension</i> in horizontal writing modes, and
         the <i>horizontal dimension</i> in vertical writing modes.</dd>
@@ -1313,7 +1346,7 @@
         the <i>horizontal dimension</i> in horizontal writing modes, and
         the <i>vertical dimension</i> in vertical writing modes.</dd>
     <dt><dfn>inline-axis</dfn></dt>
-      <dd>The axis in the block flow dimension, i.e. the <i>vertical
+      <dd>The axis in the block dimension, i.e. the <i>vertical
         axis</i> in horizontal writing modes and the <i>horizontal
         axis</i> in vertical writing modes.</dd>
     <dt><dfn>block-axis</dfn></dt>
@@ -1321,7 +1354,7 @@
         axis</i> in horizontal writing modes and the <i>vertical axis</i>
         in vertical writing modes.</dd>
     <dt><dfn>extent</dfn> or <dfn>logical height</dfn><dt>
-      <dd>A measurement in the block flow dimension: refers to the
+      <dd>A measurement in the block dimension: refers to the
         physical height (vertical dimension) in horizontal writing
         modes, and to the physical width (horizontal dimension) in
         vertical writing modes.</dd>
@@ -1334,101 +1367,31 @@
         in typography</a>.)</dd>
   </dl>
 
-<h3 id="abstract-directions">
-Abstract and Physical Directions</h3>
-
-  <p>The terms <dfn>left</dfn>, <dfn>right</dfn>, <dfn>top</dfn>, and <dfn>bottom</dfn>
-    are always interpreted physically, i.e. with respect to the page
-    independent of writing mode. Two abstract mappings are
-    possible for these directions: line-relative and flow-relative,
-    which are defined below.
-
-  <p>Although they derive from the behavior of text, these directional
-    terms exist even for boxes that do not contain any line boxes:
-    they are calculated directly from the values of the 'writing-mode',
-    'text-orientation', and 'direction' properties.
-
-<h3 id="line-directions">
-Line-relative Directions</h3>
-
-  <p>Although the block flow direction given by 'writing-mode' determines
-    whether the line is oriented horizontally or vertically, it doesn't
-    say anything about how the contents within the line are arranged.
-
-  <p>The <dfn>line-relative directions</dfn> are <i>over</i>, <i>under</i>,
-    <i>line-left</i>, and <i>line-right</i>.
-    The <dfn>line orientation</dfn>, which is given by a combination of
-    'text-orientation' and 'writing-mode', determines which side of the line is
-    the "top" and thus which sides are <dfn>under</dfn> (ascender side) and
-    <dfn>over</dfn> (descender side) the line. The line orientation 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> edge of a box is nominally the edge from which 
-    <abbr title="left-to-right">LTR</abbr> text would start. The
-    <dfn>line-right</dfn> edge of a box is nominally the edge 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 could be on the physical left, top, or bottom.
-
-  <div class="figure">
-    <a href="diagrams/line-orient-up.svg" type="image/svg+xml">
-      <img src="diagrams/line-orient-up.png" class="landscape"
-        alt="Line orientation compass"></a>
-    <p class="caption">Line orientation compass</p>
-  </div>
-
-  <div class="figurepair">
-    <div class="figure">
-    <a href="diagrams/line-orient-right.svg" type="image/svg+xml">
-      <img src="diagrams/line-orient-right.png" class="portrait"
-        alt="Typical orientation in vertical"></a>
-      <p class="caption">Typical orientation in vertical</p>
-    </div>
-
-    <div class="figure">
-    <a href="diagrams/line-orient-left.svg" type="image/svg+xml">
-      <img src="diagrams/line-orient-left.png" class="portrait"
-        alt="Line orientation with ''text-orientation: sideways-left''"></a>
-      <p class="caption">Line orientation with ''text-orientation: sideways-left''</p>
-    </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-directions">
 Flow-relative Directions</h3>
 
-  <p>The <dfn>flow-relative directions</dfn> are
-    <a href="#before">before</a>,
-    <a href="#after">after</a>,
-    <a href="#start">start</a>, and
-    <a href="#end">end</a>. In an <abbr title="left-to-right">LTR</abbr>
+  <p>The <dfn>flow-relative directions</dfn>, <i>before</i>, <i>after</i>,
+    <i>start</i>, and <i>end</i>, are defined relative to the flow of
+    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> edge of a box is nominally the edge that comes
+  <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> edge is the edge that comes later
+    property. Similarly the <dfn>after</dfn> side is the side that comes later
     in the progression.
 
-  <p>The <dfn>start</dfn> edge of a box is nominally the edge from which
+  <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>
-    edge. For boxes with a used 'direction' value of ''rtl'', this means
-    the <i>line-right</i> edge. The edge opposite the start edge is the
-    <dfn>end</dfn> edge.
+    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.
 
   <p class="note">Note that while determining the <i>before</i> and
-    <i>after</i> edges of a box depends only on the 'writing-mode' property,
-    determining the <i>start</i> and <i>end</i> edges of a box depends not
+    <i>after</i> sides of a box depends only on the 'writing-mode' property,
+    determining the <i>start</i> and <i>end</i> sides of a box depends not
     only on the 'writing-mode' property but also the 'direction' <em>and</em>
     'text-orientation' properties.</p>
 
@@ -1469,6 +1432,58 @@
     </pre>
   </div>
 
+<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.
+
+  <div class="figure">
+    <a href="diagrams/line-orient-up.svg" type="image/svg+xml">
+      <img src="diagrams/line-orient-up.png" class="landscape"
+        alt="Line orientation compass"></a>
+    <p class="caption">Line orientation compass</p>
+  </div>
+
+  <div class="figurepair">
+    <div class="figure">
+    <a href="diagrams/line-orient-right.svg" type="image/svg+xml">
+      <img src="diagrams/line-orient-right.png" class="portrait"
+        alt="Typical orientation in vertical"></a>
+      <p class="caption">Typical orientation in vertical</p>
+    </div>
+
+    <div class="figure">
+    <a href="diagrams/line-orient-left.svg" type="image/svg+xml">
+      <img src="diagrams/line-orient-left.png" class="portrait"
+        alt="Line orientation with ''text-orientation: sideways-left''"></a>
+      <p class="caption">Line orientation with ''text-orientation: sideways-left''</p>
+    </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>
 
Received on Friday, 18 November 2011 04:34:32 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 18 November 2011 04:34:34 GMT