Skip to content

Commit 6e1ebc1

Browse files
astearnsastearns
committed
change template selection to last in matching set
1 parent d287218 commit 6e1ebc1

2 files changed

Lines changed: 81 additions & 72 deletions

File tree

‎css3-page-template/Overview.html‎

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626

2727
<h1>CSS Pagination Templates Module Level 3</h1>
2828

29-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 April 2012</h2>
29+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 May 2012</h2>
3030

3131
<dl>
3232
<dt>This version:
33-
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20120421/">http://www.w3.org/TR/2012/ED-css3-page-template-20120421/</a>-->
33+
<!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-page-template-20120506/">http://www.w3.org/TR/2012/ED-css3-page-template-20120506/</a>-->
3434

3535

3636
<dd><a
@@ -184,11 +184,24 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
184184
content is laid out using pagination templates, pages are generated as
185185
needed to accommodate all the content.
186186

187-
<div class=issue-marker>
188-
<div class=issue-details>The draft as it stands requires pagination to
189-
present the repeated template layouts. Other methods of repeating
190-
template layouts to accommodate content might be specified, but the draft
191-
would need to be reviewed to remove all reliances on paged displays.</div>
187+
<div class="issue-marker wrapper">
188+
<div class=issue-marker>
189+
<div class=issue-details>The draft as it stands requires pagination to
190+
present the repeated template layouts. Other methods of repeating
191+
template layouts to accommodate content might be specified, but the
192+
draft would need to be reviewed to remove all reliances on paged
193+
displays.</div>
194+
</div>
195+
196+
<div class=issue-marker>
197+
<div class=issue-details>The terms &lsquo;<code
198+
class=property>template</code>&rsquo; and &lsquo;<code
199+
class=property>page</code>&rsquo; are overloaded in CSS, but they are
200+
the words that most clearly describe the concept. Some alternates for
201+
the main @ rule: template, page-template, view-template, page-master,
202+
master-template, master. Other suggestions are welcome, but only if they
203+
are more helpful than onelook.com (which suggested "Captain Submarine").</div>
204+
</div>
192205
</div>
193206

194207
<p>Pagination templates consist of anonymous boxes called slots created by
@@ -205,16 +218,6 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
205218
template based on available content. Elements can further constrain the
206219
applicable template set by listing a subset of templates that apply.
207220

208-
<div class=issue-marker>
209-
<div class=issue-details>The terms &lsquo;<code
210-
class=property>template</code>&rsquo; and &lsquo;<code
211-
class=property>page</code>&rsquo; are overloaded in CSS, but they are the
212-
words that most clearly describe the concept. Some alternates for the
213-
main @ rule: template, page-template, view-template, page-master,
214-
master-template, master. Other suggestions are welcome, but only if they
215-
are more helpful than onelook.com (which suggested "Captain Submarine").</div>
216-
</div>
217-
218221
<h3 id=placement><span class=secno>1.1. </span>Module Interactions</h3>
219222

220223
<p>This module uses named flows and region chains defined in <a
@@ -434,7 +437,7 @@ <h2 id=conditional-templates><span class=secno>3. </span>Template Selection</h2>
434437
set using a selector, by matching content to display using the
435438
&lsquo;<code class=property>required-flow</code>&rsquo; or &lsquo;<code
436439
class=property>available-content</code>&rsquo; declarations, or just
437-
taking the first template found.
440+
taking the last template found.
438441

439442
<div class=issue-marker>
440443
<div class=issue-details>The following section describes selecting
@@ -447,23 +450,23 @@ <h2 id=conditional-templates><span class=secno>3. </span>Template Selection</h2>
447450
</div>
448451

449452
<div class=example>
450-
<p>In this example the divs are paginated using the first template found
453+
<p>In this example the divs are paginated using the last template found
451454
from the set of templates that apply to the div. The first div uses
452-
template one, the second div uses template two, and the third div uses
453-
template three.
455+
template three, the second div uses template two, and the third div uses
456+
template one.
454457

455458
<pre>
456459
div { overflow-style: paged-x; }
457-
.either-two-or-three { template-set: two three; }
458-
.only-three { template-set: three; }
460+
.either-one-or-two { template-set: one two; }
461+
.only-one { template-set: one; }
459462

460463
@template one { ... }
461464
@template two { ... }
462465
@template three { ... }
463466

464467
&lt;div class='any-template'&gt; ... &lt;/div&gt;
465-
&lt;div class='either-two-or-three'&gt; ... &lt;/div&gt;
466-
&lt;div class='only-three'&gt; ... &lt;/div&gt;
468+
&lt;div class='either-one-or-two'&gt; ... &lt;/div&gt;
469+
&lt;div class='only-one'&gt; ... &lt;/div&gt;
467470
</pre>
468471
</div>
469472

@@ -473,15 +476,17 @@ <h3 id=ordered-templates><span class=secno>3.1. </span>Selecting Templates
473476
<p>Selectors such as :first can be used on a pagination template to define
474477
a separate template for pages that match the selector.
475478

