W3C home > Mailing lists > Public > public-css-commits@w3.org > March 2012

csswg/css3-positioning Overview.html,1.12,1.13 Overview.src.html,1.14,1.15

From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 05 Mar 2012 17:19:56 +0000
To: public-css-commits@w3.org
Message-Id: <E1S4bZk-0003X2-NY@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv13562

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Updating before CVS check-in cut-off

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- Overview.html	3 Feb 2012 21:52:54 -0000	1.12
+++ Overview.html	5 Mar 2012 17:19:54 -0000	1.13
@@ -49,6 +49,54 @@
             {
                 font: inherit;
             }
+
+            table.lpr
+            {
+                border-collapse: collapse;
+            }
+            .lpr td, .lpr th
+            {
+                border: 1px solid;
[...1851 lines suppressed...]
+
+    <tr>
+     <th><a class=property href="#offset-start">offset-start</a>
+
+     <td>auto | &lt;length&gt; | &lt;percentage&gt;
+
+     <td>auto
+
+     <td>positioned elements
+
+     <td>no
+
+     <td>&lt;length&gt;, &lt;percentage&gt;
+
+     <td>refer to height of containing block
+
+    <tr>
      <th><a class=property href="#position">position</a>
 
      <td>static | relative | absolute | center | page | fixed

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.14
retrieving revision 1.15
diff -u -d -r1.14 -r1.15
--- Overview.src.html	3 Feb 2012 21:52:54 -0000	1.14
+++ Overview.src.html	5 Mar 2012 17:19:54 -0000	1.15
@@ -45,6 +45,54 @@
             {
                 font: inherit;
             }
+
+            table.lpr
+            {
+                border-collapse: collapse;
+            }
+            .lpr td, .lpr th
+            {
+                border: 1px solid;
+                text-align: center;
+            }
+            .lpr col
+            {
+                background: rgb(221, 238, 255);
+                border-right: 2px solid;
+                font-weight: bold;
+                padding: 0 5px;
+            }
+            .lpr div
+            {
+                font-weight: bold;
+                -moz-transform: rotate(-90deg) translatex(-0.5em);
+                -ms-transform: rotate(-90deg) translatex(-0.5em);
+                -o-transform: rotate(-90deg) translatex(-0.5em);
+                -webkit-transform: rotate(-90deg) translatex(-0.5em);
+                transform: rotate(-90deg) translatex(-0.5em);
+                width: 1.5em;
+            }
+            .lpr th:first-child
+            {
+                border: none;
+                background: white;
+            }
+            .lpr tbody td:first-child
+            {
+                font-weight: normal;
+            }
+            .lpr thead td
+            {
+                background: rgb(238, 238, 238);
+                font-weight: bold;
+                padding: 0 5px;
+                vertical-align: bottom;
+                white-space: nowrap;
+            }
+            .lpr thead tr:nth-child(2)
+            {
+                border-bottom: 2px solid;
+            }
         </style>
     </head>
     <body>
@@ -54,17 +102,19 @@
             <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
             <dl>
                 <dt>This version:</dt>
-                <dd><a href="[VERSION]">http://dev.w3.org/csswg/css3-positioning/</a></dd>
+                <dd><a href="[VERSION]">[VERSION]</a></dd>
                 <dt>Latest version:</dt>
                 <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/[SHORTNAME]/</a></dd>
                 <dt>Editor&#39;s draft:
                 <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd>
                 <dt>Previous version:</dt>
-                <dd>None</dd>
-                <dt>Editors:</dt>
-                <dd class="vcard"><span class="fn">Arron Eicholz</span>, <span class="org">Microsoft Corporation</span>
+                <dd><a href="http://www.w3.org/TR/2012/WD-css3-positioning-20120207/">http://www.w3.org/TR/2012/WD-css3-positioning-20120207/</a></dd>
                 <dt>Issues List</dt>
                 <dd><a href="http://wiki.csswg.org/spec/[SHORTNAME]/">http://wiki.csswg.org/spec/[SHORTNAME]/</a></dd>
+                <dt>Discussion:</dt>
+                <dd><a href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>with subject line "<kbd>[SHORTNAME] <var>&hellip; message topic&hellip;</var></kbd>"</dd>
+                <dt>Editors:</dt>
+                <dd class="vcard"><span class="fn">Arron Eicholz</span>, <span class="org">Microsoft Corporation</span>
             </dl>
             <!--copyright-->
             <hr title="Separator for header">
@@ -182,8 +232,12 @@
         <p>
             The position and size of an element&#39;s box(es) are sometimes computed relative to a 
             certain rectangle, called the containing block of the element. The containing block of a 
-            ''static'' or ''relative'' element is defined in the Box Model [[!CSS3BOX]]; for 
-            ''fixed'', ''absolute'', ''center'' and ''page'', it is defined as follows:
+            <span title="'position'!!''static''">''static''</span> or 
+            <span title="'position'!!''relative''">''relative''</span> element is defined in the 
+            Box Model [[!CSS3BOX]]; for <span title="'position'!!''fixed''">''fixed''</span>, 
+            <span title="'position'!!''absolute''">''absolute''</span>, 
+            <span title="'position'!!''center''">''center''</span> and 
+            <span title="'position'!!''page''">''page''</span>, it is defined as follows:
         </p>
         <ol>
             <li>
@@ -753,17 +807,20 @@
         </p>
         <!-- End section: Choosing a positioning scheme: 'position' property -->
 
-        <!--
-        <h3 id="position-root">Choosing a different containing block for positioning: 'position-reference' property</h3>
-        <p>The 'position-reference' property determines what element to use as a containing block for the current element.</p>
-        <table id="propdef-position-reference" class="propdef">
+        <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
+        <p>
+            An element is said to be <span class="index-def" title="positioned element/box">positioned</span> if its 'position' property has a value 
+            other than <span title="'position'!!''static''">''static''</span>. Positioned elements generate positioned boxes, and may be laid out according 
+            to the following four physical properties:
+        </p>
+        <table id="propdef-top" class="propdef">
             <tr>
                 <th>Name:</th>
-                <td><dfn title="'position-reference'">position-reference</dfn></td>
+                <td><dfn title="'top'">top</dfn></td>
             </tr>
             <tr>
                 <th><a href="#values">Value</a>:</th>
-                <td><var>auto</var> | <var>parent(<number>)</var> | <var>container</var> | <var>root</var> | <var>element()</var></td>
+                <td><var>auto</var> | <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var></td>
             </tr>
             <tr>
                 <th>Initial:</th>
@@ -779,11 +836,11 @@
             </tr>
             <tr>
                 <th>Animatable:</th>
-                <td>no</td>
+                <td>&lt;length&gt;, &lt;percentage&gt;</td>
             </tr>
             <tr>
                 <th>Percentages:</th>
-                <td>N/A</td>
+                <td>refer to height of <span>containing block</span></td>
             </tr>
             <tr>
                 <th>Media:</th>
@@ -791,68 +848,40 @@
             </tr>
             <tr>
                 <th>Computed&nbsp;value:</th>
-                <td>specified value, but see prose</td>
+                <td>
+                    for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>, 
+                    ''auto''. Otherwise: if specified as a '&lt;length&gt;', the corresponding absolute length; 
+                    if specified as a '&lt;percentage&gt;', the specified value; otherwise, ''auto''.
+                </td>
             </tr>
             <tr>
                 <th>Canonical&nbsp;order:</th>
                 <td><abbr title="follows order of property value definition">per grammar</abbr></td>
             </tr>
         </table>
-        <p>The values of this property have the following meanings:</p>
-        <dl>
-            <dt><dfn title="'position-reference'!!''auto''">auto</dfn></dt>
-            <dd>
-                
-            </dd>
-            <dt><dfn title="'position-reference'!!''parent''">parent(<number>)</dfn></dt>
-            <dd>
-                Use the parent element as the <span>containing block</span> for the positioned element.
-            </dd>
-            <dt><dfn title="'position-reference'!!''container''">container</dfn></dt>
-            <dd>
-                Use the container as the <span>containing box</span>.<br>
-                In the case of multi-column layout the individual column defines the containing 
-                block even though the individual column is not an actual element "block box". If 
-                not inside a multi-column element then this value computes to ''auto''.
-            </dd>
-            <dt><dfn title="'position-reference'!!''root''">root</dfn></dt>
-            <dd>
-                Use the root element (for HTML and XHTML the html element) as the <span>containing block</span> for the positioned element.
-            </dd>
-            <dt><dfn title="'position-reference'!!''nth-parent()''">nth-parent()</dfn></dt>
-            <dd>
-                
-                <p class="issue">
-                    Inserting and removing elements from the tree may cause odd behavior with 
-                    'nth-parent()'. Is this really a good concept?
-                </p>
-            </dd>
-            <dt><dfn title="'position-reference'!!''element()''">element()</dfn></dt>
-            <dd>
-                
-                <p class="issue">
-                    Inserting and removing elements from the tree may cause odd behavior with 
-                    'element()'. Is this really a good concept?
-                </p>
-            </dd>
-        </dl>
-        -->
-        <p class="issue">
-            Ideas have been raised to allow changing the positioning containing block or allowing 
-            positioning and sizing to use different containing blocks.
+        <p>
+            This property specifies how far an absolutely positioned box&#39;s top margin edge is 
+            offset below the top edge of the box&#39;s <span>containing block</span>.
         </p>
-        <!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
-
-        <h3 id="box-offsets-trbl">Box offsets: 'top', 'right', 'bottom', 'left'</h3>
         <p>
-            An element is said to be <span class="index-def" title="positioned element/box">positioned</span> if its 'position' property has a value 
-            other than <span title="'position'!!''static''">''static''</span>. Positioned elements generate positioned boxes, laid out according 
-            to four properties:
+            For relatively positioned boxes, the offset is with respect to the top edge of the box 
+            itself (i.e., the box is given a position in the <span>normal flow</span>, and then 
+            offset from that position according to this property).
         </p>
-        <table id="propdef-top" class="propdef">
+        <p>
+            For absolutely positioned and center positioned elements whose <span>containing block</span> 
+            is based on a block-level element, this property is an offset from the padding edge of 
+            that element.
+        </p>
+        <p>
+            For page positioned boxes, within paged media or regions, the offset is with respect to 
+            the top edge of the <span>initial containing block</span>; otherwise for page positioned 
+            boxes same as for absolutely positioned boxes.
+        </p>
+        <table id="propdef-right" class="propdef">
             <tr>
                 <th>Name:</th>
-                <td><dfn title="'top'">top</dfn></td>
+                <td><dfn title="'right'">right</dfn></td>
             </tr>
             <tr>
                 <th><a href="#values">Value</a>:</th>
@@ -896,25 +925,28 @@
             </tr>
         </table>
         <p>
-            This property specifies how far an absolutely positioned box&#39;s top margin edge is 
-            offset below the top edge of the box&#39;s <span>containing block</span>.
-
-            For relatively positioned boxes, the offset is with respect to the top edges of the box 
+            Similar to 'top', but specifies how far a box&#39;s right margin edge is offset to the 
+            left of the right edge of the box&#39;s <span>containing block</span>.
+        </p>
+        <p>
+            For relatively positioned boxes, the offset is with respect to the right edge of the box 
             itself (i.e., the box is given a position in the <span>normal flow</span>, and then 
-            offset from that position according to these properties).
-
-            For absolutely positioned and center positioned elements whose containing block is based 
-            on a block-level element, these properties are an offset from the padding edge of that 
-            element.
-
+            offset from that position according to this property).
+        </p>
+        <p>
+            For absolutely positioned and center positioned elements whose <span>containing block</span> 
+            is based on a block-level element, this property is an offset from the padding edge of 
+            that element.
+        </p>
+        <p>
             For page positioned boxes, within paged media or regions, the offset is with respect to 
