- From: Alan Stearns via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 18 Feb 2012 22:59:38 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-page-template
In directory hutz:/tmp/cvs-serv655/css3-page-template
Modified Files:
Overview.src.html
Log Message:
Changed page-templates proposal to be element- rather than document-based
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-page-template/Overview.src.html,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -d -r1.1 -r1.2
--- Overview.src.html 13 Feb 2012 03:21:55 -0000 1.1
+++ Overview.src.html 18 Feb 2012 22:59:36 -0000 1.2
@@ -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 Page Templates Module Level 3</title>
+ <title>CSS Paginated 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 Page Templates Module Level 3</h1>
+<h1>CSS Paginated Templates Module Level 3</h1>
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
@@ -67,10 +67,10 @@
<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 paged view templates.
+ contains the features of CSS level 3 relating to paginated 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 templates for a paged view to use to render content.
+ The main extension compared to level 2 is the ability to specify one or more paginated templates that be used to render content.
<h2 class="no-num no-toc" id="status">Status of this document</h2>
@@ -89,9 +89,11 @@
<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 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.
+ <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>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.
+ <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 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").
<h3 id="placement">
Module Interactions</h3>
@@ -104,49 +106,102 @@
<var class="replaceme"></var>
<h2 id="templates-and-slots">
-Page Templates and Slots</h2>
+Paginated Templates and Slots</h2>
- <p class="issue">Should we extend the existing @page rule or create a new @page-template or @page-master rule?
- <p class="issue">Alternately, we could use concepts from WebComponents to define templates.
+ <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>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.
+ <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">Should the property name be page-slots instead of positioned-slots?
+ <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>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.
+ <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 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.
+ <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) { }
+ }
+ </pre>
+ </div>
- <p>The default size for a paged view is the size of the viewport.
+ <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 class="issue">Do we need to define vertical-align behavior for slots, the way css3-layout does?
+ <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>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.
+
<div class='example'>
- <p class="issue">Add graphics for all of the examples.
+ <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 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.
<pre>
- body { flow-into: body; }
+ body { overflow-style:paged-x; }
+ </pre>
- @page {
- positioned-slots: main;
+ <pre>
+ body { overflow-style:paged-x; }
+ @template { }
+ </pre>
+
+ <pre>
+ body { overflow-style:paged-x; }
+ @template {
+ template-slots: content;
+ ::slot(content) { }
+ }
+ </pre>
+
+ <pre>
+ body { overflow-style:paged-x; }
+ body > * { flow-into: body; }
+ @template {
+ template-slots: main;
::slot(main) {
flow-from: body;
}
}
</pre>
- <p class="issue">Should there be an implicit 'body' flow?
</div>
<div class='example'>
- <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.
+ <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.
<pre>
+ body { overflow-style:paged-x; }
#article1 { flow-into: article1; }
#article2 { flow-into: article2; }
- @page {
- positioned-slots: left, right;
+ @template {
+ template-slots: left, right;
::slot (left) {
flow-from: article1;
width: 40%;
@@ -157,7 +212,7 @@
flow-from: article2;
width: 40%;
padding: 5%
- float: left;
+ float: right;
}
}
<body>
@@ -168,12 +223,13 @@
</div>
<div class='example'>
- <p>The example above could position the slots using grid layout rather than floats.
+ <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; }
- @page {
- positioned-slots: left, right;
+ @template {
+ template-slots: left, right;
display:grid;
grid-columns: 1fr 1fr;
::slot (left) {
@@ -194,28 +250,47 @@
</pre>
</div>
- <p class="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.
+ <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.
+ <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>
+ </pre>
+ </div>
<p class="issue">Add an example using media queries to choose between portrait and landscape templates.
-<h2 id="conditional-templates">
-Conditional Template Selection</h2>
-
- <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.
-
<h3 id='ordered-templates'>
Selecting Templates by Page Order</h3>
- <p>Selectors such as :first can be used on a page template to define a separate template for pages that match the selector.
+ <p>Selectors such as :first can be used on a paginated template to define a separate template for pages that match the selector.
- <p class="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?
+ <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?
<div class='example'>
- <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
+ <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 class="issue">define "fancy."
<pre>
- @page :first {
- positioned-slots: first-left, first-right;
+ @template :first {
+ template-slots: first-left, first-right;
::slot (first-left) {
//fancy styling
flow-from: article1;
@@ -231,13 +306,14 @@
<h3 id='selection-from-available-content'>
Selecting Templates from Available Content</h3>
- <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.
+ <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.
<div class='example'>
- <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.
+ <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.
<pre>
- @page :first {
- positioned-slots: left, right;
+ @template :first {
+ template-slots: left, right;
::slot (left) {
flow-from: article1;
width: 40%;
@@ -251,26 +327,26 @@
float: left;
}
}
- @page {
- positioned-slots: first;
+ @template {
+ template-slots: first;
required-flow: article1;
::slot(first) {
flow-from: article1;
- column-width: 12em;
+ column-width: 20em;
}
}
- @page {
- positioned-slots: second;
+ @template {
+ template-slots: second;
required-flow: article2;
::slot(second) {
flow-from: article2;
- column-width: 12em;
+ column-width: 20em;
}
}
</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 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.
+ <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.
<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.
@@ -280,12 +356,12 @@
<h2 id="page-template-navigation">
Navigating Pages</h2>
- <p class="issue">Should this specification define navigation? We could adopt the Paged Presentations properties from GCPM.
+ <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. Lots to fill out here.
+ <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.
<h2 id="conformance">
Conformance</h2>
Received on Saturday, 18 February 2012 22:59:40 UTC