@@ -3451,6 +3451,12 @@ <h3>Pull-quotes</h3>
34513451 < h3 id =exclusions-based-on-images > < span class =secno > 13.4. </ span > Exclusions
34523452 based on images</ h3 >
34533453
3454+ < p > Exclusions are often based on shapes found in images. In this
3455+ specification, the background image carries the shape, around which text
3456+ is wrapped. The new property ‘< code
3457+ class =property > background-exclude-level</ code > ’ indicates a level in
3458+ the alpha channel of the background image(s) that defines the shape.
3459+
34543460 < div class =example >
34553461 < p > Here is an example that uses the background of the multicol element as
34563462 a template for exclusions. < img src =car1.jpg >
@@ -3460,7 +3466,7 @@ <h3 id=exclusions-based-on-images><span class=secno>13.4. </span>Exclusions
34603466 padding: 4em;
34613467 columns: 15em;
34623468 background: url(nicecar.jpg);
3463- background-exclude: 0.5;
3469+ background-exclude-level : 0.5;
34643470}
34653471article h1 { column-span: all } /* Bonneville Speedway */
34663472</ pre >
@@ -3490,13 +3496,17 @@ <h3 id=exclusions-based-on-images><span class=secno>13.4. </span>Exclusions
34903496 background: repeat-y url(zigzag.png);
34913497 background-exclude-level: 0.5;
34923498}
3493-
3499+ article h1 {
3500+ column-span: all;
3501+ }
34943502</ pre >
34953503 </ div >
34963504
34973505 < h3 id =exclusions-based-on-shapes > < span class =secno > 13.5. </ span > Exclusions
34983506 based on shapes</ h3 >
34993507
3508+ < p class =issue > Is this needed?
3509+
35003510 < div class =example > < img src =heart1.png >
35013511 < pre >
35023512article::column(1) {
@@ -3581,19 +3591,24 @@ <h3 id=turning-columns-into-regions><span class=secno>14.2. </span>Turning
35813591
35823592 < div class =example > < img alt ="sample rendering " src =regions.png >
35833593 < 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- }
3594+ article { columns: 3 }
3595+ img { column-span: 2; width: 100%; float: top }
3596+ article::column(1) { /* selects column 1 */
3597+ column-span: 2;
3598+ float: top;
3599+ visibility: collapse; /* so that column 2 moves in */
3600+ height: 3em; /* or something */
3601+ }
3602+
3603+ <article>
3604+ <img ...>
3605+ <p> ... <p> ... <p> ...
3606+ </article>
35923607</ pre >
35933608 </ div >
3594-
3595- < div class =example >
3596- < pre >
3609+ <!--
3610+ <div class=example>
3611+ <pre>
35973612 article { columns: 14em; }
35983613 article::column(1) {
35993614 position: absolute;
@@ -3602,7 +3617,8 @@ <h3 id=turning-columns-into-regions><span class=secno>14.2. </span>Turning
36023617 ...
36033618 }
36043619</pre>
3605- </ div >
3620+ </div>
3621+ -->
36063622
36073623 < h2 id =the-first-page-pseudo-element > < span class =secno > 15. </ span > The
36083624 ‘< code class =property > first-page</ code > ’ pseudo-element</ h2 >
0 commit comments