-            the top edge of the <span>initial containing block</span>; otherwise for page positioned 
-            boxes same as for absolutely positioned boxes.
+            the right edge of the <span>initial containing block</span>; otherwise for page 
+            positioned boxes same as for absolutely positioned boxes.
         </p>
-        <table id="propdef-right" class="propdef">
+        <table id="propdef-bottom" class="propdef">
             <tr>
                 <th>Name:</th>
-                <td><dfn title="'right'">right</dfn></td>
+                <td><dfn title="'bottom'">bottom</dfn></td>
             </tr>
             <tr>
                 <th><a href="#values">Value</a>:</th>
@@ -958,25 +990,28 @@
             </tr>
         </table>
         <p>
-            Like 'top', but specifies how far a box&#39;s right margin edge is offset to the left of 
-            the right edge of the box&#39;s <span>containing block</span>.
-
-            For relatively positioned boxes, the offset is with respect to the right edge of the box 
-            itself (i.e., the box is given a position in the <span>normal flow</span>, and then 
-            offset from that position according to these properties).
-
-            For absolutely positioned and center positioned elements whose containing block is based 
-            on a block-level element, these properties are an offset from the padding edge of that 
-            element.
-
+            Similar to 'top', but specifies how far a box&#39;s bottom margin edge is offset above 
+            the bottom edge of the box&#39;s <span>containing block</span>.
+        </p>
+        <p>
+            For relatively positioned boxes, the offset is with respect to the bottom edge of the 
+            box itself (i.e., the box is given a position in the <span>normal flow</span>, and then 
+            offset from that position according to this property).
+        </p>
+        <p>
+            For absolutely positioned and center positioned elements whose <span>containing block</span> 
+            is based on a block-level element, this property is an offset from the padding edge of 
+            that element.
+        </p>
+        <p>
             For page positioned boxes, within paged media or regions, the offset is with respect to 
