W3C home > Mailing lists > Public > public-css-commits@w3.org > December 2011

csswg/css3-gcpm Overview.src.html,1.183,1.184

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 23 Dec 2011 21:29:28 +0000
To: public-css-commits@w3.org
Message-Id: <E1ReCgC-0002Il-SK@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv8829

Modified Files:
	Overview.src.html 
Log Message:
adding section on exclusion

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.183
retrieving revision 1.184
diff -u -d -r1.183 -r1.184
--- Overview.src.html	23 Dec 2011 20:12:40 -0000	1.183
+++ Overview.src.html	23 Dec 2011 21:29:26 -0000	1.184
@@ -2740,9 +2740,9 @@
 </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 @@
 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:
 
@@ -2827,9 +2836,30 @@
 
 
 <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 @@
 
 </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 @@
 <dd>there may be content on either side of the float
 </dl>
 
-
+<!--
 <h3>Pull-quotes</h3>
 
 <div class=example>
@@ -2916,24 +2944,11 @@
 <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 @@
 <pre>
 .pullquote {
   float: left;
-  float-offset: 50%; /* center */
+  float-offset: 50%;
 }
 </pre>
 
@@ -2960,14 +2975,6 @@
 }
 </pre>
 
-<pre>
-.pullquote {
-  float: positioned;
-  left: 5em;
-  clear-side: left;
-}
-</pre>
-
 </div>
 
 <pre>
@@ -2977,17 +2984,19 @@
 }
 </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 @@
 }
 </pre>
 
+<!--
 <pre>
 .pullquote {
   float: positioned;
@@ -3010,10 +3020,68 @@
   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>
+
 
 <!--
 <h2>Aligning baselines in multi-column layouts</h2>
@@ -3096,8 +3164,8 @@
 
 <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 @@
 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>
Received on Friday, 23 December 2011 21:29:30 UTC

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