Proposals for the future of CSS Paged Media

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang=en> <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ "> <meta content="text/html; charset=utf-8" http-equiv=content-type> <title>Proposals for the future of CSS Paged Media</title> <link href="http://purl.org/dc/terms/" rel=schema.dcterms> <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel=dcterms.rights> <meta content="Proposals for the future of CSS Paged Media" name=dcterms.title> <meta content=text name=dcterms.type> <meta content=2013-03-07 name=dcterms.issued> <meta content="Daniel Glazman" name=dcterms.creator> <meta content=W3C name=dcterms.publisher> <meta content="http://dev.w3.org/csswg/www-style/" name=dcterms.identifier> <link href="../default.css" rel=stylesheet type="text/css"> <link href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet type="text/css"> <style type="text/css"> .keyword { font-weight: bold; } .equation { padding-top: 2%; padding-right: 2%; padding-bottom: 2%; padding-left: 2%; } table.equation { text-align: center; } td, th { vertical-align: top; } pre { font-size: 1em; } #margin-values { border-collapse: collapse; } #margin-values td, #margin-values th { padding-top: 0.2em; padding-right: 0.2em; padding-bottom: 0.2em; padding-left: 0.2em; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; } .property-list { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; padding-top: 0.2em; padding-right: 0.2em; padding-bottom: 0.2em; padding-left: 0.2em; margin-top: 2em; } .property-list td { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; padding-top: 0.1em; padding-right: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; } .editorial { display: block; font-family: arial, helvetica, sans-serif; font-size: 80%; margin-left: 0.5in; margin-right: 1in; padding-top: 0.125in; padding-right: 0.125in; padding-bottom: 0.125in; padding-left: 0.125in; background-color: #ffffdd; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; } .editorial:after { content: "Ed."; } .RFC2119 { -epub-text-transform: lowercase; text-transform: lowercase; font-style: italic; } em em.RFC2119 { -epub-text-transform: lowercase; text-transform: lowercase; font-style: normal; } table.page-sizes { border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; margin-top: 1.5em; } table.page-sizes td { border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; } table.page-sizes th { border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; padding-top: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; padding-left: 0.5em; background-color: #ffffaa; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; } .floating-right-image { float: right; margin-left: 1em; margin-bottom: 1em; } figure { counter-increment: figure-counter; font-style: italic; font-size: smaller; } figure > legend:before { content: "Figure " counter(figure-counter); display: block; } </style> <body class=h-entry> <div> <div class=head>  <p><a href="http://www.w3.org/"><img alt=W3C height=48 src="https://www.w3.org/Icons/w3c_home" width=72></a>  <h1 class=p-name>Proposals for the future of CSS Paged Media</h1> <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span class=dt-updated><span class=value-title title=20130307> 7 March 2013</span></span></h2> <dl> <dt>This version: <dd><a class=u-url href="http://dev.w3.org/csswg/css4-page/">http://dev.w3.org/csswg/css4-page/</a></dd>  <dt>Latest version: <dd><a href="http://www.w3.org/TR/css4-page">http://www.w3.org/TR/css4-page</a> <dt>Previous version: <dd>-- <dt>Issue Tracking: <dd>TBD  <dt>Feedback:</dt> <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-page%5D%20feedback" >www-style@w3.org</a> with subject line “<kbd>[css-page] <var>… message topic …</var></kbd>” (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/" >archives</a>) <dt>Editor: <dd>Daniel Glazman, Disruptive Innovations </dl>  <p class=copyright><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p> </div> <hr title="Separator for header"> <h2 class="no-num no-toc" id=abstract>Abstract</h2> <p> <span class=p-summary> This module describes an extension of the page model that partitions a flow into pages. It adds to Paged Media Level 3 features introduced by other modules like CSS Regions or CSS Exclusions and Shapes: content flows, exclusions, more powerful headers and footers, etc. It does not deprecate nor obsolete Paged Media Level 3 but is designed to live gracefully with it.</span></p>  <h2 class="no-num no-toc" id=status>Status of this Document</h2>  <p>This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as work in progress. <p>The (<a href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bwww-style%5D%20PUT%20SUBJECT%20HERE"> www-style@w3.org</a> (see <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for discussion of this specification. When sending e-mail, please put the text “www-style” in the subject, preferably like this: “[www-style] <em>…summary of comment…</em>” <p>This document was produced by the <a href="/Style/CSS/members">CSS Working Group</a> (part of the <a href="/Style/">Style Activity</a>). <p>This document was produced by a group operating under the <a href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" rel=disclosure>public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>.</p>  <nav id="toc"> <h2 class="no-num no-toc" id=contents>Table of contents</h2>  <ul class=toc> <li><a href="#intro"><span class=secno>1. </span>Introduction</a> <li><a href="#conformance"><span class=secno>2. </span>Conformance </a> <li><a href="#the-css-3-page-model"><span class=secno>3. </span>The CSS 3 Page Model</a> <li class=no-num><a href="#references">References</a> <ul class=toc> <li class=no-num><a href="#normative-references">Normative References</a> <li class=no-num><a href="#informative-references">Informative References</a> </ul> </ul>  </nav>  <h2 id=intro><span class=secno>1. </span>Introduction</h2> <p>Convergence between electronic books and Open Web Standards requires new features related to pagination and page layouts. If CSS Paged Media Level 3 paved the way, extension of its page model is now needed to provide the industry with solutions more in line with the new usage modes of Web Standards on one hand, better integrated with the state of the art of CSS on the other. <p>This module describes how other CSS modules like Regions, Grid Layout, Exclusions and Shapes can enhance the page model for a better pagination on the Web and on print. <h2 id=conformance><span class=secno>2. </span>Conformance</h2> <p>All of the text in this specification is normative except sections explicitly marked as non-normative, examples, and notes. The keywords "<em class=RFC2119>MUST</em>", "<em class=RFC2119>SHALL</em>", "<em class=RFC2119>MUST NOT</em>", "<em class=RFC2119>SHALL NOT</em>", "<em class=RFC2119>REQUIRED</em>", "<em class=RFC2119>SHOULD</em>", "<em class=RFC2119>SHOULD NOT</em>", "<em class=RFC2119>RECOMMENDED</em>", "<em class=RFC2119>MAY</em>", and "<em class=RFC2119>OPTIONAL</em>" when used in this document are to be interpreted as described in <cite>RFC 2119</cite> <a href="#RFC2119" rel=biblioentry>[RFC2119]</a>. However, for readability, these words do not appear in all uppercase letters in this specification. <p>Examples in this specification are introduced with the words "for example" or are set apart from the normative text with <code>class="example"</code>, like this: <div class=example> <p>This is an example of an informative example. </div> <p>Informative notes begin with the word "Note" and are set apart from the normative text with <code>class="note"</code>, like this: <p class=note>Note, this is an informative note. <h2 id=the-css-3-page-model><span class=secno>3. </span>The CSS 3 Page Model</h2> <p>This section is informative. <p></p> The current Page Model, as described in <cite>CSS3 Module: Paged Media </cite><a href="#CSS3PAGE" rel=biblioentry>[CSS3PAGE]</a>, is the following one: the printable area of a page, the <dfn id=page-box>page box</dfn>, is made of one page box itself divided in four areas: <figure><img alt="CSS 3 Paged Media's page model" src=PageBox.png> <legend>The CSS3 Page Model</legend> </figure> <p> <ol> <li>the <dfn id=page-margin>page margin</dfn>; that area is itself divided into 16 <dfn id=page-margin-boxes>page-margin boxes</dfn> (@top-left-corner, @top-left, @top-center, etc. ) <figure><img alt="CSS 3 page-margin boxes" src=RightMarginBoxes.png> <legend>The 16 page-margin boxes<br> (with highlight of 3 of them)<br> </legend> </figure> <li>the <dfn id=page-border>page border</dfn> <li>the <dfn id=page-padding>page padding</dfn> <li>and finally the <dfn id=page-area>page area</dfn> containing the boxes generated by the flow of the main contents of the document. </ol> <p>It's is possible to flow content, for instance page headers and footers or footnotes, into a page-margin box using features introduced by the <cite>CSS Generated Content for Paged Media Module </cite><a href="#CSS3GCPM" rel=biblioentry>[CSS3GCPM]</a>. <p>It is also possible to define multiple page templates for a single document using the <span class=css>@page</span> at-rule that allows to select the first page, left pages, right pages or named pages of a paginated flow. <p>If this page model allowed the publishing industry to adopt HTML and CSS as pivot formats, it starts showing its limits for the following reasons: <ul> <li>the 16 page-margin boxes are an extension of the print features offered by desktop browsers. Desktop browsers usually offer control over 6 page-margin boxes only. Only one desktop browser claims implementation of the page model described above in the fourteen last years. The other desktop browsers' control over the 6 page-margin boxes is then not achieved through the cascade of CSS UA stylesheets. <li>no editing environment available on the market and in particular Wysiwyg text editor (for instance like Microsoft Word) implements such a box model. <li>it's not possible with the current model to position headers and footers (for instance the HTML5 header and footer elements) arbitrarily in the page area. <li>the <span class=css>@page</span> at-rule currently allows nested at-rules only for the definition of page-margin boxes. Similarly, the set of CSS properties applicable to a page box is limited and it is impossible in this model to use <cite>CSS Regions Module Level 3</cite> <a href="#CSS3-REGIONS" rel=biblioentry>[CSS3-REGIONS]</a> to flow content into a given predefined area of a page, exclude an area from the page using <cite>CSS 3 Exclusions and Shapes Module</cite> <a href="#CSS3-EXCLUSIONS" rel=biblioentry>[CSS3-EXCLUSIONS]</a>, lay out the page area into a grid using <cite>CSS Grid Layout</cite> <a href="#CSS3-GRID-LAYOUT" rel=biblioentry>[CSS3-GRID-LAYOUT]</a> or using <span class=css>@slot</span> rules that were discussed multiple times by the CSS Working Group in the recent past. The successful electronic book editing environment of Apple Inc., iBooks Author, already allows <span class=css>@page</span> rules to specify arbitrary slots, arbitrary exclusions and shapes, and extends the list of applicable properties; most of its advanced layout capabilities are based on these features. <li>the <span class=css>@page</span> rule of <cite>CSS 2.1</cite> <a href="#CSS21" rel=biblioentry>[CSS21]</a> is intended for use on print media, not dynamic media. The spread of complex HTML-based slideshows and electronic book viewers has shown that the Page Model should also apply to screen media and alike. <li>++TBD </ul> <ol></ol> <div> <h2 class=no-num id=references>References</h2> <h3 class=no-num id=normative-references>Normative References</h3>   <dl class=bibliography> <dt style="display: none">  <dt id=CSS21>[CSS21] <dd>Bert Bos; et al. <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June 2011. W3C Recommendation. URL: <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a> </dd>  <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS] <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/"><cite>CSS Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a> </dd>  <dt id=CSS3-GRID-LAYOUT>[CSS3-GRID-LAYOUT] <dd>Alex Mogilevsky; et al. <a href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/"><cite>CSS Grid Layout.</cite></a> 6 November 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/">http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a> </dd>  <dt id=CSS3-REGIONS>[CSS3-REGIONS] <dd>Vincent Hardy; Alex Mogilevsky; Alan Stearns. <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/"><cite>CSS Regions Module Level 3.</cite></a> 23 August 2012. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">http://www.w3.org/TR/2012/WD-css3-regions-20120823/</a> </dd>  <dt id=CSS3GCPM>[CSS3GCPM] <dd>Håkon Wium Lie. <a href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/"><cite>CSS Generated Content for Paged Media Module.</cite></a> 29 November 2011. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/">http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/</a> </dd>  <dt id=CSS3PAGE>[CSS3PAGE] <dd>Håkon Wium Lie; Melinda Grant. <a href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module: Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in progress.) URL: <a href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a> </dd>  <dt id=RFC2119>[RFC2119] <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet RFC 2119. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> </dd>  </dl>  <h3 class=no-num id=informative-references>Informative References</h3>   <dl class=bibliography> <dt style="display: none">  </dl> </div> </div>

CINXE.COM

Proposals for the future of CSS Paged Media