- From: H?kon Wium Lie via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 23 Dec 2011 21:29:37 +0000
- To: public-css-commits@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 ‘<code class=property>float-offset</code>’
property</a>
+
+ <li><a href="#the-clear-side-property"><span class=secno>13.3.
+ </span>The ‘<code class=property>clear-side</code>’
+ 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 ‘<code class=property>first-page</code>’
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>’ property which, in combination with
integer values on ‘<code class=property>column-span</code>’
and the new ‘<code class=property>float-modifier</code>’,
- 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 ‘<code class=property>float</code>’
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 ‘<code class=property>float</code>’ 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
‘<a href="#float-offset"><code
class=property>float-offset</code></a>’ property</h3>
@@ -3224,19 +3225,46 @@
the same direction as it has been floated with ‘<code
class=property>float</code>’
- <p>The float will never be pushed outside the content edges of the multicol
- element due to a setting on ‘<a href="#float-offset"><code
- class=property>float-offset</code></a>’.
+ <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 ‘<a
+ href="#clear-side"><code class=property>clear-side</code></a>’
+ 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 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 — 'line-stacking-strategy: grid-height' — 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
‘<code class=property>first-page</code>’ pseudo-element</h2>
<p>The ‘<code class=property>first-page</code>’ 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
‘<code class=css>column(n)</code>’ pseudo-element selects
- columns, and the ‘<code class=css>page(n)</code>’
- psedo-element select columns.
+ columns, the ‘<code class=css>column(n,p)</code>’
+ pseudo-element selects columns on certain pages, nad the ‘<code
+ class=css>page(n)</code>’ 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><length> <length> ?
Received on Friday, 23 December 2011 21:29:39 UTC