Skip to content

Commit 71f733a

Browse files
howcomhowcom
committed
x
1 parent fe5c697 commit 71f733a

1 file changed

Lines changed: 105 additions & 26 deletions

File tree

‎css3-gcpm/Overview.html‎

Lines changed: 105 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@
2424

2525
<h1>CSS Generated Content for Paged Media Module</h1>
2626

27-
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 23 December 2011</h2>
27+
<h2 class="no-num no-toc" id=w3c-working>Editor's Draft 25 December 2011</h2>
2828

2929
<dl>
3030
<dt>This version:
3131

3232
<dd><a
33-
href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111223/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111223/</a>
33+
href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111225/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111225/</a>
3434

3535
<dt>Latest version:
3636

@@ -225,10 +225,10 @@ <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
225225
</span>Floating inside and outside pages</a>
226226
</ul>
227227

228-
<li><a href="#exclusion"><span class=secno>13. </span>Exclusion</a>
228+
<li><a href="#exclusions"><span class=secno>13. </span>Exclusions</a>
229229
<ul class=toc>
230-
<li><a href="#exclusion-based-on-floats"><span class=secno>13.1.
231-
</span>Exclusion based on floats</a>
230+
<li><a href="#exclusions-based-on-floats"><span class=secno>13.1.
231+
</span>Exclusions based on floats</a>
232232

233233
<li><a href="#the-float-offset-property"><span class=secno>13.2.
234234
</span>The &lsquo;<code class=property>float-offset</code>&rsquo;
@@ -245,16 +245,25 @@ <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
245245
</span>Exclusions based on shapes</a>
246246
</ul>
247247

248-
<li><a href="#the-first-page-pseudo-element"><span class=secno>14.
248+
<li><a href="#regions"><span class=secno>14. </span>Regions</a>
249+
<ul class=toc>
250+
<li><a href="#selecting-columns"><span class=secno>14.1.
251+
</span>Selecting columns</a>
252+
253+
<li><a href="#turning-columns-into-regions"><span class=secno>14.2.
254+
</span>Turning columns into regions</a>
255+
</ul>
256+
257+
<li><a href="#the-first-page-pseudo-element"><span class=secno>15.
249258
</span>The &lsquo;<code class=property>first-page</code>&rsquo;
250259
pseudo-element</a>
251260

252-
<li><a href="#selecting-columns-and-pages"><span class=secno>15.
261+
<li><a href="#selecting-columns-and-pages"><span class=secno>16.
253262
</span>Selecting columns and pages</a>
254263

255-
<li><a href="#conformance"><span class=secno>16. </span>Conformance</a>
264+
<li><a href="#conformance"><span class=secno>17. </span>Conformance</a>
256265

257-
<li><a href="#appendix-a-default-style-sheet"><span class=secno>17.
266+
<li><a href="#appendix-a-default-style-sheet"><span class=secno>18.
258267
</span>Appendix A: Default style sheet</a>
259268

260269
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
@@ -3132,9 +3141,9 @@ <h3 id=floating-inside-and-outside-pages><span class=secno>12.2.
31323141
</pre>
31333142
</div>
31343143

3135-
<h2 id=exclusion><span class=secno>13. </span>Exclusion</h2>
3144+
<h2 id=exclusions><span class=secno>13. </span>Exclusions</h2>
31363145

3137-
<h3 id=exclusion-based-on-floats><span class=secno>13.1. </span>Exclusion
3146+
<h3 id=exclusions-based-on-floats><span class=secno>13.1. </span>Exclusions
31383147
based on floats</h3>
31393148

31403149
<p>A new value on &lsquo;<code class=property>float</code>&rsquo; is
@@ -3442,27 +3451,46 @@ <h3>Pull-quotes</h3>
34423451
<h3 id=exclusions-based-on-images><span class=secno>13.4. </span>Exclusions
34433452
based on images</h3>
34443453

3445-
<div class=example> <img src=car1.jpg>
3454+
<div class=example>
3455+
<p>Here is an example that uses the background of the multicol element as
3456+
a template for exclusions. <img src=car1.jpg>
3457+
34463458
<pre>
34473459
article {
34483460
padding: 4em;
34493461
columns: 15em;
34503462
background: url(nicecar.jpg);
3451-
exclude-threshold: 0.5;
3463+
background-exclude: 0.5;
34523464
}
34533465
article h1 { column-span: all } /* Bonneville Speedway */
34543466
</pre>
34553467
</div>
34563468

3457-
<div class=example> <img src=car2.jpg>
3469+
<div class=example>
3470+
<p>This example is the same as the above, just with changed column widths.
3471+
<img src=car2.jpg>
3472+
34583473
<pre>
34593474
article {
34603475
padding: 4em;
34613476
columns: 6em;
34623477
background: url(nicecar.jpg);
3463-
exclude-threshold: 0.5;
3478+
background-exclude-level: 0.5;
34643479
}
34653480
article h1 { column-span: all } /* Bonneville Speedway */
3481+
</pre>
3482+
</div>
3483+
3484+
<p>Background images can be repeated. Therefore exclusions based on images
3485+
can be repeated.
3486+
3487+
<div class=example> <img src="exclusions_repeating.jpg">
3488+
<pre>
3489+
article {
3490+
background: repeat-y url(zigzag.png);
3491+
background-exclude-level: 0.5;
3492+
}
3493+
34663494
</pre>
34673495
</div>
34683496