-            the right edge of the <span>initial containing block</span>; otherwise for page positioned 
-            boxes same as for absolutely positioned boxes.
+            the bottom edge of the <span>initial containing block</span>; otherwise for page 
+            positioned boxes same as for absolutely positioned boxes.
         </p>
-        <table id="propdef-bottom" class="propdef">
+        <table id="propdef-left" class="propdef">
             <tr>
                 <th>Name:</th>
-                <td><dfn title="'bottom'">bottom</dfn></td>
+                <td><dfn title="'left'">left</dfn></td>
             </tr>
             <tr>
                 <th><a href="#values">Value</a>:</th>
@@ -1020,25 +1055,203 @@
             </tr>
         </table>
         <p>
-            Like 'top', but specifies how far a box&#39;s bottom margin edge is offset above the 
-            bottom edge of the box&#39;s <span>containing block</span>.
+            Similar to 'top', but specifies how far a box&#39;s left margin edge is offset to the 
+            right of the left edge of the box&#39;s <span>containing block</span>.
+        </p>
+        <p>
+            For relatively positioned boxes, the offset is with respect to the left edge of the box 
+            itself (i.e., the box is given a position in the <span>normal flow</span>, and then 
+            offset from that position according to this property).
+        </p>
+        <p>
+            For absolutely positioned and center positioned elements whose <span>containing block</span> 
+            is based on a block-level element, this property is an offset from the padding edge of 
+            that element.
+        </p>
+        <p>
+            For page positioned boxes, within paged media or regions, the offset is with respect to 
+            the left edge of the <span>initial containing block</span>; otherwise for page 
+            positioned boxes same as for absolutely positioned boxes.
+        </p>
+        <p>The values for the four properties have the following meanings:</p>
+        <dl>
+            <dt><dfn class="index-def" title="'top'!!''&lt;length&gt;''|'right'!!''&lt;length&gt;''|'bottom'!!''&lt;length&gt;''|'left'!!''&lt;length&gt;''">&lt;length&gt;</dfn></dt>
+            <dd>The offset is a fixed distance from the reference edge. Negative values are allowed.</dd>
+            <dt><dfn class="index-def" title="'top'!!''&lt;percentage&gt;''|'right'!!''&lt;percentage&gt;''|'bottom'!!''&lt;percentage&gt;''|'left'!!''&lt;percentage&gt;''">&lt;percentage&gt;</dfn></dt>
+            <dd>
+                The offset is a percentage of the <span title="containing block">containing block&#39;s</span> width (for 'left' or 'right') 
+                or height (for 'top' and 'bottom'). Negative values are allowed.
+            </dd>
+            <dt><dfn class="index-def" title="'top'!!''auto''|'right'!!''auto''|'bottom'!!''auto''|'left'!!''auto''">auto</dfn></dt>
+            <dd>
+                For non-replaced elements, the effect of this value depends on which of related 
+                properties have the value ''auto'' as well. See the sections on the <a href="#abs-non-replaced-width">width</a> and <a href="#abs-non-replaced-height">height</a> 
+                of absolutely positioned, non-replaced elements for details.  For replaced elements, 
+                the effect of this value depends only on the intrinsic dimensions of the replaced 
+                content. See the sections on the <a href="#abs-replaced-width">width</a> and <a href="#abs-replaced-height">height</a> of absolutely
+                positioned, replaced elements for details.
+            </dd>
+        </dl>
+        <p class="note">
+            Note, for page positioned elements and fixed positioned elements using large values or 
+            negative values may easily move elements outside the <span>viewport</span> and make the 
+            contents unreachable through scrolling or other means. Authors should be aware that 
+            page postion and fixed position elements are always relative to the <span>initial 
+            containing block</span>.
+        </p>
+        <!-- End section: Box offsets: 'top', 'right', 'bottom', 'left'  -->
 
