adding section on exclusion

Author: howcom

css3-gcpm/Overview.src.html

@@ -2740,9 +2740,9 @@ <h3>Floating inside and outside pages</h3>
 </div>
 
 
-<h2>Intrusion</h2>
+<h2>Exclusion</h2>
 
-<h3>Column intrusion</h3>
+<h3>Exclusion based on floats</h3>
 
 <p>A new value on 'float' is introduced to support intrusion in columns:
 
@@ -2814,9 +2814,18 @@ <h3>The 'float-offset' property</h3>
 in the same direction as it has been floated with 'float'
 
 <p>This property may move floats into other column than where they
-naturally appear. However, the float will never be pushed outside the
-content edges of the multicol element due to a settings on this
-property.
+naturally appear.
+
+<div class=example>
+<pre>img { 
+  float: right;
+  float-offset: 5px;
+}
+</pre>
+
+<img alt="sample rendering" src=14.png>
+
+</div>
 
 <p>Percentage values are computed according to this formula:
 
@@ -2826,10 +2835,31 @@ <h3>The 'float-offset' property</h3>
 </pre>
 
 
+<div class=example>
+Pull quotes are often centered in a column. In this example, the pull quote is floated to the right, and then pushed back into the center.
+
+<img width=213 src="exclusion_wrap_side_left.png">
+
+<pre>
+.pullquote {
+  float: right;
+  float-offset: 50%; /* 50% centers the box */
+}
+</pre>
+
+</div>
+
+
+<p>When negative values are set on this property, the column gap is also part of the calculation:
+
+<pre>
+  ((containing-block-width + 2 * column-gap) - float-width) * percentage 
+</pre>
+
 <div class=example>
 <pre>img { 
   float: top right;
-  float-offset: -50% 3em;
+  float-offset: -50% 3em;  /* 50% centers the box */
   width: 120%;
 }
 </pre>
@@ -2853,8 +2883,6 @@ <h3>The 'float-offset' property</h3>
 
 </div>
 
-<p class=issue>Would it make more sense to not specify the opposite direction, but the "forward" direction?
-
 
 <h3>The 'clear-side' property</h3>
 
@@ -2900,7 +2928,7 @@ <h3>The 'clear-side' property</h3>
 <dd>there may be content on either side of the float
 </dl>
 
-
+<!--
 <h3>Pull-quotes</h3>
 
 <div class=example>
@@ -2916,24 +2944,11 @@ <h3>Pull-quotes</h3>
 <pre>
 .pullquote {
   float: right;
-  float-offset: center;
+  float-offset: 50%;
 }
 </pre>
 
-<pre>
-.pullquote {
-  float: center;
-  clear-side: right;
-}
-</pre>
 
-<pre>
-.pullquote {
-  float: positioned;
-  right: 5em;
-  clear-side: right;
-}
-</pre>
 </div>
 
 <div class=example>
@@ -2949,7 +2964,7 @@ <h3>Pull-quotes</h3>
 <pre>
 .pullquote {
   float: left;
-  float-offset: 50%; /* center */
+  float-offset: 50%;
 }
 </pre>
 
@@ -2960,14 +2975,6 @@ <h3>Pull-quotes</h3>
 }
 </pre>
 
-<pre>
-.pullquote {
-  float: positioned;
-  left: 5em;
-  clear-side: left;
-}
-</pre>
-
 </div>
 
 <pre>
@@ -2977,17 +2984,19 @@ <h3>Pull-quotes</h3>
 }
 </pre>
 
-
+-->
 
 <div class=example>
 <img width=213 src="exclusion_wrap_side_both.png">
 
+<!--
 <pre>
 .pullquote {
   float: center; 
   clear-side: none;
 }
 </pre>
+-->
 
 <pre>
 .pullquote {
@@ -2997,6 +3006,7 @@ <h3>Pull-quotes</h3>
 }
 </pre>
 
+<!--
 <pre>
 .pullquote {
   float: positioned;
@@ -3010,9 +3020,67 @@ <h3>Pull-quotes</h3>
   float: center;
 }
 </pre>
+-->
+
+</div>
+
+
+<h3>Exclusions based on images</h3>
+
+<div class=example>
+<img src=car1.jpg>
+<pre>
+article {
+  padding: 4em;
+  columns: 15em;
+  background: url(nicecar.jpg);
+  exclude-threshold: 0.5;
+}  
+article h1 { column-span: all } /* Bonneville Speedway */
+</pre>  
 
+
+</div>
+
+<div class=example>
+<img src=car1.jpg>
+<pre>
+article {
+  padding: 4em;
+  columns: 6em;
+  background: url(nicecar.jpg);
+  exclude-threshold: 0.5;
+}  
+article h1 { column-span: all } /* Bonneville Speedway */
+</pre>  
+</div>
+
+<h3>Exclusions based on shapes</h3>
+
+<div class=example>
+<img src=heart1.png>
+<pre>
+article::column(1) {
+  shape-inside: circle(50%, 50%, 30%);
+}
+article::column(1) {
+  shape-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
+  color: red;
+}
+</pre>
 </div>
 
+<div class=example>
+<img src=heart2.png>
+<pre>
+article::column(1) {
+  shape-: circle(x, y, z);
+}
+article::column(1) {
+  shape-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
+}
+</pre>
+</div>
 
 
 <!--
@@ -3096,8 +3164,8 @@ <h2>Selecting columns and pages</h2>
 
 <p>Pseudo-elements are introduced to apply styling to the part of an
 element that ends up on a certain page of column of that element. The
-'column(n)' pseudo-element selects columns, and the 'page(n)'
-psedo-element select columns.
+'column(n)' pseudo-element selects columns, the 'column(n,p)' pseudo-element selects columns on certain pages, nad the 'page(n)'
+psedo-element select pages.
 
 <div class=example>
 <pre>
@@ -3106,6 +3174,7 @@ <h2>Selecting columns and pages</h2>
 div.chapter::column(2,2)         /* second column on second page */
 div.chapter::column(*,2)         /* all columns on the second page */
 div.chapter::page(2)             /* second page of the element */
+div.chapter::page(2-4)           /* select page 2, 3, and 4 */
 div.chapter::page(2)::column(2)  /* second column, but only if it appears on the second page */
 </pre>
 </div>