476-
<div class=issue-marker>
477-
<div class=issue-details>Should :left and :right be allowed with a way of
478-
displaying more than one page at a time in a viewport? Should :nth(x)
479-
selectors be allowed?</div>
480-
</div>
479+
<div class="issue-marker wrapper">
480+
<div class=issue-marker>
481+
<div class=issue-details>Should :left and :right be allowed with a way of
482+
displaying more than one page at a time in a viewport? Should :nth(x)
483+
selectors be allowed?</div>
484+
</div>
481485

482-
<div class=issue-marker>
483-
<div class=issue-details>Describe how @template rules cascade with names
484-
and selectors (or how they do not cascade, if that's preferable).</div>
486+
<div class=issue-marker>
487+
<div class=issue-details>Describe how @template rules cascade with names
488+
and selectors (or how they do not cascade, if that's preferable).</div>
489+
</div>
485490
</div>
486491

487492
<div class=example>
@@ -526,8 +531,8 @@ <h3 id=selection-from-required-flows><span class=secno>3.2.
526531
be used in a pagination template to list named flows that must still have
527532
content in order for the template to be used. If more than one template
528533
has a &lsquo;<code class=property>required-flow</code>&rsquo; value that
529-
matches the remaining flow content, the first template that matches will
530-
be used.
534+
matches the remaining flow content, the last template that matches will be
535+
used.
531536

532537
<div class=example>
533538
<p>"Continued on" layout.
@@ -555,6 +560,20 @@ <h3 id=selection-from-required-flows><span class=secno>3.2.
555560
body { overflow-style: paged-x; }
556561
.lead-story { flow-into: lead-flow; }
557562
.related-article { flow-into: related-flow; }
563+
@template related {
564+
required-flow: related-flow;
565+
@slot content {
566+
flow-from: related-flow;
567+
column-width: 20em;
568+
}
569+
}
570+
@template lead {
571+
required-flow: lead-flow;
572+
@slot content {
573+
flow-from: lead-flow;
574+
column-width: 20em;
575+
}
576+
}
558577
@template continued-on:first {
559578
@slot lead {
560579
flow-from: lead-flow;
@@ -571,20 +590,6 @@ <h3 id=selection-from-required-flows><span class=secno>3.2.
571590
float: left;
572591
}
573592
}
574-
@template lead {
575-
required-flow: lead-flow;
576-
@slot content {
577-
flow-from: lead-flow;
578-
column-width: 20em;
579-
}
580-
}
581-
@template related {
582-
required-flow: related-flow;
583-
@slot content {
584-
flow-from: related-flow;
585-
column-width: 20em;
586-
}
587-
}
588593
&lt;body&gt;
589594
&lt;article class='lead-story'&gt;...content...&lt;/article&gt;
590595
&lt;article class='related-article'&gt;...content...&lt;/article&gt;

‎css3-page-template/Overview.src.html‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,16 @@ <h2 id="intro">Introduction</h2>
7878

7979
<p>This module describes how to define pagination templates in CSS. In CSS 2.1 content displayed on-screen is assumed to be a single continuous canvas. Pagination templates provide a mechanism for a 'paginated' experience that applies to on-screen presentation as well as printed media. Pagination templates describe the layout of pages in which content is displayed as the user moves from page to page on screen or prints the document content. When content is laid out using pagination templates, pages are generated as needed to accommodate all the content.
8080

81+
<div class="issue-marker wrapper">
8182
<div class="issue-marker"><div class="issue-details">The draft as it stands requires pagination to present the repeated template layouts. Other methods of repeating template layouts to accommodate content might be specified, but the draft would need to be reviewed to remove all reliances on paged displays.</div></div>
83+
<div class="issue-marker"><div class="issue-details">The terms 'template' and 'page' are overloaded in CSS, but they are the words that most clearly describe the concept. Some alternates for the main @ rule: template, page-template, view-template, page-master, master-template, master. Other suggestions are welcome, but only if they are more helpful than onelook.com (which suggested "Captain Submarine").</div></div>
84+
</div>
8285

8386
<p>Pagination templates consist of anonymous boxes called slots created by CSS to contain content. Layouts that use pagination templates mainly determine the size of these slots from the template definition instead of the size of their content. When content does not fit into a template slot, additional pages are created with more slots to contain the overflow content.
8487

8588
<p>Multiple pagination templates can be defined for a given document. A paginated element can use a single template or select from a set of templates each time a new page needs to be generated. Which template is used for a given page can be defined by a selector or by choosing a template based on available content. Elements can further constrain the applicable template set by listing a subset of templates that apply.
8689

87-
<div class="issue-marker"><div class="issue-details">The terms 'template' and 'page' are overloaded in CSS, but they are the words that most clearly describe the concept. Some alternates for the main @ rule: template, page-template, view-template, page-master, master-template, master. Other suggestions are welcome, but only if they are more helpful than onelook.com (which suggested "Captain Submarine").</div></div>
88-
90+
8991
<h3 id="placement">Module Interactions</h3>
9092

9193
<p>This module uses named flows and region chains defined in [[CSS3-REGIONS]].
@@ -216,35 +218,37 @@ <h2 id="templates-and-slots">Pagination Templates and Slots</h2>
216218

217219
<h2 id="conditional-templates">Template Selection</h2>
218220

219-
<p>Multiple templates can be defined for a single document. An element that uses pagination templates either selects a template from the entire document set or a subset defined by the 'template-set' property. Each page view created uses a single template. This template can be chosen from the applicable set using a selector, by matching content to display using the 'required-flow' or 'available-content' declarations, or just taking the first template found.
221+
<p>Multiple templates can be defined for a single document. An element that uses pagination templates either selects a template from the entire document set or a subset defined by the 'template-set' property. Each page view created uses a single template. This template can be chosen from the applicable set using a selector, by matching content to display using the 'required-flow' or 'available-content' declarations, or just taking the last template found.
220222

221223
<div class="issue-marker"><div class="issue-details">The following section describes selecting templates with several mechanisms (selectors and declarations, and presumably @template rules could be scoped by media queries). An alternative could be to define all selection mechanisms like a media query, where all of the selection mechanisms are outside the declaration block. Attempting to define template rejection rather than selection might also prove fruitful.</div></div>
222224

223225
<div class='example'>
224-
<p>In this example the divs are paginated using the first template found from the set of templates that apply to the div. The first div uses template one, the second div uses template two, and the third div uses template three.
226+
<p>In this example the divs are paginated using the last template found from the set of templates that apply to the div. The first div uses template three, the second div uses template two, and the third div uses template one.
225227

226228
<pre>
227229
div { overflow-style: paged-x; }
228-
.either-two-or-three { template-set: two three; }
229-
.only-three { template-set: three; }
230+
.either-one-or-two { template-set: one two; }
231+
.only-one { template-set: one; }
230232

231233
@template one { ... }
232234
@template two { ... }
233235
@template three { ... }
234236

235237
&lt;div class='any-template'&gt; ... &lt;/div&gt;
236-
&lt;div class='either-two-or-three'&gt; ... &lt;/div&gt;
237-
&lt;div class='only-three'&gt; ... &lt;/div&gt;
238+
&lt;div class='either-one-or-two'&gt; ... &lt;/div&gt;
239+
&lt;div class='only-one'&gt; ... &lt;/div&gt;
238240
</pre>
239241
</div>
240242

241243
<h3 id='ordered-templates'>Selecting Templates by Page Order</h3>
242244

243245
<p>Selectors such as :first can be used on a pagination template to define a separate template for pages that match the selector.
244246

247+
<div class="issue-marker wrapper">
245248
<div class="issue-marker"><div class="issue-details">Should :left and :right be allowed with a way of displaying more than one page at a time in a viewport? Should :nth(x) selectors be allowed?</div></div>
246249

247250
<div class="issue-marker"><div class="issue-details">Describe how @template rules cascade with names and selectors (or how they do not cascade, if that's preferable).</div></div>
251+
</div>
248252

249253
<div class='example'>
250254
<p>Any of the side-by-side two-article examples from the previous section could have an @template :first {} rule that defined a fancy layout for the first page.
@@ -271,7 +275,7 @@ <h3 id='ordered-templates'>Selecting Templates by Page Order</h3>
271275

272276
<h3 id='selection-from-required-flows'>Selecting Templates from Required Flows</h3>
273277

274-
<p>The 'required-flow' property can be used in a pagination template to list named flows that must still have content in order for the template to be used. If more than one template has a 'required-flow' value that matches the remaining flow content, the first template that matches will be used.
278+
<p>The 'required-flow' property can be used in a pagination template to list named flows that must still have content in order for the template to be used. If more than one template has a 'required-flow' value that matches the remaining flow content, the last template that matches will be used.
275279

276280
<div class='example'>
277281
<p>"Continued on" layout.
@@ -287,6 +291,20 @@ <h3 id='selection-from-required-flows'>Selecting Templates from Required Flows</
287291
body { overflow-style: paged-x; }
288292
.lead-story { flow-into: lead-flow; }
289293
.related-article { flow-into: related-flow; }
294+
@template related {
295+
required-flow: related-flow;
296+
@slot content {
297+
flow-from: related-flow;
298+
column-width: 20em;
299+
}
300+
}
301+
@template lead {
302+
required-flow: lead-flow;
303+
@slot content {
304+
flow-from: lead-flow;
305+
column-width: 20em;
306+
}
307+
}
290308
@template continued-on:first {
291309
@slot lead {
292310
flow-from: lead-flow;
@@ -303,20 +321,6 @@ <h3 id='selection-from-required-flows'>Selecting Templates from Required Flows</
303321
float: left;
304322
}
305323
}
306-
@template lead {
307-
required-flow: lead-flow;
308-
@slot content {
309-
flow-from: lead-flow;
310-
column-width: 20em;
311-
}
312-
}
313-
@template related {
314-
required-flow: related-flow;
315-
@slot content {
316-
flow-from: related-flow;
317-
column-width: 20em;
318-
}
319-
}
320324
&lt;body&gt;
321325
&lt;article class='lead-story'&gt;...content...&lt;/article&gt;
322326
&lt;article class='related-article'&gt;...content...&lt;/article&gt;

0 commit comments

Comments
 (0)