-            For relatively positioned boxes, the offset is with respect to the bottom edge of the 
-            box itself (i.e., the box is given a position in the <span>normal flow</span>, and then 
-            offset from that position according to these properties).
+        <h3 id="logical-box-offsets-beaso">Logical box offsets: 'offset-before', 'offset-end', 'offset-after', 'offset-start', and 'offset'</h3>
+        <p>
+            Logical offset properties allow for offseting positioned boxes based on the 'writing-mode' 
+            and 'direction' properties. When both the physical property and equivalent logical property 
+            (based on 'writing-mode' and 'direction') are specified the physical property computes 
+            to the computed value of the coresponding logical property.
+        </p>
+        <p>
+            Positioned elements generate positioned boxes, and may be laid out according to the 
+            following four logical properties taking into account the 'writing-mode' and 
+            'direction' of the <span>containing block</span>:
+        </p>
+        <table id="propdef-offset-before" class="propdef">
+            <tr>
+                <th>Name:</th>
+                <td><dfn title="'offset-before'">offset-before</dfn></td>
+            </tr>
+            <tr>
+                <th><a href="#values">Value</a>:</th>
+                <td><var>auto</var> | <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var></td>
+            </tr>
+            <tr>
+                <th>Initial:</th>
+                <td>auto</td>
+            </tr>
+            <tr>
+                <th>Applies to:</th>
+                <td>positioned elements</td>
+            </tr>
+            <tr>
+                <th>Inherited:</th>
+                <td>no</td>
+            </tr>
+            <tr>
+                <th>Animatable:</th>
+                <td>&lt;length&gt;, &lt;percentage&gt;</td>
+            </tr>
+            <tr>
+                <th>Percentages:</th>
+                <td>refer to height of <span>containing block</span></td>
+            </tr>
+            <tr>
+                <th>Media:</th>
+                <td>visual</td>
+            </tr>
+            <tr>
+                <th>Computed&nbsp;value:</th>
+                <td>for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>, ''auto''. Otherwise: if specified as a '&lt;length&gt;', the corresponding absolute length; if specified as a '&lt;percentage&gt;', the specified value; otherwise, ''auto''.</td>
+            </tr>
+            <tr>
+                <th>Canonical&nbsp;order:</th>
+                <td><abbr title="follows order of property value definition">per grammar</abbr></td>
+            </tr>
+        </table>
+        <p>
+            For an absolutely positioned box this property specifies how far the coresponding 
+            margin edge is offset from the coresponding physical reference edge of the box&#39;s 
+            <span>containing block</span>.
 
