adding examples for snap

Author: howcome

css-gcpm/Overview.src.html

@@ -84,13 +84,7 @@ <h2 class="no-num no-toc">Status of this document</h2>
 
 <!--end-status-->
 
-<p>This WD contains functionality that the CSS WG finds interesting
-and useful. In general, the earlier a feature appears in this draft,
-the more stable it is. Significant changes in functionality and syntax
-must be expected from <a href="#paged-presentations">paged
-presentations</a> and onwards. Also, functionality described in this
-module may be moved to other modules. Since the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">previous WD</a>, hyphenation has been moved to <a href="http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation">css3-text</a> and the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-super-decimal-list-style-type">super-decimal</a> list-style-type value has been moved to <a href="http://www.w3.org/TR/2011/WD-css3-lists-20110524/#super-decimal">css3-lists</a>. <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#named-counter-styles">Named counter styles</a> and the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-symbols-list-style-type">symbols()</a> list-style-type value should also appear in a future css3-lists WD.
-
+<p>This WD contains functionality that the CSS WG finds interesting and useful. In general, the earlier a feature appears in this draft, the more stable it is. Significant changes in functionality and syntax must be expected from <a href="#paged-presentations">paged presentations</a> and onwards. Also, functionality described in this module may be moved to other modules. Since the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">previous WD</a>, hyphenation has been moved to <a href="http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation">css3-text</a> and the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-super-decimal-list-style-type">super-decimal</a> list-style-type value has been moved to <a href="http://www.w3.org/TR/2011/WD-css3-lists-20110524/#super-decimal">css3-lists</a>. <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#named-counter-styles">Named counter styles</a> and the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-symbols-list-style-type">symbols()</a> list-style-type value should also appear in a future css3-lists WD.
 
 <h2 class="no-num no-toc"><a name="contents">Table of contents</a></h2>
 
@@ -2732,53 +2726,90 @@ <h3>Floating to the top/bottom: top, bottom, snap</h3>
 </div>
 
 <div class=example>
-<p>Float figure to top of the natural column, spanning all columns:
+<p>In this example, a figure naturally appears close to a column break. There is not enough space for the figure in the first column, and it is therefore placed in the second column, leaving white space at the bottom of the first column.</p>
+
+<img alt="sample rendering" src=23.png>
+
+<p>To avoid the white space, the image can be floated to the nearest edge (in the block direction):</p>
+
 <pre>
-.figure { float: top; column-span: all }
+.figure { float: snap }
 </pre>
 
-<img alt="sample redering" src=15.png>
+<p>In this example, the figure is already at the nearest edge, so it does not move. However, page floats allow subsequent content to be displayed before the page float and the white space can therefore be filled:</p>
 
+<img alt="sample rendering" src=7.png>
 </div>
 
 <div class=example>
-<p>In this example, tables will snap to the top/bottom if the top/bottom of the border box is closer than '3em' from the top/bottom of the page/column.
+
+<p>In this example, two figures naturally appear in the text flow:</p>
+
+<img alt="sample rendering" src=20.png>
+
+<p>A typographer would typically try to avoid single lines of text above/below figures, which can be achieved with:
 
 <pre>
-table { float: snap }
-table { float: snap(3em) }
-table { float: snap(3em, bottom) }
-table { float: snap(3em 2em, bottom) }
+div.figure { float: snap(1.5em) }
 </pre>
+
+<p>The length value specifies the reach of the snap function; in this example the second figure is affected, but not the first.
 </div>
 
+<div class=example>
 
-<p class=issue>Do numeric values, to represent line numbers, make sense, like for orphans/widows?
+<p>In this example, two figures naturally appear in the text flow:</p>
 
+<img alt="sample rendering" src=20.png>
 
-<h3>Spanning columns</h3>
+<p>To make the figures snap to the nearest edges, this code can be applied:
+
+<pre>
+div.figure { float: snap(2.5em) }
+</pre>
+
+<p>The resultant rendering is:</p>
+
+<img alt="sample rendering" src=22.png>
+
+</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>
-<p>Float figure to top of the last column of the multicol element on the current page:
+
+<p>Float figure to top of the natural column, spanning all columns:
+
 <pre>
-.figure { float: top; float-defer-column: last }
+.figure { float: top; column-span: all }
 </pre>
-<img alt="sample rendering" src=6.png>
+
+<img alt="sample redering" src=15.png>
+
 </div>
 
 
 <div class=example>
-<p>In combination with 'column-span', the figure is floated to the top corner of the multicol element on that page:
+<p>In this example, tables will snap to the top/bottom if the top/bottom of the border box is closer than '3em' from the top/bottom of the page/column.
+
 <pre>
-.figure { float: top; column-span: 2; float-defer-column: last; width: 100% }
+table { float: snap }
+table { float: snap(3em) }
+table { float: snap(3em, bottom) }
+table { float: snap(3em 2em, bottom) }
 </pre>
-<img alt="sample rendering" src=8.png>
 </div>
 
 
+<p class=issue>Do numeric values, to represent line numbers, make sense, like for orphans/widows?
+
+
+<h3>Spanning columns</h3>
+
+<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>
 <p>In this example, a commonly used newspaper layout is easily described:
 <pre>
@@ -2862,7 +2893,10 @@ <h4>'float-defer-page'</h4>
 
 <dt>&lt;integer>
 
-<dd>A positive integer value indicates that the page float should be displayed in a following column/page. 
+<dd>A positive integer value indicates that the page float should be displayed in a following column/page. A negative integer value indicates that the page float should be displayed in a following column/page, counted from the last column/page. When counting columns, the starting point is the last column of the multicol element on the natural page. When counting pages, the starting point is the last page of the multicol element. 
+
+</dl>
+
 
 <div class=example>
 <p>Float figure to the top of the column that follows the natural column:
@@ -2873,8 +2907,6 @@ <h4>'float-defer-page'</h4>
 </pre>
 </div>
 
-<dd>A negative integer value indicates that the page float should be displayed in a following column/page, counted from the last column/page. When counting columns, the starting point is the last column of the multicol element on the natural page. When counting pages, the starting point is the last page of the multicol element. 
-
 <div class=example>
 <p>Float figure to the top of the next-to-last column:
 
@@ -2884,6 +2916,23 @@ <h4>'float-defer-page'</h4>
 <img alt="sample rendering" src=7.png>
 </div>
 
+<div class=example>
+<p>Float figure to top of the last column of the multicol element on the current page:
+<pre>
+.figure { float: top; float-defer-column: last }
+</pre>
+<img alt="sample rendering" src=6.png>
+</div>
+
+
+<div class=example>
+<p>In combination with 'column-span', the figure is floated to the top corner of the multicol element on that page:
+<pre>
+.figure { float: top; column-span: 2; float-defer-column: last; width: 100% }
+</pre>
+<img alt="sample rendering" src=8.png>
+</div>
+
 
 <div class=example>
 <p>Float figure to the top of the second column, spanning two columns:
@@ -2972,7 +3021,6 @@ <h4>'float-defer-page'</h4>
 <dt>none
 <dd>The page floats should appear in their natural column/page, if possible. 
 
-</dl>
 
 <p>Zero is not a legal value.