- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 21 Sep 2011 18:06:31 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-gcpm In directory hutz:/tmp/cvs-serv27666 Modified Files: Overview.src.html Log Message: adding alternative float model Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v retrieving revision 1.115 retrieving revision 1.116 diff -u -d -r1.115 -r1.116 --- Overview.src.html 21 Sep 2011 13:23:53 -0000 1.115 +++ Overview.src.html 21 Sep 2011 18:06:29 -0000 1.116 @@ -2459,39 +2459,134 @@ </div> +<h2>Page floats (mk2)</h2> +<p>Images and figures are sometimes displayed at the top or bottom of +pages and columns. This specificaton adds new keywords on the 'float' +property which, in combination with integer values on 'column-span' +and the new 'float-modifier', provides support for common paper-based +layouts. -<h2>Page floats</h2> +<p>Care has been take to avoid being able to specify layouts +that are hard to achieve, or that can be achieved in other ways. -<p>Images and figures are sometimes displayed at the top or bottom of -pages. Also, an element may be moved to the next page or not displayed -at all if there is not enough room on its native page. These types of -floats are called "page floats" in this specification. +<p>Four new keywords on 'float' have been added: +<dl> +<dt>top +<dd>the box is floated to the top of the natural column +<dt>bottom +<dd>the box is floated to the bottom of the natural column +<dt>top-corner +<dd>the box is floated to the top of the last column in the inline direction that fits inside the multicol element on the same page. I.e., overflow columns are not considered. +<dt>bottom-corner +<dd>similar to 'top-corner', exept the box is floated to the bottom +<dt>snap +<dd>similar to 'top' if the box is naturally near the top; similar to 'bottom' if the box is naturally near the bottom. The 'widows'/'orphans' properties are consulted to determine if the box is near the top/bottom. +</dl> -<p>To support page floats, the <span class=property>'float'</span> -property is extended with several new values: +<div class=example> +Float figure to top of natural column, being as wide as the column: +<pre> +.figure { float: top; width: 100% } +</pre> -<!-- +<img src=7b.png> -<p>Further, the 'float' property is extended to accept a -comma-separated list of sets of keywords. If the first set of keywords -cannot be honored with the element remaining on the current page, the -second set of keywords will determine how the element is floated. +</div> -<div class="example"> +<div class=example> +Float figure to top of natural column, spanning all columns: +<pre> +.figure { float: top; column-span: all; width: 100% } +</pre> -<p>In this example, the element will be floated to the top of the next page unless it fits on the current page. +</div> + +<div class=example> +Float figure to top/bottom of the last column of the multicol element on that page, again being as side as the column: <pre> -.figure { - float: none, top next page; -} +.figure { float: top-corner; width: 100% } </pre> </div> ---> +<p>The 'column-span' property is extended with integer values so that elements can span several columns. If the specified integer value is equal to, or larger than the number of columns in the multicol element, the number of columns spanned will be the same as if 'column-span: all' had been specified. + +<div class=example> +In combination with 'column-span', Float figure to top/bottom of the last column of the multicol element on that page, again being as side as the column: +<pre> +.figure { float: top-corner; column-span: 2; width: 100% } +</pre> +</div> +<p>Boxes floated with these keywords are positiond wrt. the padding +edge (and not the content edge) of the multicol element. This way, +layouts that push (say) images to the edge of the screen can be +achieved. + + +<h3>Combining keywords</h3> + +<p class=issue>Currently, only one + + +<h3>Float modifiers</h3> + +<p>A new property, 'float-adjust', is introduced with these values: + +<dl> +<dt>next-page + +<dd>In paged media, float box to the next page. The first column of the multicol element on the next page is considered to be the natural column. + +<dt>unless-room + +<dd>Only float the box if keeping it in its natural position would have yielded a column or page break + +<dt>intrude + +<dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect. + + +</dl> + +<div class=example> + +<pre> +.figure { float: top-corner; float-adjust: next-page } +</div> + +</div> + +<p class=issue>it may be easier to allow 'next-page' and ' + +<h2>Floating inside and outside</h2> + +<p>Two allow content to flow to the inside and outside of a page, these keywords are added to the 'float' property: + +<dl> + <dt>inside + + <dd>On a right page, this value is synonymous with 'left'. On a left page, this value is synonymous with 'right'. + + <dt>outside + + <dd>On a left page, this value is synonymous with 'left', On a right page, this value is synonymous with 'right'. + +</dl> + + +<h2>Page floats (mk1)</h2> + +<p>Images and figures are sometimes displayed at the top or bottom of +pages. Also, an element may be moved to the next page or not displayed +at all if there is not enough room on its native page. These types of +floats are called "page floats" in this specification. + + +<p>To support page floats, the <span class=property>'float'</span> +property is extended with several new values: <dl> <dt>inside
Received on Wednesday, 21 September 2011 18:06:36 UTC