@@ -3472,10 +3500,11 @@ <h3 id=exclusions-based-on-shapes><span class=secno>13.5. </span>Exclusions
34723500
<div class=example> <img src=heart1.png>
34733501
<pre>
34743502
article::column(1) {
3475-
shape-inside: circle(50%, 50%, 30%);
3503+
content-inside: circle(50%, 50%, 30%);
34763504
}
3505+
34773506
article::column(1) {
3478-
shape-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
3507+
content-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
34793508
color: red;
34803509
}
34813510
</pre>
@@ -3484,10 +3513,10 @@ <h3 id=exclusions-based-on-shapes><span class=secno>13.5. </span>Exclusions
34843513
<div class=example> <img src=heart2.png>
34853514
<pre>
34863515
article::column(1) {
3487-
shape-: circle(x, y, z);
3516+
content-outside: circle(x, y, z);
34883517
}
34893518
article::column(1) {
3490-
shape-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
3519+
content-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);
34913520
}
34923521
</pre>
34933522
</div>
@@ -3521,11 +3550,61 @@ <h2>Aligning baselines in multi-column layouts</h2>
35213550
<!--
35223551
<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>.
35233552
-->
3524-
<!--
3525-
div.chapter:columns-page(1) { }
3526-
-->
35273553

3528-
<h2 id=the-first-page-pseudo-element><span class=secno>14. </span>The
3554+
<h2 id=regions><span class=secno>14. </span>Regions</h2>
3555+
3556+
<p>Regions are series of stylable boxes into which content can be poured.
3557+
Columns are regions that are automatically generated to contain all the
3558+
content of the the multicol element. By adding selectors for columns,
3559+
columns can be styled and positioned and thereby escape the rigid patterns
3560+
that columns naturally live in.
3561+
3562+
<h3 id=selecting-columns><span class=secno>14.1. </span>Selecting columns</h3>
3563+
3564+
<div class=example>
3565+
<pre>
3566+
div.chapter::column(3) /* the 3rd column of the element */
3567+
div.chapter::column(2n) /* all even columns of the element */
3568+
div.chapter::column(3+) /* all columns but the 1st and 2nd */
3569+
div.chapter::column(2,2) /* second column on second page */
3570+
div.chapter::column(*,2) /* all columns on the second page */
3571+
div.chapter::column(,2) /* all columns on the second page */
3572+
</pre>
3573+
</div>
3574+
3575+
<h3 id=turning-columns-into-regions><span class=secno>14.2. </span>Turning
3576+
columns into regions</h3>
3577+
3578+
<p>A column that is moved from its natural position into
3579+
3580+
<p>Columns can be moved
3581+
3582+
<div class=example> <img alt="sample rendering" src=regions.png>
3583+
<pre>
3584+
article { columns: 3 }
3585+
img { column-span: 2; width: 100%; float: top }
3586+
article::column(1) { /* selects column 1 */
3587+
column-span: 2;
3588+
float: top;
3589+
visibility: collapse; /* so that column 2 moves in */
3590+
height: 3em; /* or something */
3591+
}
3592+
</pre>
3593+
</div>
3594+
3595+
<div class=example>
3596+
<pre>
3597+
article { columns: 14em; }
3598+
article::column(1) {
3599+
position: absolute;
3600+
font-size: 1.2em;
3601+
visibility: collapse; /* makes space available others to use */
3602+
...
3603+
}
3604+
</pre>
3605+
</div>
3606+
3607+
<h2 id=the-first-page-pseudo-element><span class=secno>15. </span>The
35293608
&lsquo;<code class=property>first-page</code>&rsquo; pseudo-element</h2>
35303609

35313610
<p>The &lsquo;<code class=property>first-page</code>&rsquo; pseudo-element
@@ -3557,7 +3636,7 @@ <h2 id=the-first-page-pseudo-element><span class=secno>14. </span>The
35573636
</pre>
35583637
</div>
35593638

3560-
<h2 id=selecting-columns-and-pages><span class=secno>15. </span>Selecting
3639+
<h2 id=selecting-columns-and-pages><span class=secno>16. </span>Selecting
35613640
columns and pages</h2>
35623641

35633642
<p class=issue>This is sketchy.
@@ -3651,11 +3730,11 @@ <h2>Page selection: nth()</h2>
36513730
36523731
-->
36533732

3654-
<h2 id=conformance><span class=secno>16. </span>Conformance</h2>
3733+
<h2 id=conformance><span class=secno>17. </span>Conformance</h2>
36553734

36563735
<p>TBD
36573736

3658-
<h2 id=appendix-a-default-style-sheet><span class=secno>17. </span>Appendix
3737+
<h2 id=appendix-a-default-style-sheet><span class=secno>18. </span>Appendix
36593738
A: Default style sheet</h2>
36603739

36613740
<pre>

0 commit comments

Comments
 (0)