-            For absolutely positioned and center positioned elements whose containing block is based 
-            on a block-level element, these properties are an offset from the padding edge of that 
-            element.
+            The partiucular physical reference edge that is used when offsetting is based on the 
+            'writing-mode' and 'direction' properties.
+        </p>
+        <p>
+            The combination of the 'writing-mode' and 'direction' properties determine the 
+            appropriate physical reference edge for offsetting.
 
+            The table below shows logical offset properties (per 'writing-mode' and 'direction') and 
+            the physical reference edge from which the offset will occur.
+        </p>
+        <div class="figure">
+            <table id="logical-physical-relations" class="lpr">
+                <colgroup>
+                    <col>
+                    <col>
+                </colgroup>
+                <tbody>
+                    <tr>
+                        <td rowspan="4"><div>Edge</div></td>
+                        <td>top</td>
+                        <td>offset-before</td>
+                        <td>offset-before</td>
+                        <td>offset-start</td>
+                        <td>offset-end</td>
+                        <td>offset-start</td>
+                        <td>offset-end</td>
+                    </tr>
+                    <tr>
+                        <td>right</td>
+                        <td>offset-end</td>
+                        <td>offset-start</td>
+                        <td>offset-before</td>
+                        <td>offset-before</td>
+                        <td>offset-after</td>
+                        <td>offset-after</td>
+                    </tr>
+                    <tr>
+                        <td>bottom</td>
+                        <td>offset-after</td>
+                        <td>offset-after</td>
+                        <td>offset-end</td>
+                        <td>offset-start</td>
+                        <td>offset-end</td>
+                        <td>offset-start</td>
+                    </tr>
+                    <tr>
+                        <td>left</td>
+                        <td>offset-start</td>
+                        <td>offset-end</td>
+                        <td>offset-after</td>
+                        <td>offset-after</td>
+                        <td>offset-before</td>
+                        <td>offset-before</td>
+                    </tr>
+                </tbody>
+                <thead>
+                    <tr>
+                        <th colspan="2" rowspan="2"></th>
+                        <td colspan="6">'writing-mode' / 'direction'</td>
+                    </tr>
+                    <tr>
+                        <td>horizontal-tb / ltr</td>
+                        <td>horizontal-tb / rtl</td>
+                        <td>vertical-rl / ltr</td>
+                        <td>vertical-rl / rtl</td>
+                        <td>vertical-lr / ltr</td>
+                        <td>vertical-lr / rtl</td>
+                    </tr>
+                </thead>
+            </table>
+            <p class="caption">Relationship of physical offset edges and the logical properties per 'writing-mode' and 'direction'.</p>
+        </div>
+        <p>
+            For relatively positioned boxes, the offset is with respect to the property&#39;s 
+            coresponding physical reference edge of the box itself (i.e., the box is given a 
+            position in the <span>normal flow</span>, and then offset from that position according 
+            to the property).
+        </p>
+        <p>
+            For absolutely positioned and center positioned elements whose <span>containing block</span> 
+            is based on a block-level element, this property is an offset from the coresponding 
+            padding edge of that element.
+        </p>
+        <p>
             For page positioned boxes, within paged media or regions, the offset is with respect to 
