<pre class=metadata>
Title: Proposals for the future of CSS Paged Media
Shortname: css-page
Level: 4
Group: csswg
Status: UD
Work Status: exploring
ED: https://drafts.csswg.org/css-page-4/
Editor: Daniel Glazman, Disruptive Innovations
Abstract: A list of issues with the current CSS page model, and possibly directions to explore for fixing it.
</pre>
<h2 id=css-page-model>The CSS 3 Page Model</h2>
This section is informative.
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="images/PageBox.png">
<figcaption>The CSS3 Page Model</figcaption>
</figure>
1. 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="images/RightMarginBoxes.png">
<figcaption>The 16 page-margin boxes<br>
(with highlight of 3 of them)<br>
</figcaption>
</figure>
2. the <dfn id="page-border">page border</dfn>
3. the <dfn id="page-padding">page padding</dfn>
4. and finally the <dfn id="page-area">page area</dfn>
containing the boxes generated by
the flow of the main contents of the document.
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]].
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.
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:
* 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.
* no editing environment available on the market
and in particular Wysiwyg text editor
(for instance like Microsoft Word)
implements such a box model.
* 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.
* the ''@page'' 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 <css>''@slot</css> 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 ''@page'' 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.
* the ''@page'' 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.
* ++TBD
0 commit comments