- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 18 Nov 2011 04:34:22 +0000
- To: public-css-commits@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 ‘<a href="#horizontal-tb"><code
- class=css>horizontal-tb</code></a>’ writing mode. CSS box layout in
- writing modes other than ‘<a href="#horizontal-tb"><code
- class=css>horizontal-tb</code></a>’ 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 ‘<a
+ href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’
+ writing mode. Layout is analogous in writing modes other than ‘<a
+ href="#horizontal-tb"><code class=css>horizontal-tb</code></a>’;
+ 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 ‘<a
+ href="#writing-mode1"><code class=property>writing-mode</code></a>’,
+ ‘<a href="#text-orientation0"><code
+ class=property>text-orientation</code></a>’, and ‘<a
+ href="#direction0"><code class=property>direction</code></a>’
+ 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 ‘<a
- href="#writing-mode1"><code class=property>writing-mode</code></a>’,
- ‘<a href="#text-orientation0"><code
- class=property>text-orientation</code></a>’, and ‘<a
- href="#direction0"><code class=property>direction</code></a>’
- properties.
-
- <h3 id=line-directions><span class=secno>6.3. </span> Line-relative
- Directions</h3>
-
- <p>Although the block flow direction given by ‘<a
- href="#writing-mode1"><code class=property>writing-mode</code></a>’
- 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 ‘<a href="#text-orientation0"><code
- class=property>text-orientation</code></a>’ and ‘<a
- href="#writing-mode1"><code class=property>writing-mode</code></a>’,
- 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 (‘<code
- class=property>vertical-align</code>’) 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 ‘<a href="#writing-mode1"><code
- class=property>writing-mode</code></a>’ and ‘<a
- href="#text-orientation0"><code
- class=property>text-orientation</code></a>’ 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 ‘<code
- class=css>text-orientation: sideways-left</code>’</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 ‘<a
- href="#writing-mode1"><code class=property>writing-mode</code></a>’
- and ‘<a href="#text-orientation0"><code
- class=property>text-orientation</code></a>’.
-
- <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> ‘<a href="#horizontal-tb"><code
class=css>horizontal-tb</code></a>’ 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 ‘<a
href="#writing-mode1"><code class=property>writing-mode</code></a>’
- 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
‘<a href="#direction0"><code
class=property>direction</code></a>’ value of ‘<a
href="#ltr"><code class=css>ltr</code></a>’, 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
‘<a href="#direction0"><code
class=property>direction</code></a>’ value of ‘<a
href="#rtl"><code class=css>rtl</code></a>’, 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 ‘<a href="#writing-mode1"><code
+ sides of a box depends only on the ‘<a href="#writing-mode1"><code
class=property>writing-mode</code></a>’ 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 ‘<a href="#writing-mode1"><code
class=property>writing-mode</code></a>’ property but also the
‘<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 ‘<a href="#text-orientation0"><code
+ class=property>text-orientation</code></a>’ and ‘<a
+ href="#writing-mode1"><code class=property>writing-mode</code></a>’.
+ The <a href="#line-orientation"><i>line orientation</i></a> 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 <i>line orientation<i> also affects the
+ interpretation of alignment (‘<code
+ class=property>vertical-align</code>’) 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 ‘<a href="#writing-mode1"><code
+ class=property>writing-mode</code></a>’ and ‘<a
+ href="#text-orientation0"><code
+ class=property>text-orientation</code></a>’ 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 ‘<code
+ class=css>text-orientation: sideways-left</code>’</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 ‘<a
+ href="#writing-mode1"><code class=property>writing-mode</code></a>’
+ and ‘<a href="#text-orientation0"><code
+ class=property>text-orientation</code></a>’.
+
+ <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
(‘<code class=property>float</code>’, ‘<code
- class=property>clear</code>’, ‘<a href="#top"><code
- class=property>top</code></a>’, ‘<a href="#bottom"><code
- class=property>bottom</code></a>’, ‘<a href="#left"><code
- class=property>left</code></a>’, ‘<a href="#right"><code
- class=property>right</code></a>’) For inline-level elements, the
- writing mode of the <em>parent element</em> is used instead.
+ class=property>clear</code>’, ‘<code
+ class=property>top</code>’, ‘<code
+ class=property>bottom</code>’, ‘<code
+ class=property>left</code>’, ‘<code
+ class=property>right</code>’) 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 ‘<a
- href="#left"><code class=css>left</code></a>’ and ‘<a
- href="#right"><code class=css>right</code></a>’ values of the
- following properties:
+ the writing mode of the element and used to interpret the ‘<code
+ class=css>left</code>’ and ‘<code
+ class=css>right</code>’ values of the following properties:
<ul>
<li>the ‘<code class=property>text-align</code>’ 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 ‘<a href="#left"><code
- class=css>left</code></a>’ and ‘<a href="#right"><code
- class=css>right</code></a>’ values of the following properties:
+ to interpret the ‘<code class=css>left</code>’ and
+ ‘<code class=css>right</code>’ values of the following
+ properties:
<ul>
<li>the ‘<code class=property>float</code>’ property <a
@@ -2708,10 +2727,9 @@
caption before and after the table box, respectively. For tables with
‘<a href="#horizontal-tb"><code
class=css>horizontal-tb</code></a>’ writing mode, they are
- equivalent to the existing ‘<a href="#top"><code
- class=css>top</code></a>’ and ‘<a href="#bottom"><code
- class=css>bottom</code></a>’ values, respectively. <a href="#CSS21"
- rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+ equivalent to the existing ‘<code class=css>top</code>’ and
+ ‘<code class=css>bottom</code>’ values, respectively. <a
+ href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
<p class=note>For implementations that support the ‘<code
class=property>top-outside</code>’ and ‘<code
@@ -2719,31 +2737,29 @@
‘<code class=property>before-outside</code>’ and ‘<code
class=property>after-outside</code>’ will be similarly introduced.
- <p>Implementations that support the ‘<a href="#top"><code
- class=css>top</code></a>’ and ‘<a href="#bottom"><code
- class=css>bottom</code></a>’ values of the ‘<code
+ <p>Implementations that support the ‘<code
+ class=css>top</code>’ and ‘<code
+ class=css>bottom</code>’ values of the ‘<code
class=property>caption-side</code>’ property but do not support side
- captions (i.e. ‘<a href="#left"><code
- class=css>left</code></a>’ and ‘<a href="#right"><code
- class=css>right</code></a>’ captions in horizontal writing modes)
- must treat ‘<a href="#top"><code class=css>top</code></a>’ and
- ‘<a href="#bottom"><code class=css>bottom</code></a>’ as
- ‘<a href="#before"><code class=css>before</code></a>’, when
- the table is in a vertical writing mode.
+ captions (i.e. ‘<code class=css>left</code>’ and ‘<code
+ class=css>right</code>’ captions in horizontal writing modes) must
+ treat ‘<code class=css>top</code>’ and ‘<code
+ class=css>bottom</code>’ as ‘<a href="#before"><code
+ class=css>before</code></a>’, when the table is in a vertical
+ writing mode.
- <p>For implementations that do support side captions (i.e. the ‘<a
- href="#left"><code class=css>left</code></a>’ and ‘<a
- href="#right"><code class=css>right</code></a>’ values from the
- obsolete CSS 2.0 specification <a href="#CSS2"
- rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>), this module also introduces
- the ‘<a href="#start"><code class=css>start</code></a>’ and
- ‘<a href="#end"><code class=css>end</code></a>’ 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 ‘<a href="#top"><code
- class=css>top</code></a>’ and ‘<a href="#bottom"><code
- class=css>bottom</code></a>’ 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 ‘<code
+ class=css>left</code>’ and ‘<code
+ class=css>right</code>’ values from the obsolete CSS 2.0
+ specification <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a>),
+ this module also introduces the ‘<a href="#start"><code
+ class=css>start</code></a>’ and ‘<a href="#end"><code
+ class=css>end</code></a>’ 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 ‘<code class=css>top</code>’ and
+ ‘<code class=css>bottom</code>’ 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 “top” 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 UTC