-            the bottom edge of the <span>initial containing block</span>; otherwise for page 
-            positioned boxes same as for absolutely positioned boxes.
+            the property&#39;s coresponding physical edge of the <span>initial containing block</span>; 
+            otherwise for page positioned boxes same as for absolutely positioned boxes.
         </p>
-        <table id="propdef-left" class="propdef">
+        <table id="propdef-offset-end" class="propdef">
             <tr>
                 <th>Name:</th>
-                <td><dfn title="'left'">left</dfn></td>
+                <td><dfn title="'offset-end'">offset-end</dfn></td>
             </tr>
             <tr>
                 <th><a href="#values">Value</a>:</th>
@@ -1082,20 +1295,108 @@
             </tr>
         </table>
         <p>
-            Like 'top', but specifies how far a box&#39;s left margin edge is offset to the right of 
-            the left edge of the box&#39;s <span>containing block</span>.
-
-            For relatively positioned boxes, the offset is with respect to the left edge of the box 
-            itself (i.e., the box is given a position in the <span>normal flow</span>, and then 
-            offset from that position according to these properties).
-
-            For absolutely positioned and center positioned elements whose containing block is based 
-            on a block-level element, these properties are an offset from the padding edge of that 
-            element.
-
-            For page positioned boxes, within paged media or regions, the offset is with respect to 
-            the left edge of the <span>initial containing block</span>; otherwise for page 
-            positioned boxes same as for absolutely positioned boxes.
+            Similar to 'offset-before' but refer to the table, "Figure 1", for the coresponding 
+            physical reference edge that is used for offseting based on 'writing-mode' and 'direction'.
+        </p>
+        <table id="propdef-offset-after" class="propdef">
+            <tr>
+                <th>Name:</th>
+                <td><dfn title="'offset-after'">offset-after</dfn></td>
+            </tr>
+            <tr>
+                <th><a href="#values">Value</a>:</th>
+                <td><var>auto</var> | <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var></td>
+            </tr>
+            <tr>
+                <th>Initial:</th>
+                <td>auto</td>
+            </tr>
+            <tr>
+                <th>Applies to:</th>
+                <td>positioned elements</td>
+            </tr>
+            <tr>
+                <th>Inherited:</th>
+                <td>no</td>
+            </tr>
+            <tr>
+                <th>Animatable:</th>
+                <td>&lt;length&gt;, &lt;percentage&gt;</td>
+            </tr>
+            <tr>
+                <th>Percentages:</th>
+                <td>refer to height of <span>containing block</span></td>
+            </tr>
+            <tr>
+                <th>Media:</th>
+                <td>visual</td>
+            </tr>
+            <tr>
+                <th>Computed&nbsp;value:</th>
+                <td>
+                    for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>, 
+                    ''auto''. Otherwise: if specified as a '&lt;length&gt;', the corresponding absolute length; 
+                    if specified as a '&lt;percentage&gt;', the specified value; otherwise, ''auto''.
+                </td>
+            </tr>
+            <tr>
+                <th>Canonical&nbsp;order:</th>
+                <td><abbr title="follows order of property value definition">per grammar</abbr></td>
+            </tr>
+        </table>
+        <p>
+            Similar to 'offset-before' but refer to the table, "Figure 1", for the coresponding 
+            physical reference edge that is used for offseting based on 'writing-mode' and 'direction'.
+        </p>
+        <table id="propdef-offset-start" class="propdef">
+            <tr>
+                <th>Name:</th>
+                <td><dfn title="'offset-start'">offset-start</dfn></td>
+            </tr>
+            <tr>
+                <th><a href="#values">Value</a>:</th>
+                <td><var>auto</var> | <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var></td>
+            </tr>
+            <tr>
+                <th>Initial:</th>
+                <td>auto</td>
+            </tr>
+            <tr>
+                <th>Applies to:</th>
+                <td>positioned elements</td>
+            </tr>
+            <tr>
+                <th>Inherited:</th>
+                <td>no</td>
+            </tr>
+            <tr>
+                <th>Animatable:</th>
+                <td>&lt;length&gt;, &lt;percentage&gt;</td>
+            </tr>
+            <tr>
+                <th>Percentages:</th>
+                <td>refer to height of <span>containing block</span></td>
+            </tr>
+            <tr>
+                <th>Media:</th>
+                <td>visual</td>
+            </tr>
+            <tr>
+                <th>Computed&nbsp;value:</th>
+                <td>
+                    for <span title="'position'!!''relative''">'position: relative'</span>, see <span title="relative positioning">Relative Positioning</span>. For <span title="'position'!!''static''">'position: static'</span>, 
+                    ''auto''. Otherwise: if specified as a '&lt;length&gt;', the corresponding absolute length; 
+                    if specified as a '&lt;percentage&gt;', the specified value; otherwise, ''auto''.
+                </td>
+            </tr>
+            <tr>
+                <th>Canonical&nbsp;order:</th>
+                <td><abbr title="follows order of property value definition">per grammar</abbr></td>
+            </tr>
+        </table>
+        <p>
+            Similar to 'offset-before' but refer to the table, "Figure 1", for the coresponding 
+            physical reference edge that is used for offseting based on 'writing-mode' and 'direction'.
         </p>
         <p>The values for the four properties have the following meanings:</p>
         <dl>
