You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>CSS is a language for describing the rendering of structured documents
69
69
(such as HTML and XML) on screen, on paper, in speech, etc. This module
70
-
contains the features of CSS level 3 relating to paged view templates.
70
+
contains the features of CSS level 3 relating to paginated templates.
71
71
It includes and extends the functionality of CSS level 2 [[!CSS21]],
72
72
which builds on CSS level 1 [[CSS1]].
73
-
The main extension compared to level 2 is the ability to specify one or more templates for a paged view to use to render content.
73
+
The main extension compared to level 2 is the ability to specify one or more paginated templates that be used to render content.
74
74
75
75
<h2class="no-num no-toc" id="status">Status of this document</h2>
76
76
@@ -89,9 +89,11 @@ <h2 id="intro">
89
89
90
90
<p>CSS beyond level 2 is a set of modules, divided up to allow the specifications to develop incrementally, along with their implementations. This specification is one of those modules.
91
91
92
-
<p>This module describes how to define page templates in CSS. Page templates consist of anonymous boxes called slots created to contain content. Layouts done with page templates mainly determine the size of slots from the template definition instead of the intrinsic 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.
92
+
<p>This module describes how to define paginated templates in CSS. Paginated templates consist of anonymous boxes called slots created by CSS to contain content. Layouts that use paginated templates mainly determine the size of these slots from the template definition instead of the intrinsic 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.
93
93
94
-
<p>Multiple page templates can be defined for a given document. Which template is used for each page can be defined by a selector or by choosing a template based on available content.
94
+
<p>Multiple paginated templates can be defined for a given document. Which template is used for each paginated element 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 which templates should apply.
95
+
96
+
<pclass="issue">The terms 'template' and 'page' are overloaded in CSS, but they are the words that most clearly describe the concept. Other suggestions are welcome, but only if they are more helpful than onelook.com (which suggested "Captain Submarine").
95
97
96
98
<h3id="placement">
97
99
Module Interactions</h3>
@@ -104,49 +106,102 @@ <h3 id="values">
104
106
<varclass="replaceme"></var>
105
107
106
108
<h2id="templates-and-slots">
107
-
Page Templates and Slots</h2>
109
+
Paginated Templates and Slots</h2>
110
+
111
+
<p>An @template rule defines a template. Templates contain one or more slots to display content. An element uses paginated templates to display its own content and/or content from named flows if its 'overflow-style' property is set to any of the paged-* values defined in css3-gcpm. If a document defines no paginated templates, then there is an implicit paginated template with a single slot containing the paginated element's contents.
108
112
109
-
<pclass="issue">Should we extend the existing @page rule or create a new @page-template or @page-master rule?
110
-
<pclass="issue">Alternately, we could use concepts from WebComponents to define templates.
113
+
<p>A slot is an anonymous box in a paginated template where content can be placed. In an @template rule the template-slots property lists how many slots can be created in a particular template, their names, and their order. Each named slot can be addressed and styled with a ::slot(name) pseudo-element.
111
114
112
-
<p>A slot is an anonymous box in a page template where content can be placed. In an @page rule the positioned-slots property lists how many slots exist in a particular template, their names, and their order. Each named slot can be addressed and styled with the ::slot() pseudo-element.
115
+
<divclass='example'>
116
+
<p>Sample @template syntax with no content assignments
117
+
<pre>
118
+
@template {
119
+
template-slots: one, two, three;
120
+
::slot(one) { }
121
+
::slot(two) { }
122
+
::slot(three) { }
123
+
}
124
+
</pre>
125
+
</div>
113
126
114
-
<pclass="issue">Should the property name be page-slots instead of positioned-slots?
127
+
<p>If an @template rule does not assign a value to the template-slots property then one default 'content' slot exists, which contains the element's content. The 'content' slot can be specified in the slot list in the template-slots property. If the template-slots property does not include 'content' in its list then an element that uses that template does not display its own content.
128
+
129
+
<divclass='example'>
130
+
<p>An @template rule that creates header and footer slots around the paginated element's content
131
+
<pre>
132
+
@template {
133
+
template-slots: header, content, footer;
134
+
::slot(header) { }
135
+
::slot(content) { }
136
+
::slot(footer) { }
137
+
}
138
+
</pre>
139
+
</div>
115
140
116
-
<p>Slots can be assigned content from named flows. If any slot in a template has overflow content, a new page is created with a new set of slots to receive the overflow content. Slots with the same named flow assignment (within a template and/or across pages created from templates) form a region chain.
141
+
<p>Slots can be assigned content from named flows. Slots can contain generated content assigned from the content property. Slots only instantiate if they are assigned content from a named flow, or the computed value of their 'content' property does not match its initial value.
117
142
118
-
<p>Slots can contain generated content assigned from the content property. Slots only instantiate if they are assigned content from a named flow, or the computed value of their 'content' property does not match its initial value.
143
+
<p>If any slot in a paginated template has overflow content, a new page is created with a new set of slots to receive the overflow content. Slots with the same named flow assignment (within a template and/or across pages created from templates) form a region chain.
119
144
120
-
<p>The default size for a paged view is the size of the viewport.
145
+
<p>The default size for a template is the size of the viewport. If no @template rule is specified the document contains one viewport-sized template with a default 'content' slot.
121
146
122
-
<pclass="issue">Do we need to define vertical-align behavior for slots, the way css3-layout does?
147
+
<pclass="issue">Slot pseudo-elements are a first pass at defining CSS-created boxes to house content. Alternately, we could use concepts from WebComponents to define the boxes. Whichever way the boxes are created there needs to be a way of accessing the template structure through scripting.
123
148
124
149
<pclass="issue">Is there a need to create more structure, nesting slots within slots?
125
150
151
+
<h2id="conditional-templates">
152
+
Template Selection</h2>
153
+
154
+
<p>Multiple templates can be defined for a single document. An element that uses paginated 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, or by matching available content using the 'required-flow' property.
155
+
156
+
<pclass="issue">Instead of specifying a template-set, should there be a way of scoping @template rules to an element? The purpose of template-set is to be able to share template sets between elements.
157
+
158
+
<h3id='templates-property'>
159
+
Associating Templates with Elements</h3>
160
+
161
+
<p>An element with 'overflow-style:paged-*' set will render a paginated view. The contents of each page in the paginated view will be determined by a single template.
162
+
126
163
<divclass='example'>
127
-
<pclass="issue">Add graphics for all of the examples.
164
+
<p>The simplest example takes all of the content in the document and flows it into a paginated template with a single slot. This template will display a viewport's worth of content at a time, and will create a new slot on a new page each time content overflows.
165
+
166
+
The four examples below are equivalent.
167
+
168
+
<pre>
169
+
body { overflow-style:paged-x; }
170
+
</pre>
171
+
172
+
<pre>
173
+
body { overflow-style:paged-x; }
174
+
@template { }
175
+
</pre>
128
176
129
-
<p>The simplest example takes all of the content in the document and flows it into a page template with a single slot. This template will display a viewport's worth of content at a time, and will create a new slot on a new page each time content overflows.
130
177
<pre>
131
-
body { flow-into: body; }
178
+
body { overflow-style:paged-x; }
179
+
@template {
180
+
template-slots: content;
181
+
::slot(content) { }
182
+
}
183
+
</pre>
132
184
133
-
@page {
134
-
positioned-slots: main;
185
+
<pre>
186
+
body { overflow-style:paged-x; }
187
+
body > * { flow-into: body; }
188
+
@template {
189
+
template-slots: main;
135
190
::slot(main) {
136
191
flow-from: body;
137
192
}
138
193
}
139
194
</pre>
140
-
<pclass="issue">Should there be an implicit 'body' flow?
141
195
</div>
142
196
143
197
<divclass='example'>
144
-
<p>A page template could contain two side-by-side slots that paginate two separate articles. This example fills the left side of the paged view with content from article1 and the right side with content from article2. New pages and slots are created until the content from both articles is exhausted.
198
+
<p>A paginated template could contain two side-by-side slots that paginate two separate articles. This example fills the left side of the paged view with content from article1 and the right side with content from article2. New pages and slots are created until the content from both articles is exhausted. If one article is longer than the other then in this simple example template the longer article will continue taking up just its half of the page.
<p>The example above could position the slots using grid layout rather than floats.
226
+
<p>The example above could position the slots using grid layout rather than floats. In this simple example the longer article will take up the entire page once the shorter article is exhausted.
<pclass="issue">Add an example of side-by-side article pagination using multicol slots, using more columns for each side of the page with more viewport width. If the articles were different lengths, once the shorter article was exhausted then remaining pages would fill with columns from the longer article.
253
+
<divclass='example'>
254
+
<p>This version of the side-by-side example uses multicol slots, using more columns for each side of the page with more viewport width. If the articles were different lengths, once the shorter article was exhausted then remaining pages would fill with columns from the longer article.
<pclass="issue">Add an example using media queries to choose between portrait and landscape templates.
200
280
201
-
<h2id="conditional-templates">
202
-
Conditional Template Selection</h2>
203
-
204
-
<p>Multiple templates can be defined for a single document. Each page view created uses a single template. This template can be chosen using a selector, or by matching available content using the 'required-flow' property.
205
-
206
281
<h3id='ordered-templates'>
207
282
Selecting Templates by Page Order</h3>
208
283
209
-
<p>Selectors such as :first can be used on a page template to define a separate template for pages that match the selector.
284
+
<p>Selectors such as :first can be used on a paginated template to define a separate template for pages that match the selector.
210
285
211
-
<pclass="issue">Should we allow :left and :right for viewing more than one page at a time in a viewport? Should we have :nth(x) selectors?
286
+
<pclass="issue">Should we use :left and :right and allow viewing more than one page at a time in a viewport? Should we have :nth(x) selectors?
212
287
213
288
<divclass='example'>
214
-
<p>Any of the side-by-side two-article examples from the previous section could have an @page :first {} template that defined a fancy layout for the first page slots
289
+
<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 slots
215
290
<pclass="issue">define "fancy."
216
291
<pre>
217
-
@page :first {
218
-
positioned-slots: first-left, first-right;
292
+
@template :first {
293
+
template-slots: first-left, first-right;
219
294
::slot (first-left) {
220
295
//fancy styling
221
296
flow-from: article1;
@@ -231,13 +306,14 @@ <h3 id='ordered-templates'>
231
306
<h3id='selection-from-available-content'>
232
307
Selecting Templates from Available Content</h3>
233
308
234
-
<p>The 'required-flow' property can be used in a page template to list named flows that must have available content in order for the template to be used. If more than one template has a 'required-flow' value that matches the available content, the first template that matches will be used.
309
+
<p>The 'required-flow' property can be used in a paginated template to list named flows that must have available content in order for the template to be used. If more than one template has a 'required-flow' value that matches the available content, the first template that matches will be used.
235
310
236
311
<divclass='example'>
237
-
<p>Using the same two-article markup as in previous examples, these page templates will display an inital page with the beginning of both articles. If article1 has more content than will fit on that first page, the next pages will show only content from the first article. When the content from the first article is consumed, then pages will follow with content from the second article.
312
+
<p>"Continued on" layout.
313
+
<p>Using the same two-article markup as in previous examples, these paginated templates will display an inital page with the beginning of both articles. If article1 has more content than will fit on that first page, the next pages will show only content from the first article. When the content from the first article is consumed, then pages will follow with content from the second article.
<pclass="issue">IDPF has a more complex notion of 'available' content. For example, consider a content source that contains a single article with images scattered throughout. Assign the images to a flow named 'images' and the rest of the article to a flow named 'text'. Then define two page templates - one that has slots only for the text flow, and another that has slots for both the text and images flows. Each time a page is laid out, the original article is scanned to see whether an image element would have shown up on the page. If so, then that content from the 'images' flow is available for the purpose of selecting a template.
349
+
<pclass="issue">IDPF has a more complex notion of 'available' content. For example, consider a content source that contains a single article with images scattered throughout. Assign the images to a flow named 'images' and the rest of the article to a flow named 'text'. Then define two paginated templates - one that has slots only for the text flow, and another that has slots for both the text and images flows. Each time a page is laid out, the original article is scanned to see whether an image element would have shown up on the page. If so, then that content from the 'images' flow is available for the purpose of selecting a template.
274
350
275
351
<divclass='example'>
276
352
<p>Assume you have an article that contains both pull quotes and images. If only images <em>or</em> pull quotes would occur on a page, position those elements in the center right of the template. But if both images <em>and</em> pull quotes would appear, position the images in the top left and the pull quotes in the bottom right.
<pclass="issue">Should this specification define navigation? We could adopt the Paged Presentations properties from GCPM.
359
+
<pclass="issue">Should this specification define navigation? We could just refer to css3-gcpm.
284
360
285
361
<h2id="cssom">
286
362
CSS Object Model Modifications</h2>
287
363
288
-
<pclass='issue'>There should be extensive OM defined to access pages and slots. Lots to fill out here.
364
+
<pclass='issue'>There should be extensive OM defined to access pages and slots. Templates, pages and slots should be able to accept event handlers. Anchors should navigate to the appropriate page. What content fits in each slot and page should be accessible. Lots to fill out here.
0 commit comments