csswg-drafts/css-page-4/Overview.src.html at 71bff296a92fab5e9555d01951792e5115a51077 · w3c/csswg-drafts · GitHub

1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html lang="en">  <head>    <meta content="text/html; charset=utf-8" http-equiv="content-type">    <title>Proposals for the future of CSS Paged Media</title>    <link href="../default.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/W3C-ED.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> </head>  <body class="h-entry">    <div>      <div class="head">        <!--logo-->        <h1 class="p-name">Proposals for the future of CSS Paged Media</h1>        <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] <span class="dt-updated"><span              class="value-title"              title="[CDATE]">[DATE]</span></span></h2>        <dl>          <dt>This version:</dt>          <dd><a class="u-url" href="https://drafts.csswg.org/css4-page/">https://drafts.csswg.org/css4-page/</a></dd>          <!-- <dd><a class="u-url" href="[VERSION]">https://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]</a></dd> -->          <dt>Latest version:</dt>          <dd><a href="https://www.w3.org/TR/css4-page">https://www.w3.org/TR/css4-page</a></dd>          <dt>Previous version:</dt>          <dd>--</dd>          <dt>Issue Tracking:</dt>          <dd>TBD            <!-- or use the wiki:    <dd><a rel="issues" href="http://wiki.csswg.org/spec/css4-page"           >http://wiki.csswg.org/spec/css4-page</a></dd>-->          </dd>  <dt>Feedback:</dt>    <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-page%5D%20feedback"         >www-style@w3.org</a>          with subject line &ldquo;<kbd>[css-page]          <var>&hellip; message topic &hellip;</var></kbd>&rdquo;         (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"           >archives</a>)          <dt>Editor:</dt>          <dd>Daniel Glazman, Disruptive Innovations</dd>        </dl>        <!--copyright--> </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>      <!-- "Status of this document" -->      <h2 class="no-num no-toc" id="status">Status of this Document</h2>      <!--status-->      <nav id="toc">      <h2 class="no-num no-toc" id="contents">Table of Contents</h2>      <!--begin-toc-->      <!--end-toc-->      </nav>      <!-- "Introduction" -->      <h2 id="intro">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>      <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.</p>      <h2 id="conformance">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> [[!RFC2119]]. However, for readability, these words do not        appear in all uppercase letters in this specification.</p>      <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: </p>      <div class="example">        <p>This is an example of an informative example.</p>      </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>      <p class="note">Note, this is an informative note.</p>      <h2>The CSS 3 Page Model</h2>      <p>This section is informative.</p>      <p> </p>      The current Page Model, as described in <cite>CSS3 Module: Paged Media </cite>[[!CSS3PAGE]],      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></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>        <li>the <dfn id="page-border">page border</dfn></li>        <li>the <dfn id="page-padding">page padding</dfn></li>        <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.</li>      </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>[[!CSS3GCPM]].</p>      <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>      <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:</p>      <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>        <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>        <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>        <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>          [[!CSS3-REGIONS]] 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> [[!CSS3-EXCLUSIONS]], lay out the page area          into a grid using <cite>CSS Grid Layout</cite> [[!CSS3-GRID-LAYOUT]]          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>        <li>the <span class="css">@page</span> rule of <cite>CSS 2.1</cite>          [[!CSS21]] 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>        <li>++TBD</li>      </ul>      <ol>      </ol>      <div>        <h2 class="no-num" id="references">References</h2>        <h3 class="no-num" id="normative-references">Normative References</h3>        <!--normative-->        <h3 class="no-num" id="informative-references">Informative References</h3>        <!--informative--> </div>    </div>  </body></html>