@@ -1123,7 +1424,99 @@
             page postion and fixed position elements are always relative to the <span>initial 
             containing block</span>.
         </p>
-        <!-- End section: Box offsets: 'top', 'right', 'bottom', 'left'  -->
+        <!-- End section: Logical Box offsets: 'offset-before', 'offset-end', 'offset-after', 'offset-start', and 'offset'  -->
+
+        <h2 id="position-root">Choosing a different containing block for positioning</h2>
+        <h3 id="attachment-properties">Attachment properties: 'attachment-type', 'attachment-top', 'attachment-right', 'attachment-bottom', 'attachment-left', and 'attachment'</h3>
+        <!--
+        <h3 id="position-root">Choosing a different containing block for positioning: 'position-reference' property</h3>
+        <p>The 'position-reference' property determines what element to use as a containing block for the current element.</p>
+        <table id="propdef-position-reference" class="propdef">
+            <tr>
+                <th>Name:</th>
+                <td><dfn title="'position-reference'">attachment-top</dfn></td>
+            </tr>
+            <tr>
+                <th><a href="#values">Value</a>:</th>
+                <td><var>auto</var> | <var>parent(<number>)</var> | <var>container</var> | <var>root</var> | <var>page</var> | <var>viewport</var> | <var>element()</var></td>
+            </tr>
+            <tr>
+                <th>Initial:</th>
+                <td>auto</td>
+            </tr>
+            <tr>
+                <th>Applies to:</th>
+                <td>positioned elements</td>
+            </tr>
+            <tr>
+                <th>Inherited:</th>
+                <td>no</td>
+            </tr>
+            <tr>
+                <th>Animatable:</th>
+                <td>no</td>
+            </tr>
+            <tr>
+                <th>Percentages:</th>
+                <td>N/A</td>
+            </tr>
+            <tr>
+                <th>Media:</th>
+                <td>visual</td>
+            </tr>
+            <tr>
+                <th>Computed&nbsp;value:</th>
+                <td>specified value, but see prose</td>
+            </tr>
+            <tr>
+                <th>Canonical&nbsp;order:</th>
+                <td><abbr title="follows order of property value definition">per grammar</abbr></td>
+            </tr>
+        </table>
+        <p>The values of this property have the following meanings:</p>
+        <dl>
+            <dt><dfn title="'position-reference'!!''auto''">auto</dfn></dt>
+            <dd>
+                
+            </dd>
+            <dt><dfn title="'position-reference'!!''parent''">parent(<number>)</dfn></dt>
+            <dd>
+                Use the parent element as the <span>containing block</span> for the positioned element.
+            </dd>
+            <dt><dfn title="'position-reference'!!''container''">container</dfn></dt>
+            <dd>
+                Use the container as the <span>containing box</span>.<br>
+                In the case of multi-column layout the individual column defines the containing 
+                block even though the individual column is not an actual element "block box". If 
+                not inside a multi-column element then this value computes to ''auto''.
+            </dd>
+            <dt><dfn title="'position-reference'!!''root''">root</dfn></dt>
+            <dd>
+                Use the root element (for HTML and XHTML the html element) as the <span>containing block</span> for the positioned element.
+            </dd>
+            <dt><dfn title="'position-reference'!!''nth-parent()''">nth-parent()</dfn></dt>
+            <dd>
+                
+                <p class="issue">
+                    Inserting and removing elements from the tree may cause odd behavior with 
+                    'nth-parent()'. Is this really a good concept?
+                </p>
+            </dd>
+            <dt><dfn title="'position-reference'!!''element()''">element()</dfn></dt>
+            <dd>
+                
+                <p class="issue">
+                    Inserting and removing elements from the tree may cause odd behavior with 
+                    'element()'. Is this really a good concept?
+                </p>
+            </dd>
+        </dl>
+        -->
+        <p class="issue">
+            Ideas have been raised to allow changing the positioning containing block or allowing 
+            positioning and sizing to use different containing blocks.
+        </p>
+        <!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
 
         <h2 id="size-and-position-details">Sizing and positioning details</h2>
         <h3 id="abs-non-replaced-width">The width of absolute, page or fixed positioned, non-replaced elements</h3>
