- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 21 Oct 2011 21:04:51 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv6663
Modified Files:
Overview.src.html
Removed Files:
overview.html
Log Message:
Adding concept of 'center' positioning proposed by Ian and Tantek
--- overview.html DELETED ---
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -d -r1.2 -r1.3
--- Overview.src.html 7 Oct 2011 21:36:19 -0000 1.2
+++ Overview.src.html 21 Oct 2011 21:04:49 -0000 1.3
@@ -1,4 +1,4 @@
-<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head profile="http://www.w3.org/2006/03/hcard">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
@@ -41,7 +41,7 @@
border: 1px solid;
padding: 0 3px;
}
- dfn
+ h2 dfn, h3 dfn
{
font: inherit;
}
@@ -586,7 +586,7 @@
</tr>
<tr>
<th>Value:</th>
- <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>page</var> | <var>fixed</var></td>
+ <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>page</var> | <var>fixed</var> | <var>center</var></td>
</tr>
<tr>
<th>Initial:</th>
@@ -651,8 +651,8 @@
The box's position (and possibly size) is specified with the 'top', 'right',
'bottom', and 'left' properties. These properties specify offsets with respect to
the box's <span>containing block</span>. Absolutely positioned boxes are taken out of the normal
- flow. This means they have no impact on the layout of later siblings. Also, though
- absolutely positioned boxes have margins, they do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
+ flow. This means they have no impact on the layout of later siblings. Though
+ absolutely positioned boxes may have margins, those margins do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
with any other margins.
</dd>
<dt><dfn title="'position'!!''page''">page</dfn></dt>
@@ -663,7 +663,7 @@
with the "absolute" model, the box's margins do not collapse with any other
margins. In the case of the print media type, the box is rendered only on the
initial page where the page positioned element originated. User agents may
- paginate the content of paged boxes.
+ paginate the content of paged boxes.
</p>
<p class="note">
Note, that CSS Regions are also <span title="initial containing block">initial containing blocks</span>, in accordance with
@@ -702,9 +702,23 @@
<p>User agents must not paginate the content of fixed boxes.</p>
<p class="note">
Note that user agents may print invisible content in other ways. See
- <a href="http://www.w3.org/TR/CSS2/page.html#outside-page-box">"Content outside the page box"</a> in chapter 13.
+ <a href="http://www.w3.org/TR/CSS2/page.html#outside-page-box">"Content outside the page box"</a>.
</p>
</dd>
+ <dt><dfn title="'position'!!''center''">center</dfn></dt>
+ <dd>
+ The box's position (and possibly size) is specified with the 'top', 'right',
+ 'bottom', and 'left' properties. The box is vertically and horizontally centered
+ within its <span>containing block</span> and these properties specify offsets with respect to
+ the box's centered position withing its <span>containing block</span>. Center
+ positioned boxes are taken out of the normal flow. This means they have no impact on
+ the layout of later siblings. Though center positioned boxes may have margins, those
+ margins do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
+ with any other margins.
+ <div class="issue">
+ Need a better, more clear, defintion for center.
+ </div>
+ </dd>
</dl>
<p>
In previous versions of CSS user agents may treat position <span title="'position'!!''fixed''">''fixed''</span> as <span title="'position'!!''static''">''static''</span> on
@@ -714,6 +728,81 @@
</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">
+ <tr>
+ <th>Name:</th>
+ <td><dfn title="'position-reference'">position-reference</dfn></td>
+ </tr>
+ <tr>
+ <th>Value:</th>
+ <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>viewport</var> | <var>nth-parent()</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>Percentages:</th>
+ <td>N/A</td>
+ </tr>
+ <tr>
+ <th>Media:</th>
+ <td>visual</td>
+ </tr>
+ <tr>
+ <th>Computed value:</th>
+ <td>specified value</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</dfn></dt>
+ <dd>
+
+ </dd>
+ <dt><dfn title="'position-reference'!!''container''">container</dfn></dt>
+ <dd>
+
+ </dd>
+ <dt><dfn title="'position-reference'!!''root''">root</dfn></dt>
+ <dd>
+
+ </dd>
+ <dt><dfn title="'position-reference'!!''viewport''">viewport</dfn></dt>
+ <dd>
+
+ </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>
+ </dl>
+ -->
+ <p class="issue">
+ Ideas have been raised to allow changing the positioning containing block or allowing
+ positioining and sizing to use different containing blocks.
+ </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
@@ -930,11 +1019,11 @@
<!-- End section: Box offsets: 'top', 'right', 'bottom', 'left' -->
<h2 id="size-and-position-details">Sizing and positioning details</h2>
- <h3 id="width-of-absolute-non-replaced-element">The width of absolute, page or fixed positioned, non-replaced element</h3>
+ <h3 id="width-of-absolute-non-replaced-elements">The width of absolute, page or fixed positioned, non-replaced element</h3>
<p>The constraint that determines the used values for these elements is:</p>
<p>
<code>
- 'left' + 'margin-left' + <span>'border-left-width'</span> + <span>'padding-left'</span> + 'width' +
+ 'left' + <span>'margin-left'</span> + <span>'border-left-width'</span> + <span>'padding-left'</span> + 'width' +
<span>'padding-right'</span> + <span>'border-right-width'</span> + <span>'margin-right'</span> +
'right' = <span>width of containing block</span>
</code>
@@ -981,7 +1070,129 @@
</ol>
<!-- End section: The width of absolute, page or fixed positioned, non-replaced element -->
- <h3 id="width-of-absolute-replaced-element">The width of absolute, page or fixed positioned, replaced element</h3>
+ <h3 id="width-of-center-positioned-non-replaced-elements">The width of a center positioned, non-replaced element</h3>
+ <p>The constraint that determines the used values for these elements is:</p>
+ <p>
+ <code>
+ 'left' + <span>'margin-left'</span> + <span>'border-left-width'</span> + <span>'padding-left'</span> +
+ 'width' + <span>'padding-right'</span> + <span>'border-right-width'</span> + <span>'margin-right'</span> +
+ 'right' = <span>width of containing block</span>
+ </code>
+ </p>
+ <p>First set any ''auto'' values for 'margin-left' and 'margin-right' to ''0''.</p>
+ <p>If any of 'left' or 'right' are ''auto'', set them to ''50%''.</p>
+ <p>If neither 'left' nor 'right' are set to a percentage:</p>
+ <ul>
+ <li>If 'width' is ''auto'', 'width' is determined using the equation above.</li>
+ <li>
+ Otherwise, if 'direction' is ''ltr'' (''rtl''), the values are over-constrained.
+ Ignore the value for 'right' ('left'). Then solve for 'right' ('left').
+ </li>
+ </ul>
+ <p>Otherwise, if both 'left' and 'right' are set to a percentage:</p>
+ <ul>
+ <li>
+ If 'width' is ''auto'', then the width is shrink-to-fit. If this results in an
+ outer width wider than the containing block width, then set the width so that the
+ outer width is the containing block width.
+ </li>
+ <li>
+ If 'direction' is ''ltr'' set 'left' and 'right' as follows:
+ <p>
+ <code>
+ computed value of 'left' = 'left' percentage * width of containing block -
+ 'left' percentage * (<span>'margin-left'</span> + <span>'border-left-width'</span>
+ + <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> +
+ <span>'border-right-width'</span> + <span>'margin-right'</span>)
+ </code>
+ </p>
+ <p>
+ <code>
+ computed value of 'right' = width of containing block - computed value of 'left'
+ - <span>'margin-left'</span> - <span>'border-left-width'</span> -
+ <span>'padding-left'</span> - 'width' - <span>'padding-right'</span> -
+ <span>'border-right-width'</span> - <span>'margin-right'</span>
+ </code>
+ </p>
+ </li>
+ <li>
+ Otherwise, if 'direction' is ''rtl'' set 'left' and 'right' as follows:
+ <p>
+ <code>
+ computed value of 'right' = 'right' percentage * width of containing block -
+ 'right' percentage * (<span>'margin-left'</span> +
+ <span>'border-left-width'</span> + <span>'padding-left'</span> + 'width' +
+ <span>'padding-right'</span> + <span>'border-right-width'</span> +
+ <span>'margin-right'</span>)
+ </code>
+ </p>
+ <p>
+ <code>
+ computed value of 'left' = width of containing block - computed value of
+ 'right' - <span>'margin-left'</span> - <span>'border-left-width'</span> -
+ <span>'padding-left'</span> - 'width' - <span>'padding-right'</span> -
+ <span>'border-right-width'</span> - <span>'margin-right'</span>
+ </code>
+ </p>
+ </li>
+ </ul>
+ <p>Otherwise, if 'left' is set to a percentage, 'right' is a length:</p>
+ <ul>
+ <li>
+ If 'width' is not ''auto'', the values are over constrained. Ignore 'left'
+ (regardless of 'direction') and use the equality at the beginning of this section to
+ derive the computed value for 'width'.
+ </li>
+ <li>
+ Otherwise, 'width' is ''auto''. Derive 'left' and 'width' under the following constraints:
+ <p>
+ <code>
+ computed value of 'left' = 'left' percentage * width of containing block -
+ 'left' percentage * (<span>'margin-left'</span> + <span>'border-left-width'</span>
+ + <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> +
+ <span>'border-right-width'</span> + <span>'margin-right'</span>)
+ </code>
+ </p>
+ <p>
+ <code>
+ 'left' + (<span>'margin-left'</span> + <span>'border-left-width'</span> +
+ <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> +
+ <span>'border-right-width'</span> + <span>'margin-right'</span>) + 'right' =
+ width of containing block
+ </code>
+ </p>
+ </li>
+ </ul>
+ <p>otherwise, 'right' is a percentage and 'left' is a length:</p>
+ <ul>
+ <li>
+ If 'width' is not ''auto'', the values are over constrained. Ignore 'right'
+ (regardless of 'direction') and use the equality at the beginning of this section to
+ derive the computed value for 'width'.
+ </li>
+ <li>
+ Otherwise, 'width' is ''auto''. Derive 'right' and 'width' under the following constraints:
+ <p>
+ <code>
+ computed value of 'right' = 'right' percentage * width of containing block -
+ 'right' percentage * (<span>'margin-left'</span> + <span>'border-left'</span>
+ + <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> +
+ <span>'border-right'</span> + <span>'margin-right'</span>)
+ </code>
+ </p>
+ <p>
+ <code>
+ 'left' + (<span>'margin-left'</span> + <span>'border-left'</span> +
+ <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> +
+ <span>'border-right'</span> + <span>'margin-right'</span>) + 'right' =
+ width of containing block
+ </code>
+ </p>
+ </li>
+ </ul>
+ <!-- End section: The width of a center positioned, non-replaced element -->
+
+ <h3 id="width-of-absolute-replaced-elements">The width of absolute, page or fixed positioned, replaced element</h3>
<p>
If 'height' and 'width' both have computed values of ''auto'' and the element also has an
intrinsic width, then that intrinsic width is the used value of 'width'.
@@ -1045,6 +1256,11 @@
</ol>
<!-- End section: The width of absolute, page or fixed positioned, replaced element -->
+ <h3 id="width-of-center-replaced-elements">The width of a 'center' positioned, replaced element</h3>
+ <p></p>
+ <!-- End section: The width of a 'center' positioned, replaced element -->
+
+
<h3 id="height-of-absolute-non-replaced-elements">The height of absolute, page or fixed positioned, non-replaced element</h3>
<p>
For absolutely positioned elements, the used values of the vertical dimensions must
@@ -1099,6 +1315,106 @@
</ol>
<!-- End section: The height of absolute, page or fixed positioned, non-replaced element -->
+ <h3 id="height-of-center-non-replaced-elements">The height of a center positioned, non-replaced element</h3>
+ <p>The constraint that determines the used values for these elements is:</p>
+ <p>
+ <code>
+ 'top' + <span>'margin-top'</span> + <span>'border-top-width'</span> + <span>'padding-top'</span> +
+ 'height' + <span>'padding-bottom'</span> + <span>'border-bottom-width'</span> + <span>'margin-bottom'</span> +
+ 'bottom' = <span>height of containing block</span>
+ </code>
+ </p>
+ <p>First set any ''auto'' values for 'margin-top' and 'margin-bottom' to ''0''.</p>
+ <p>If any of 'top' or 'bottom' are ''auto'', set them to ''50%''.</p>
+ <p>If neither 'top' nor 'bottom' are set to a percentage:</p>
+ <ul>
+ <li>If 'height' is ''auto'', 'height' is determined using the equation above.</li>
+ <li>
+ Otherwise, the values are over-constrained. Ignore the value for 'bottom'. Then
+ solve for 'bottom'.
+ </li>
+ </ul>
+ <p>Otherwise, if both 'top' and 'bottom' are set to a percentage:</p>
+ <ul>
+ <li>
+ If 'height' is ''auto'', then the height is shrink-to-fit. If this results in an
+ outer height taller than the containing block height, then set the height so that the
+ outer height is the containing block height.
+ </li>
+ <li>
+ Set 'top' and 'bottom' as follows:
+ <p>
+ <code>
+ computed value of 'top' = 'top' percentage * height of containing block -
+ 'top' percentage * (<span>'margin-top'</span> + <span>'border-top-width'</span>
+ + <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> +
+ <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>)
+ </code>
+ </p>
+ <p>
+ <code>
+ computed value of 'bottom' = height of containing block - computed value of 'top'
+ - <span>'margin-top'</span> - <span>'border-top-width'</span> -
+ <span>'padding-top'</span> - 'height' - <span>'padding-bottom'</span> -
+ <span>'border-bottom-width'</span> - <span>'margin-bottom'</span>
+ </code>
+ </p>
+ </li>
+ </ul>
+ <p>Otherwise, if 'top' is set to a percentage and 'bottom' is a length:</p>
+ <ul>
+ <li>
+ If 'height' is not ''auto'', the values are over constrained. Ignore 'top' and use
+ the equality at the beginning of this section to derive the computed value for 'height'.
+ </li>
+ <li>
+ Otherwise, 'height' is ''auto''. Derive 'top' and 'height' under the following constraints:
+ <p>
+ <code>
+ computed value of 'top' = 'top' percentage * height of containing block -
+ 'top' percentage * (<span>'margin-top'</span> + <span>'border-top-width'</span>
+ + <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> +
+ <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>)
+ </code>
+ </p>
+ <p>
+ <code>
+ 'top' + (<span>'margin-top'</span> + <span>'border-top-width'</span> +
+ <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> +
+ <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>) + 'right' =
+ height of containing block
+ </code>
+ </p>
+ </li>
+ </ul>
+ <p>otherwise, 'bottom' is a percentage and 'top' is a length:</p>
+ <ul>
+ <li>
+ If 'height' is not ''auto'', the values are over constrained. Ignore 'bottom' and
+ use the equality at the beginning of this section to derive the computed value for 'height'.
+ </li>
+ <li>
+ Otherwise, 'height' is ''auto''. Derive 'bottom' and 'height' under the following constraints:
+ <p>
+ <code>
+ computed value of 'bottom' = 'bottom' percentage * height of containing block -
+ 'bottom' percentage * (<span>'margin-top'</span> + <span>'border-top-width'</span>
+ + <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> +
+ <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>)
+ </code>
+ </p>
+ <p>
+ <code>
+ 'top' + (<span>'margin-top'</span> + <span>'border-top-width'</span> +
+ <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> +
+ <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>) + 'bottom' =
+ height of containing block
+ </code>
+ </p>
+ </li>
+ </ul>
+ <!-- End section: The height of a 'center' positioned, non-replaced element -->
+
<h3 id="height-of-absolute-replaced-elements">The height of absolute, page or fixed positioned, replaced element</h3>
<p>
If 'height' and 'width' both have computed values of ''auto'' and the element also has an
@@ -1141,6 +1457,10 @@
</ol>
<!-- End section: The height of absolute, page or fixed positioned, replaced element -->
+ <h3 id="height-of-center-replaced-elements">The height of a center positioned, replaced element</h3>
+ <p></p>
+ <!-- End section: The height of a 'center' positioned, replaced element -->
+
<h3 id="auto-height-for-block-formatting-context-roots">'Auto' heights for block formatting context roots</h3>
<p>
In certain cases (see, e.g., <a href="#height-of-absolute-non-replaced-elements">The height of absolute, page or fixed positioned, non-replaced element</a> above),
@@ -1169,7 +1489,7 @@
<!-- End section: 'Auto' heights for block formatting context roots -->
<!-- End section: Sizing and positioning details -->
- <h2 id="relationship-bet-display-position-float">Relationships between 'display', 'position', and 'float'</h2>
+ <h2 id="relationship-between-display-position-float">Relationships between 'display', 'position', and 'float'</h2>
<p>
The three properties that affect box generation and layout — 'display',
'position', and 'float' — interact as follows:
@@ -1187,13 +1507,6 @@
'left' properties and the box's <span>containing block</span>.
</li>
<li>
- Otherwise, if 'position' has the value <span title="'position'!!''absolute''">''absolute''</span>, <span title="'position'!!''page''">''page''</span> or <span title="'position'!!''fixed''">''fixed''</span>, and the value
- of 'float' is not ''none'', the box is absolutely positioned and <span title="floats">floated</span>. The
- 'display' is set according to the table below. Positioning of the box will
- determined by the 'top', 'right', 'bottom' and 'left' properties and the box's
- <span>containing block</span>.
- </li>
- <li>
Otherwise, if 'float' is other than ''none'', the box is <span title="floats">floated</span> and 'display' is set
according to the table below.
</li>
Received on Friday, 21 October 2011 21:04:53 UTC