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

csswg/css3-gcpm Overview.html,1.178,1.179

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

Modified Files:
	Overview.html 
Log Message:
x

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.html,v
retrieving revision 1.178
retrieving revision 1.179
diff -u -d -r1.178 -r1.179
--- Overview.html	17 Nov 2011 14:03:12 -0000	1.178
+++ Overview.html	23 Dec 2011 21:29:35 -0000	1.179
@@ -13,6 +13,7 @@
 
   <style type="text/css">
 .example img { display: block }
+.example { background: #ddd }
 body { line-height: 1.3 }
 </style>
 
@@ -23,13 +24,13 @@
 
    <h1>CSS Generated Content for Paged Media Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 17 November 2011</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 23 December 2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111117/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111117/</a>
+     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111223/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111223/</a>
 
     <dt>Latest version:
 
@@ -222,25 +223,38 @@
 
      <li><a href="#floating-inside-and-outside-pages"><span class=secno>12.2.
       </span>Floating inside and outside pages</a>
+    </ul>
 
-     <li><a href="#multi-column-float-intrusion"><span class=secno>12.3.
-      </span>Multi-column float intrusion</a>
+   <li><a href="#exclusion"><span class=secno>13. </span>Exclusion</a>
+    <ul class=toc>
+     <li><a href="#exclusion-based-on-floats"><span class=secno>13.1.
+      </span>Exclusion based on floats</a>
 
-     <li><a href="#the-float-offset-property"><span class=secno>12.4.
+     <li><a href="#the-float-offset-property"><span class=secno>13.2.
       </span>The &lsquo;<code class=property>float-offset</code>&rsquo;
       property</a>
+
+     <li><a href="#the-clear-side-property"><span class=secno>13.3.
+      </span>The &lsquo;<code class=property>clear-side</code>&rsquo;
+      property</a>
+
+     <li><a href="#exclusions-based-on-images"><span class=secno>13.4.
+      </span>Exclusions based on images</a>
+
+     <li><a href="#exclusions-based-on-shapes"><span class=secno>13.5.
+      </span>Exclusions based on shapes</a>
     </ul>
 
-   <li><a href="#the-first-page-pseudo-element"><span class=secno>13.
+   <li><a href="#the-first-page-pseudo-element"><span class=secno>14.
     </span>The &lsquo;<code class=property>first-page</code>&rsquo;
     pseudo-element</a>
 
-   <li><a href="#selecting-columns-and-pages"><span class=secno>14.
+   <li><a href="#selecting-columns-and-pages"><span class=secno>15.
     </span>Selecting columns and pages</a>
 
-   <li><a href="#conformance"><span class=secno>15. </span>Conformance</a>
+   <li><a href="#conformance"><span class=secno>16. </span>Conformance</a>
 
-   <li><a href="#appendix-a-default-style-sheet"><span class=secno>16.
+   <li><a href="#appendix-a-default-style-sheet"><span class=secno>17.
     </span>Appendix A: Default style sheet</a>
 
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
@@ -2941,22 +2955,7 @@
    class=property>float</code>&rsquo; property which, in combination with
    integer values on &lsquo;<code class=property>column-span</code>&rsquo;
    and the new &lsquo;<code class=property>float-modifier</code>&rsquo;,
-   provides support for common paper-based layouts. <!--
-<p>(A few words about the difference between this proposa, and the one
-sketched in the next section: Care has now been taken to avoid layouts
-that are hard to achieve, or that can be achieved in other ways. For
-example, by saying 'top-corner' instead of 'top left' or 'top right',
-it becomes impossible to specify a layout where one has to replace
-already laid-out content. Compared to the mk1 float model, mk2 does
-not allow one to explicityly set the containing block of the float;
-the CB is the column or the multicol element (depending on which
-keyword in use). It is therefore impossible to float something to the
-top of the page. However, given that 'column-span' now is widely
-supported, a different strategy can be used: make the root element a
-multicol element, and float the box to the top. Thereby it ends up at
-the top of hte page.)
--->
-   
+   provides support for common paper-based layouts.
 
   <p>Four new keywords on &lsquo;<code class=property>float</code>&rsquo;
    have been added:
@@ -3133,8 +3132,10 @@
 </pre>
   </div>
 
-  <h3 id=multi-column-float-intrusion><span class=secno>12.3.
-   </span>Multi-column float intrusion</h3>
+  <h2 id=exclusion><span class=secno>13. </span>Exclusion</h2>
+
+  <h3 id=exclusion-based-on-floats><span class=secno>13.1. </span>Exclusion
+   based on floats</h3>
 
   <p>A new value on &lsquo;<code class=property>float</code>&rsquo; is
    introduced to support intrusion in columns:
@@ -3166,7 +3167,7 @@
     alt="sample rendering" src=1.png>
   </div>
 
-  <h3 id=the-float-offset-property><span class=secno>12.4. </span>The
+  <h3 id=the-float-offset-property><span class=secno>13.2. </span>The
    &lsquo;<a href="#float-offset"><code
    class=property>float-offset</code></a>&rsquo; property</h3>
 
@@ -3224,19 +3225,46 @@
    the same direction as it has been floated with &lsquo;<code
    class=property>float</code>&rsquo;
 
-  <p>The float will never be pushed outside the content edges of the multicol
-   element due to a setting on &lsquo;<a href="#float-offset"><code
-   class=property>float-offset</code></a>&rsquo;.
+  <p>This property may move floats into other column than where they
+   naturally appear.
 
-  <p>Percentage values refer to the width/height of the float plus a fraction
-   of the column gap.
+  <div class=example>
+   <pre>img { 
+  float: right;
+  float-offset: 5px;
+}
+</pre>
+   <img alt="sample rendering" src=14.png></div>
 
-  <p>Floats that are moved into other columns with this property intrudes.
+  <p>Percentage values are computed according to this formula:
+
+  <pre>
+  (containing-block-width - float-width) * percentage 
+  (containing-block-height - float-height) * percentage 
+</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 src="exclusion_wrap_side_left.png" width=213>
+   <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>
@@ -3252,8 +3280,218 @@
 </pre>
    <img alt="sample rendering" src=12.png></div>
 
-  <p class=issue>Would it make more sense to not specify the opposite
-   direction, but the "forward" direction? <!--
+  <h3 id=the-clear-side-property><span class=secno>13.3. </span>The &lsquo;<a
+   href="#clear-side"><code class=property>clear-side</code></a>&rsquo;
+   property</h3>
+
+  <table class=propdef>
+   <tbody>
+    <tr>
+     <td><em>Name:</em>
+
+     <td><dfn id=clear-side>clear-side</dfn>
+
+    <tr>
+     <td><em>Value:</em>
+
+     <td>auto | left | right | both
+
+    <tr>
+     <td><em>Initial:</em>
+
+     <td>auto
+
+    <tr>
+     <td><em>Applies to:</em>
+
+     <td>floated elements
+
+    <tr>
+     <td><em>Inherited:</em>
+
+     <td>no
+
+    <tr>
+     <td><em>Percentages:</em>
+
+     <td>N/A
+
+    <tr>
+     <td><em>Media:</em>
+
+     <td>visual, paged
+
+    <tr>
+     <td><em>Computed&nbsp;value:</em>
+
+     <td>as specified
+  </table>
+
+  <p>This property declares if the side of a float should be cleared of
+   content. Values have the following meaning:
+
+  <dl>
+   <dt>auto
+
+   <dd>if the float is left-floated, there should be no content to the left;
+    if the float is right-floated, there should be no content to the right
+
+   <dt>left
+
+   <dd>there should be no content to the left of the float
+
+   <dt>right
+
+   <dd>there should be no content to the left of the float
+
+   <dt>none
+
+   <dd>there may be content on either side of the float
+  </dl>
+  <!--
+<h3>Pull-quotes</h3>
+
+<div class=example>
+<img width=213 src="exclusion_wrap_side_left.png">
+
+<pre>
+.pullquote {
+  float: right;
+  float-offset: 5em;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: right;
+  float-offset: 50%;
+}
+</pre>
+
+
+</div>
+
+<div class=example>
+<p><img width=213 src="exclusion_wrap_side_right.png">
+
+<pre>
+.pullquote {
+  float: left;
+  float-offset: 5em;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: left;
+  float-offset: 50%;
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: center;
+  clear-side: left;
+}
+</pre>
+
+</div>
+
+<pre>
+.pullquote {
+  float: left;
+  float-offset: 50%; /* center */
+}
+</pre>
+
+-->
+
+  <div class=example> <img src="exclusion_wrap_side_both.png" width=213> <!--
+<pre>
+.pullquote {
+  float: center; 
+  clear-side: none;
+}
+</pre>
+-->
+   
+   <pre>
+.pullquote {
+  float: left;
+  float-offset: 5em;
+  clear-side: none;
+}
+</pre>
+   <!--
+<pre>
+.pullquote {
+  float: positioned;
+  left: 5em;
+  clear-side: none; 
+}
+</pre>
+
+<pre>
+.pullquote {
+  float: center;
+}
+</pre>
+-->
+   </div>
+
+  <h3 id=exclusions-based-on-images><span class=secno>13.4. </span>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 id=exclusions-based-on-shapes><span class=secno>13.5. </span>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>
 
 <p>In multi-column layouts, baselines are typically aligned between
@@ -3277,17 +3515,17 @@
 
 <p class=note>The <a href="http://dev.w3.org/csswg/css3-linebox/#LineStacking">line-box-contain</a> property is defined in <a href="http://dev.w3.org/csswg/css3-linebox">CSS3 module: line</a>.
 -->
-   <!--
+  <!--
 http://www.w3.org/Style/Group/css3-src/css3-linebox/Overview.html#LineStacking
 -->
-   <!--
+  <!--
 <p class=note>A similar idea &mdash; 'line-stacking-strategy: grid-height' &mdash; was proposed in a <a href="http://www.w3.org/TR/css3-linebox/#line-stacking-strategy">previous version of the CSS3 line module</a>. The 'line-stacking-strategy' property is <a href="http://www.w3.org/TR/xsl/#line-stacking-strategy">used in XSL</a>.
 -->
-   <!--
+  <!--
    div.chapter:columns-page(1) { } 
 -->
 
-  <h2 id=the-first-page-pseudo-element><span class=secno>13. </span>The
+  <h2 id=the-first-page-pseudo-element><span class=secno>14. </span>The
    &lsquo;<code class=property>first-page</code>&rsquo; pseudo-element</h2>
 
   <p>The &lsquo;<code class=property>first-page</code>&rsquo; pseudo-element
@@ -3319,7 +3557,7 @@
 </pre>
   </div>
 
-  <h2 id=selecting-columns-and-pages><span class=secno>14. </span>Selecting
+  <h2 id=selecting-columns-and-pages><span class=secno>15. </span>Selecting
    columns and pages</h2>
 
   <p class=issue>This is sketchy.
@@ -3327,18 +3565,32 @@
   <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
    &lsquo;<code class=css>column(n)</code>&rsquo; pseudo-element selects
-   columns, and the &lsquo;<code class=css>page(n)</code>&rsquo;
-   psedo-element select columns.
+   columns, the &lsquo;<code class=css>column(n,p)</code>&rsquo;
+   pseudo-element selects columns on certain pages, nad the &lsquo;<code
+   class=css>page(n)</code>&rsquo; psedo-element select pages.
 
   <div class=example>
    <pre>
 div.chapter::column(3)           /* the third column of the element */
 div.chapter::column(2n)          /* all even columns of the element */
+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-column(2,2)    /* second column on second page */
+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>
+
+  <div class=example>
+   <pre>
+div.chapter::column(1) {
+  transform: rotate(6.5deg);
+}
+div.chapter::column(2) { 
+  transform: rotate(-5.5deg) translate(0, 40px);
+}
+</pre>
+   <img src="regions_rotated_columns.jpg"></div>
   <!--
 
 <h2>Page selection: nth()</h2>
@@ -3399,11 +3651,11 @@
 
 -->
 
-  <h2 id=conformance><span class=secno>15. </span>Conformance</h2>
+  <h2 id=conformance><span class=secno>16. </span>Conformance</h2>
 
   <p>TBD
 
-  <h2 id=appendix-a-default-style-sheet><span class=secno>16. </span>Appendix
+  <h2 id=appendix-a-default-style-sheet><span class=secno>17. </span>Appendix
    A: Default style sheet</h2>
 
   <pre>
@@ -3515,8 +3767,11 @@
    <li>bookmark-target, <a href="#bookmark-target"
     title=bookmark-target><strong>7.</strong></a>
 
+   <li>clear-side, <a href="#clear-side"
+    title=clear-side><strong>13.3.</strong></a>
+
    <li>float-offset, <a href="#float-offset"
-    title=float-offset><strong>12.4.</strong></a>
+    title=float-offset><strong>13.2.</strong></a>
 
    <li>marks, <a href="#marks" title=marks><strong>6.</strong></a>
 
@@ -3628,6 +3883,21 @@
      <td>all
 
     <tr>
+     <th><a class=property href="#clear-side">clear-side</a>
+
+     <td>auto | left | right | both
+
+     <td>auto
+
+     <td>floated elements
+
+     <td>no
+
+     <td>N/A
+
+     <td>visual, paged
+
+    <tr>
      <th><a class=property href="#float-offset">float-offset</a>
 
      <td>&lt;length> &lt;length> ?
Received on Friday, 23 December 2011 21:29:39 UTC

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