@@ -1616,33 +2009,33 @@
 #outer { position: relative; top: -12px; color: red }
 #inner { position: relative; top: 12px; color: blue }
 </code></pre>
-            </div>
-            <p>
-                Text flows normally up to the <em>outer</em> element. The <em>outer</em> text is 
-                then flowed into its <span>normal flow</span> position and dimensions at the end of line 1. Then, 
-                the inline boxes containing the text (distributed over three lines) are shifted as a 
-                unit by ''-12px'' (upwards).
-            </p>
+        </div>
+        <p>
+            Text flows normally up to the <em>outer</em> element. The <em>outer</em> text is 
+            then flowed into its <span>normal flow</span> position and dimensions at the end of line 1. Then, 
+            the inline boxes containing the text (distributed over three lines) are shifted as a 
+            unit by ''-12px'' (upwards).
+        </p>
+        <p>
+            The contents of <em>inner</em>, as a child of <em>outer</em>, would normally flow 
+            immediately after the words "of outer contents" (on line 1.5). However, the <em>inner</em> 
+            contents are themselves offset relative to the <em>outer</em> contents by ''12px'' 
+            (downwards), back to their original position on line 2.
+        </p>
+        <p class="note">
+            Note that the content following <em>outer</em> is not affected by the relative 
+            positioning of <em>outer</em>.
+        </p>
+        <div class="figure">
             <p>
-                The contents of <em>inner</em>, as a child of <em>outer</em>, would normally flow 
-                immediately after the words "of outer contents" (on line 1.5). However, the <em>inner</em> 
-                contents are themselves offset relative to the <em>outer</em> contents by ''12px'' 
-                (downwards), back to their original position on line 2.
-            </p>
-            <p class="note">
-                Note that the content following <em>outer</em> is not affected by the relative 
-                positioning of <em>outer</em>.
-            </p>
-            <div class="figure">
-                <p>
-                    <img src="images/flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
-                    <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-relative" href="images/longdesc/flow-relative-desc.html" title="Long description for relative positioning example">[D]</a></span>
-                </p>
-            </div>
-            <p class="note">
-                Note also that had the offset of <em>outer</em> been ''-24px'', the text  of <em>outer</em> 
-                and the body text would have overlapped.
+                <img src="images/flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-relative" href="images/longdesc/flow-relative-desc.html" title="Long description for relative positioning example">[D]</a></span>
             </p>
+        </div>
+        <p class="note">
+            Note also that had the offset of <em>outer</em> been ''-24px'', the text  of <em>outer</em> 
+            and the body text would have overlapped.
+        </p>
         <!-- End section: Relative positioning -->
         
         <h3 id="comp-floating">Floating a box</h3>
@@ -2253,6 +2646,7 @@
                 <ol>
                     <li>background color of element unless it is the root element.</li>
                     <li>background image of element unless it is the root element.</li>
+                    <li>column rule of the element.</li>
                     <li>border of element.</li>
                 </ol>
                 Otherwise, if the element is a block-level table:
@@ -2263,6 +2657,7 @@
                     <li>row group backgrounds (color then image).</li>
                     <li>row backgrounds (color then image).</li>
                     <li>cell backgrounds (color then image).</li>
+                    <li>cell column rule for multi-column.</li>
                     <li>all table borders (in tree order for separated borders).</li>
                 </ol>
             </li>
@@ -2276,6 +2671,7 @@
                 <ol>
                     <li>background color of element.</li>
                     <li>background image of element.</li>
+                    <li>column rule of the element.</li>
                     <li>border of element.</li>
                 </ol>
                 Otherwise, the element is a table:
@@ -2286,6 +2682,7 @@
                     <li>row group backgrounds (color then image).</li>
                     <li>row backgrounds (color then image).</li>
                     <li>cell backgrounds (color then image).</li>
+                    <li>cell column rule (multi-column).</li>
                     <li>all table borders (in tree order for separated borders).</li>
                 </ol>
             </li>
@@ -2321,9 +2718,10 @@
                                 For each box that is a child of that element, in that line box, in 
                                 tree order:
                                 <ol>
-                                    <li>background color of element. </li>
-                                    <li>background image of element</li>
-                                    <li>border of element. </li>
+                                    <li>background color of element.</li>
+                                    <li>background image of element.</li>
+                                    <li>column rule of the element.</li>
+                                    <li>border of element.</li>
                                     <li>For inline elements:
                                         <ol>
                                             <li>
Received on Monday, 5 March 2012 17:20:06 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:13 UTC