- From: Alan Stearns via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 29 Feb 2012 01:25:51 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-page-template
In directory hutz:/tmp/cvs-serv13143/css3-page-template
Modified Files:
Overview.src.html
Log Message:
Moved to @slot rules instead of ::slot selectors, along with many other changes
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-page-template/Overview.src.html,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -d -r1.2 -r1.3
--- Overview.src.html 18 Feb 2012 22:59:36 -0000 1.2
+++ Overview.src.html 29 Feb 2012 01:25:48 -0000 1.3
@@ -2,7 +2,7 @@
<html lang="en">
<head profile="http://www.w3.org/2006/03/hcard">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>CSS Paginated Templates Module Level 3</title>
+ <title>CSS Pagination Templates Module Level 3</title>
<link rel="stylesheet" type="text/css" href="../default.css">
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS]">
<link id="st" href="../alternate-spec-style.css" rel="stylesheet"
@@ -31,7 +31,7 @@
<body><div class="head">
<!--logo-->
-<h1>CSS Paginated Templates Module Level 3</h1>
+<h1>CSS Pagination Templates Module Level 3</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
@@ -67,16 +67,16 @@
<p>CSS is a language for describing the rendering of structured documents
(such as HTML and XML) on screen, on paper, in speech, etc. This module
- contains the features of CSS level 3 relating to paginated templates.
+ contains the features of CSS level 3 relating to pagination templates.
It includes and extends the functionality of CSS level 2 [[!CSS21]],
which builds on CSS level 1 [[CSS1]].
- The main extension compared to level 2 is the ability to specify one or more paginated templates that be used to render content.
+ The main extension compared to level 2 is the ability to specify one or more pagination templates that be used to render content.
<h2 class="no-num no-toc" id="status">Status of this document</h2>
-<p><strong>This document is a proposal that will need a few iterations before becoming an Editor's Draft. It has not yet been adopted by the Working Group, and should not be considered to be part of CSS.</strong></p>
+<p style="color:red"><strong>This document is a proposal that will need a few iterations before becoming an Editor's Draft. It has not yet been adopted by the Working Group, and should not be considered to be part of CSS.</strong></p>
-<p>The following features are at risk: <var class="replaceme">everything in this proposal</var>
+<p>The following features are at risk: none
<h2 class="no-num no-toc" id="contents">Table of contents</h2>
@@ -87,137 +87,103 @@
<p><em>This section is not normative.</em>
- <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.
+ <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.
- <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.
+ <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 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.
- <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.
+ <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.
- <p class="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").
+ <p class="issue">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").
<h3 id="placement">
Module Interactions</h3>
- <var class="replaceme"></var>
-
-<h3 id="values">
-Values</h3>
-
- <var class="replaceme"></var>
+ <p>This module uses named flows and region chains defined in [[CSS3-REGIONS]].
+ <p>This module uses the overflow-style property from [[CSS3-GCPM]].
+ <p>Some examples use positioning from [[CSS3GRID]].
<h2 id="templates-and-slots">
-Paginated Templates and Slots</h2>
+Pagination Templates and Slots</h2>
- <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.
+ <p>An @template rule defines a pagination template. Pagination templates contain one or more slots to display content. An element can use pagination templates if its 'overflow-style' property is set to any of the paged-* values defined in css3-gcpm. If a document defines no pagination templates, then there is an implicit paginated template with a single slot containing the paginated element's contents.
- <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.
+ <p class="issue">Do pagination templates get their size from the element with the overflow-style property, or can their size be set in the @template rule? Can we use a default 100%/100% size?
- <div class='example'>
- <p>Sample @template syntax with no content assignments
- <pre>
- @template {
- template-slots: one, two, three;
- ::slot(one) { }
- ::slot(two) { }
- ::slot(three) { }
- }
- </pre>
- </div>
+ <p>A slot is an anonymous box in a paginated template where content can be placed. In an @template rule @slot rules create slots. The order of @slot rules determines the order of the boxes in the paginated template. Each @slot rule can take an optional name.
- <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.
+ <p>Slots default to displaying the content of the paginated element. Slots can instead contain generated content assigned from the content property. Slots can also be assigned content from named flows.
<div class='example'>
<p>An @template rule that creates header and footer slots around the paginated element's content
<pre>
@template {
- template-slots: header, content, footer;
- ::slot(header) { }
- ::slot(content) { }
- ::slot(footer) { }
+ @slot header { content: "header string"; }
+ @slot { }
+ @slot footer { content: "footer string"; }
}
</pre>
</div>
- <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.
-
- <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.
-
- <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.
-
- <p class="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.
-
- <p class="issue">Is there a need to create more structure, nesting slots within slots?
-
-<h2 id="conditional-templates">
-Template Selection</h2>
-
- <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.
-
- <p class="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.
-
-<h3 id='templates-property'>
-Associating Templates with Elements</h3>
+ <p>If any slot in a particular page 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 form a region chain (within a pagination template and/or across pages created from pagination templates). When a new page is created a slot assigned element content or content from a named flow may not have any content left to render. In this case the slot for the exhausted content source is not instantiated.
- <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.
+ <p class="issue">If there is more than one slot with no 'content' or 'flow-from' assignment, does the element's content use all of these slots like a region chain, or is only the last unassigned slot used for content?
<div class='example'>
- <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.
-
- The four examples below are equivalent.
+ <p>The simplest example takes all of the content in the document and flows it into a single 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.
- <pre>
- body { overflow-style:paged-x; }
- </pre>
+ <p>The three examples below are equivalent, but merely illustrate how content from the element can be assigned to paginated template slots. Actual use of templates would either define more slots or assign content differently than the default.
+ <hr>
<pre>
- body { overflow-style:paged-x; }
- @template { }
+ body { overflow-style: paged-x; }
</pre>
-
+ <hr>
<pre>
- body { overflow-style:paged-x; }
+ body { overflow-style: paged-x; }
@template {
- template-slots: content;
- ::slot(content) { }
+ @slot { }
}
</pre>
-
+ <hr>
<pre>
- body { overflow-style:paged-x; }
- body > * { flow-into: body; }
+ body { overflow-style: paged-x; }
+ body > * { flow-into: body-flow; }
@template {
- template-slots: main;
- ::slot(main) {
- flow-from: body;
- }
+ @slot { flow-from: body-flow; }
}
+ <hr>
</pre>
</div>
+ <p class="issue">@slot rules are a first pass at defining CSS-created boxes. Other means of creating and addressing pseudo-element slots have been discussed on www-style. Another possibility is using HTML like WebComponents does to define the boxes. However the boxes are created there needs to be a way of assigning content to boxes and accessing the template structure through scripting. If pseudo-elements are used, then OM for pseudo-elements must be defined. If HTML templates are used a declarative method of mapping content to elements must be defined.
+
+ <p>Pagination templates can use declarations to determine the layout method for slots. @slot rules can use sizing and positioning declarations.
+
+ <p class="issue">Is there a need to create more structure, nesting slots within slots? If so, then slots can also have layout method declarations?
+
<div class='example'>
- <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>A paginated template could contain two side-by-side slots that paginate two separate articles. Side-by-side translations are often laid out this way. This example fills the left side of the paged view with content from an English article and the right side with content from a French article. 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.
<pre>
- body { overflow-style:paged-x; }
- #article1 { flow-into: article1; }
- #article2 { flow-into: article2; }
+ body { overflow-style: paged-x; }
+ .english { flow-into: english-flow; }
+ .french { flow-into: french-flow; }
@template {
- template-slots: left, right;
- ::slot (left) {
- flow-from: article1;
+ @slot left {
+ flow-from: english-flow;
width: 40%;
- margin: 5%;
+ padding: 5%;
float: left;
}
- ::slot (right) {
- flow-from: article2;
+ @slot right {
+ flow-from: french-flow;
width: 40%;
padding: 5%
float: right;
}
}
<body>
- <article id='article1'>...content...</article>
- <article id='article2'>...content...</article>
+ <article class='english'>...content...</article>
+ <article class='french'>...contenu...</article>
</body>
</pre>
</div>
@@ -225,58 +191,54 @@
<div class='example'>
<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.
<pre>
- body { overflow-style:paged-x; }
- #article1 { flow-into: article1; }
- #article2 { flow-into: article2; }
+ body { overflow-style: paged-x; }
+ .english { flow-into: english-flow; }
+ .french { flow-into: french-flow; }
@template {
- template-slots: left, right;
- display:grid;
+ display: grid;
grid-columns: 1fr 1fr;
- ::slot (left) {
- flow-from: article1;
+ @slot left {
+ flow-from: english-flow;
padding: 5%;
grid-column: 1;
}
- ::slot (right) {
- flow-from: article2;
+ @slot right {
+ flow-from: french-flow;
padding: 5%
grid-column: 2;
}
}
<body>
- <article id='article1'>...content...</article>
- <article id='article2'>...content...</article>
+ <article class='english'>...content...</article>
+ <article class='french'>...contenu...</article>
</body>
</pre>
</div>
+<h2 id="conditional-templates">
+Template Selection</h2>
+
+ <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' and 'available-flow' declarations, or just taking the first template found.
+
<div class='example'>
- <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.
+ <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.
+
<pre>
- body { overflow-style:paged-x; }
- #article1 { flow-into: article1; }
- #article2 { flow-into: article2; }
- @template {
- template-slots: left, right;
- ::slot (left) {
- flow-from: article1;
- padding: 5%;
- column-width: 20em;
- }
- ::slot (right) {
- flow-from: article2;
- padding: 5%
- column-width: 20em;
- }
- }
- <body>
- <article id='article1'>...content...</article>
- <article id='article2'>...content...</article>
- </body>
+ div { overflow-style: paged-x; }
+ .either-two-or-three { template-set: two three; }
+ .only-three { template-set: three; }
+
+ @template one { ... }
+ @template two { ... }
+ @template three { ... }
+
+ <div class='any-template'> ... </div>
+ <div class='either-two-or-three'> ... </div>
+ <div class='only-three'> ... </div>
</pre>
</div>
- <p class="issue">Add an example using media queries to choose between portrait and landscape templates.
+ <p class="issue">Instead of specifying a template-set, should there be a way of scoping @template rules to an element? The reason not to is to be able to re-use pagination templates with multiple elements.
<h3 id='ordered-templates'>
Selecting Templates by Page Order</h3>
@@ -285,17 +247,18 @@
<p class="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?
+ <p class="issue">Describe how @template rules with selectors cascade.
+
<div class='example'>
- <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
+ <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.
<p class="issue">define "fancy."
<pre>
@template :first {
- template-slots: first-left, first-right;
- ::slot (first-left) {
+ @slot left {
//fancy styling
flow-from: article1;
}
- ::slot (first-right) {
+ @slot right {
//fancy styling
flow-from: article2;
}
@@ -304,64 +267,76 @@
</div>
<h3 id='selection-from-available-content'>
-Selecting Templates from Available Content</h3>
+Selecting Templates from Required Flows</h3>
- <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.
+ <p>The 'required-flow' property can be used in a paginated 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.
<div class='example'>
<p>"Continued on" layout.
- <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.
+ <p>Using the same two-article markup as in previous examples, these pagination templates will display an inital page with the beginning of both articles. If the lead story has more content than will fit on that first page, the next pages will show only content from that lead story. When the content from the lead story is consumed, then pages will follow with content from the related article.
<pre>
+ body { overflow-style: paged-x; }
+ .lead-story { flow-into: first-flow; }
+ .related-article { flow-into: second-flow; }
@template :first {
- template-slots: left, right;
- ::slot (left) {
- flow-from: article1;
+ @slot left {
+ flow-from: first-flow;
width: 40%;
- margin: 5%;
+ padding: 5%;
float: left;
}
- ::slot (right) {
- flow-from: article2;
+ @slot right {
+ flow-from: second-flow;
width: 40%;
padding: 5%
float: left;
}
}
@template {
- template-slots: first;
- required-flow: article1;
- ::slot(first) {
- flow-from: article1;
+ required-flow: first-flow;
+ @slot first {
+ flow-from: first-flow;
column-width: 20em;
}
}
@template {
- template-slots: second;
- required-flow: article2;
- ::slot(second) {
- flow-from: article2;
+ required-flow: second-flow;
+ @slot second {
+ flow-from: second-flow;
column-width: 20em;
}
}
+ <body>
+ <article class='lead-story'>...content...</article>
+ <article class='related-article'>...content...</article>
+ </body>
</pre>
</div>
- <p class="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.
+<h3 id='selection-from-available-content'>
+Selecting Templates from Available Content</h3>
+
+ <p>Pagination templates can be selected based on the order of content in the original markup. Content may be split out into one or more named flows, but the original order can be discovered in the markup.
+
+ <p>Pagination templates have a 'primary' content flow. The primary content for a pagination template is usually the content of the paginated element. If no slot displays the element contents, then the primary content of the paginated template is the first named flow in its required-flow declaration.
+
+ <p>When selecting the pagination template for the next page, the primary content flow in the original markup can be scanned to determine whether any out-of-flow content in named flows was originally related to the next page of primary flow. If this is the case, then those named flows have 'available' content for the purpose of selecting an appropriate template that can display this content.
+
+ <p>Pagination templates can have an 'available-flow' declaration listing the named flows that must have available content relative to the pagination template's primary flow.
+
+ <p class="issue">Expand this.
+
+ <p class="issue">IDPF has a 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 pagination 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.
<div class='example'>
<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.
<p class="issue">code this example
</div>
-<h2 id="page-template-navigation">
-Navigating Pages</h2>
-
- <p class="issue">Should this specification define navigation? We could just refer to css3-gcpm.
-
<h2 id="cssom">
CSS Object Model Modifications</h2>
- <p class='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.
+ <p class='issue'>There should be extensive OM defined to access pages and slots. What page is being displayed should be available. Templates, pages and slots should be able to accept event handlers. Anchors should navigate to the appropriate page (as should search). What content fits in each slot and page should be accessible. Lots to fill out here.
<h2 id="conformance">
Conformance</h2>
Received on Wednesday, 29 February 2012 01:25:54 UTC