8000 csswg-drafts/css-page-3/Overview.html at b9cf8307c1200b46b856f0e4c4006164a77a497a · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
3974 lines (3930 loc) · 274 KB

Overview.html

File metadata and controls

3974 lines (3930 loc) · 274 KB
<!doctype html><html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Paged Media Module Level 3</title>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<meta content="revising" name="csswg-work-status">
<meta content="WD" name="w3c-status">
<meta content="This CSS module specifies how pages are generated and laid out to hold fragmented content in a paged presentation. It adds functionality for controlling page margins, page size and orientation, and headers and footers, and extends generated content to enable page numbering and running headers / footers. The process of paginating a flow into such generated pages is covered in [[!CSS3-BREAK]]." name="abstract">
<link href="../default.css" rel="stylesheet" type="text/css">
<meta content="Bikeshed version 018be3f805d3272ce699a232398d6e3902d1ea8d" name="generator">
<link href="https://www.w3.org/TR/css-page-3/" rel="canonical">
<meta content="5789727b1d26b3fe1d04b85f8ccef06836743b59" name="document-revision">
<style>
#margin-values { border-collapse: collapse; }
#margin-values td,
#margin-values th
{
padding: 0.2em;
border: thin solid black;
}
.property-list
{
border: 1px solid black;
padding: .2em;
margin-top: 2em;
}
.property-list td
{
border: 1px solid black;
padding: .1em;
}
table.page-sizes
{
border: thin solid;
margin-top: 1.5em;
}
table.page-sizes td
{
border: thin solid;
padding: .5em;
}
table.page-sizes th
{
border: thin solid;
padding: .5em;
background: #ffffaa;
}
</style>
<style>/* style-md-lists */
/* This is a weird hack for me not yet following the commonmark spec
regarding paragraph and lists. */
[data-md] > :first-child {
margin-top: 0;
}
[data-md] > :last-child {
margin-bottom: 0;
}</style>
<style>/* style-counters */
body {
counter-reset: example figure issue;
}
.issue {
counter-increment: issue;
}
.issue:not(.no-marker)::before {
content: "Issue " counter(issue);
}
.example {
counter-increment: example;
}
.example:not(.no-marker)::before {
content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
content: "Invalid Example" counter(example);
}
figcaption {
counter-increment: figure;
}
figcaption:not(.no-marker)::before {
content: "Figure " counter(figure) " ";
}</style>
<style>/* style-dfn-panel */
.dfn-panel {
position: absolute;
z-index: 35;
height: auto;
width: -webkit-fit-content;
width: fit-content;
max-width: 300px;
max-height: 500px;
overflow: auto;
padding: 0.5em 0.75em;
font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
background: #DDDDDD;
color: black;
border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
display: inline-block;
position: fixed;
left: .5em;
bottom: 2em;
margin: 0 auto;
max-width: calc(100vw - 1.5em - .4em - .5em);
max-height: 30vh;
}
.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-selflinks */
.heading, .issue, .note, .example, li, dt {
position: relative;
}
a.self-link {
position: absolute;
top: 0;
left: calc(-1 * (3.5rem - 26px));
width: calc(3.5rem - 26px);
height: 2em;
text-align: center;
border: none;
transition: opacity .2s;
opacity: .5;
}
a.self-link:hover {
opacity: 1;
}
.heading > a.self-link {
font-size: 83%;
}
li > a.self-link {
left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
top: auto;
left: auto;
opacity: 0;
width: 1.5em;
height: 1.5em;
background: gray;
color: white;
font-style: normal;
transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
opacity: 1;
}
dfn > a.self-link:hover {
color: black;
}
a.self-link::before { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before { content: "#"; }</style>
<style>/* style-autolinks */
.css.css, .property.property, .descriptor.descriptor {
color: #005a9c;
font-size: inherit;
font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
content: "‘";
}
.css::after, .property::after, .descriptor::after {
content: "’";
}
.property, .descriptor {
/* Don't wrap property and descriptor names */
white-space: nowrap;
}
.type { /* CSS value <type> */
font-style: italic;
}
pre .property::before, pre .property::after {
content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
content: "’";
}
[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
content: "";
}
[data-link-type=element],
[data-link-type=element-attr] {
font-family: Menlo, Consolas, "DejaVu Sans Mono", mon 8348 ospace;
font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }
[data-link-type=biblio] {
white-space: pre;
}</style>
<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-WD" rel="stylesheet" type="text/css">
<body class="h-entry">
<div class="head">
<p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
<h1 class="p-name no-ref" id="title">CSS Paged Media Module Level 3</h1>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">W3C Working Draft, <time class="dt-updated" datetime="2018-10-18">18 October 2018</time></span></h2>
<div data-fill-with="spec-metadata">
<dl>
<dt>This version:
<dd><a class="u-url" href="https://www.w3.org/TR/2018/WD-css-page-3-20181018/">https://www.w3.org/TR/2018/WD-css-page-3-20181018/</a>
<dt>Latest published version:
<dd><a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a>
<dt>Editor's Draft:
<dd><a href="https://drafts.csswg.org/css-page-3/">https://drafts.csswg.org/css-page-3/</a>
<dt>Previous Versions:
<dd><a href="https://www.w3.org/TR/2013/WD-css3-page-20130314/" rel="prev">https://www.w3.org/TR/2013/WD-css3-page-20130314/</a>
<dt>Test Suite:
<dd><a href="http://test.csswg.org/suites/css-page-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-page-3_dev/nightly-unstable/</a>
<dt>Issue Tracking:
<dd><a href="http://www.w3.org/Style/CSS/Tracker/products/13">Tracker</a>
<dd><a href="#issues-index">Inline In Spec</a>
<dd><a href="https://github.com/w3c/csswg-drafts/labels/css-page-3">GitHub Issues</a>
<dt class="editor">Editors:
<dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert, formerly Mozilla</span>)
<dd class="editor p-author h-card vcard" data-editor-id="58001"><a class="p-name fn u-url url" href="http://exyr.org/about/">Simon Sapin</a> (<span class="p-org org">Mozilla, formerly Kozea</span>)
<dt>Suggest an Edit for this Spec:
<dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-page-3/Overview.bs">GitHub Editor</a>
</dl>
</div>
<div data-fill-with="warning"></div>
<p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2018 <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>). 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/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
<hr title="Separator for header">
</div>
<div class="p-summary" data-fill-with="abstract">
<h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
<p>This CSS module specifies how pages are generated and laid out to hold fragmented content in a paged presentation. It adds functionality for controlling page margins, page size and orientation, and headers and footers, and extends generated content to enable page numbering and running headers / footers. The process of paginating a flow into such generated pages is covered in <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a>.</p>
<a href="http://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc.
</div>
<h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
<div data-fill-with="status">
<p><em>This section describes the status of this document at the time of
its publication. Other documents may supersede this document. A list of
current W3C publications and the latest revision of this technical report
can be found in the <a href="https://www.w3.org/TR/">W3C technical reports
index at https://www.w3.org/TR/.</a></em> </p>
<p>Publication as a Working Draft does not imply endorsement by the W3C
Membership. This is a draft document and may be updated, replaced or
obsoleted by other documents at any time. It is inappropriate to cite this
document as other than work in progress. </p>
<p><a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
When filing an issue, please put the text “css-page” in the title,
preferably like this:
“[css-page] <i data-lt>…summary of comment…</i>”.
All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
<p>This document was produced by the <a href="https://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
the <a href="https://www.w3.org/Style/">Style Activity</a>). </p>
<p>This document was produced by a group operating under the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
W3C maintains a <a href="https://www.w3.org/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="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>
<p>This document is governed by the <a href="https://www.w3.org/2018/Process-20180201/" id="w3c_process_revision">1 February 2018 W3C Process Document</a>.</p>
<p></p>
</div>
<div data-fill-with="at-risk"></div>
<nav data-fill-with="table-of-contents" id="toc">
<h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
<ol class="toc" role="directory">
<li><a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
<li><a href="#page-terms"><span class="secno">2</span> <span class="content"> Page Terminology</span></a>
<li>
<a href="#page-model"><span class="secno">3</span> <span class="content">The Page Model</span></a>
<ol class="toc">
<li><a href="#painting"><span class="secno">3.1</span> <span class="content"> Page Backgrounds and Painting Order</span></a>
<li><a href="#content-outside-box"><span class="secno">3.2</span> <span class="content">Content outside the page box</span></a>
<li><a href="#progression"><span class="secno">3.3</span> <span class="content">Page Progression</span></a>
</ol>
<li>
<a href="#page-selector-and-context"><span class="secno">4</span> <span class="content"> Page Selectors and the Page Context</span></a>
<ol class="toc">
<li><a href="#at-page-rule"><span class="secno">4.1</span> <span class="content"><span> The @page Rule</span></span></a>
<li>
<a href="#page-selectors"><span class="secno">4.2</span> <span class="content">Page selectors</span></a>
<ol class="toc">
<li><a href="#spread-pseudos"><span class="secno">4.2.1</span> <span class="content"><span></span> Spread pseudo-classes: <span class="css">:left</span>, <span class="css">:right</span></span></a>
<li><a href="#first-pseudo"><span class="secno">4.2.2</span> <span class="content"> First-page pseudo-class: <span class="css">:first</span></span></a>
<li><a href="#blank-pseudo"><span class="secno">4.2.3</span> <span class="content"> Blank-page pseudo-class: <span class=&q 8097 uot;css">:blank</span></span></a>
</ol>
<li><a href="#syntax-page-selector"><span class="secno">4.3</span> <span class="content">@page rule grammar</span></a>
<li><a href="#cascading-and-page-context"><span class="secno">4.4</span> <span class="content">Cascading in the page context</span></a>
</ol>
<li>
<a href="#margin-boxes"><span class="secno">5</span> <span class="content">Page-Margin Boxes</span></a>
<ol class="toc">
<li><a href="#margin-at-rules"><span class="secno">5.1</span> <span class="content">At-rules for page-margin boxes</span></a>
<li><a href="#populating-margin-boxes"><span class="secno">5.2</span> <span class="content">Populating page-margin boxes</span></a>
<li>
<a href="#margin-dimension"><span class="secno">5.3</span> <span class="content">Computing Page-margin Box Dimensions</span></a>
<ol class="toc">
<li><a href="#margin-box-terms"><span class="secno">5.3.1</span> <span class="content"> Page-Margin Box Layout Terminology</span></a>
<li>
<a href="#variable-sizing"><span class="secno">5.3.2</span> <span class="content"> Page-Margin Box Variable Dimension Computation Rules</span></a>
<ol class="toc">
<li><a href="#variable-auto-margins"><span class="secno">5.3.2.1</span> <span class="content">Margins</span></a>
<li><a href="#variable-auto-sizing"><span class="secno">5.3.2.2</span> <span class="content">Resolving <span class="css">auto</span> widths</span></a>
<li><a href="#variable-minmax"><span class="secno">5.3.2.3</span> <span class="content">Handling <span class="property">min-width</span> and <span class="property">max-width</span></span></a>
<li><a href="#variable-position"><span class="secno">5.3.2.4</span> <span class="content">Positioning</span></a>
<li><a href="#variable-mapping"><span class="secno">5.3.2.5</span> <span class="content">Boxes on other sides</span></a>
</ol>
<li><a href="#fixed-sizing"><span class="secno">5.3.3</span> <span class="content">Page-Margin Box Fixed Dimension Computation Rules</span></a>
</ol>
<li><a href="#margin-box-ex"><span class="secno">5.4</span> <span class="content"> Page-margin box examples</span></a>
</ol>
<li>
<a href="#page-properties"><span class="secno">6</span> <span class="content"> Page Properties</span></a>
<ol class="toc">
<li><a href="#page-based-counters"><span class="secno">6.1</span> <span class="content"> Page-based counters</span></a>
<li><a href="#margin-text-alignment"><span class="secno">6.2</span> <span class="content"> Page-margin boxes and default values</span></a>
</ol>
<li>
<a href="#page-size"><span class="secno">7</span> <span class="content"> Page Size</span></a>
<ol class="toc">
<li>
<a href="#page-size-prop"><span class="secno">7.1</span> <span class="content"> Page size: the <span class="property">size</span> property</span></a>
<ol class="toc">
<li><a href="#page-size-media-query"><span class="secno">7.1.1</span> <span class="content"> Media Queries</span></a>
</ol>
<li><a href="#marks"><span class="secno">7.2</span> <span class="content"> Crop and Registration Marks: the <span class="property">marks</span> property</span></a>
<li><a href="#bleed"><span class="secno">7.3</span> <span class="content"> Bleed Area: the <span class="property">bleed</span> property</span></a>
<li><a href="#renderingpages"><span class="secno">7.4</span> <span class="content"> Rendering page boxes that do not fit a page sheet</span></a>
<li><a href="#positioning-page-box"><span class="secno">7.5</span> <span class="content"> Positioning the page box on the sheet</span></a>
</ol>
<li>
<a href="#page-breaks"><span class="secno">8</span> <span class="content"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> Page Breaks </span></a>
<ol class="toc">
<li><a href="#using-named-pages"><span class="secno">8.1</span> <span class="content"> Using named pages: <span class="property">page</span></span></a>
</ol>
<li><a href="#image-properties"><span class="secno">9</span> <span class="content"> Image Properties</span></a>
<li>
<a href="#properties-list"><span class="secno"></span> <span class="content"> Appendix A: Applicable CSS2.1 Properties</span></a>
<ol class="toc">
<li><a href="#page-property-list"><span class="secno"></span> <span class="content"> CSS 2.1 Properties that apply within the page context</span></a>
<li><a href="#margin-property-list"><span class="secno"></span> <span class="content"> CSS 2.1 properties that apply within the margin contexts</span></a>
</ol>
<li><a href="#transfer-possibilities"><span class="secno"></span> <span class="content"> Appendix B: Transfer Possibilities</span></a>
<li><a href="#priv-sec"><span class="secno"></span> <span class="content"> Privacy and Security Considerations</span></a>
<li><a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a>
<li><a href="#acknowledgements"><span class="secno"></span> <span class="content">Acknowledgements</span></a>
<li>
<a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
<ol class="toc">
<li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
<li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
<li>
<a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
<ol class="toc">
<li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
<li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
<li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
</ol>
</ol>
<li>
<a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
<ol class="toc">
<li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
<li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
</ol>
<li>
<a href="#references"><span class="secno"></span> <span class="content">References</span></a>
<ol class="toc">
<li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
<li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
</ol>
<li>
<a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
<ol class="toc">
<li><a href="#page-descriptor-table"><span class="secno"></span> <span class="content"><span>@page</span> Descriptors</span></a>
</ol>
<li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
</ol>
</nav>
<main>
<h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
<p>Paged media (e.g., paper, transparencies, photo album pages, pages
displayed on computer screens as printed output simulations) differ from <a href="https://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a> in that the content of the document is split into one or more discrete
static display surfaces. To handle pages, CSS3 Paged Media describes how:</p>
<ul>
<li><a href="#page-breaks">page breaks</a> are created and avoided;
<li>the page properties such as size, orientation, margins, border, and
padding are specified;
<li>headers and footers are established within the page margins;
<li>content such as page counters are placed in the headers and footers; and
<li>orphans and widows can be controlled.
</ul>
<p>This module defines a <a href="#page-model">page model</a> that specifies how a
document is formatted within a rectangular area, called the <a href="#page-box-page-rule">page box</a>, that has finite width and height.</p>
<p>Although CSS3 does not specify how user agents transfer page boxes to sheets,
it does include certain mechanisms for telling user agents about the intended
page sheet <a href="#page-size">size and orientation</a>. In the general case,
CSS3 assumes that one page box will be transferred to one surface of similar
size.</p>
<p>All properties defined in this specification also accept the <a href="https://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their value, but for readability it has not been listed explicitly.</p>
<h2 class="heading settled" data-level="2" id="page-terms"><span class="secno">2. </span><span class="content"> Page Terminology</span><a class="self-link" href="#page-terms"></a></h2>
<p>The following terminology and accompanying diagrams help to describe the
page model:</p>
<dl>
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-sheet">Page sheet</dfn>
<dd> <img alt="The corner of a page sheet with the non-printable area at the edge and printable area inside it" height="148" src="images/PageSheet.png" style="float: right;" width="194"> The page sheet is one surface of the physical
medium. The illustration to the right shows a representation of the upper-left
corner of a page sheet.
<dt><dfn data-dfn-type="dfn" data-export data-lt="printable area" id="printable-area">Printable and non-printable areas<a class="self-link" href="#printable-area"></a></dfn>
<dd> The non-printable area is the area of a page sheet that a physical device such
as a printer is not capable of marking reliably, usually due to the printer’s
paper handling mechanism. This value is printer dependent and is usually a
small region along each edge of the page sheet. The printable area is the area
of page sheet that a printer <em>is</em> capable of marking reliably. The size
of the printable area is the size of the page sheet reduced by the size of the
non-printable area. A user agent may not know the dimensions of this area for a
particular printing device; but when its dimensions are known, user agents
may adjust the formatting of the document so that
content falls within the printable area. How this adjustment is accomplished is
device dependent within the constraints expressed in the sections <a href="#renderingpages">§7.4 Rendering page boxes that do not fit a page sheet</a> and <a href="#content-outside-box">§3.2 Content outside the page box</a>.
<dt><dfn data-dfn-type="dfn" data-export id="page-orientation">Page Orientation<a class="self-link" href="#page-orientation"></a></dfn>
<dd> The page orientation is defined by comparing the length of the edges of a <a data-link-type="dfn" href="#page-box" id="ref-for-page-box">page box</a>. The page box is a rectangle with two
perpendicular edges called the long edge and the short edge. The length of the
long edge is always greater than or equal to the length of the short edge. When
the page box is square, the two edges are of the same length and either can be
used as the long edge with the other being the short edge. This specification
defines page orientations of <a class="css" data-link-type="maybe" href="#valdef-page-size-portrait" id="ref-for-valdef-page-size-portrait">portrait</a> and <a class="css" data-link-type="maybe" href="#valdef-page-size-landscape" id="ref-for-valdef-page-size-landscape">landscape</a>.
<dt><dfn data-dfn-type="dfn" data-export data-lt="portrait|portrait orientation" id="portrait">Portrait Orientation<a class="self-link" href="#portrait"></a></dfn>
<dd> A portrait page’s height is greater than or equal to its width. Horizontal
elements are parallel to the short edge and vertical elements to the long edge.
<dt><dfn data-dfn-type="dfn" data-export data-lt="landscape|landscape orientation" id="landscape">Landscape Orientation<a class="self-link" href="#landscape"></a></dfn>
<dd>
A landscape page’s width is greater than or equal to its height. Horizontal
elements are parallel to the long edge and vertical elements to the short edge.
<p class="note" role="note"><span>Note:</span> Note that CSS3 makes no distinction between landscape and
reverse-landscape orientations. However, future versions of CSS may do so.
UAs should consider, when formatting for duplexed printing, the binding edge,
page progression, and ease of reading when choosing between landscape and
reverse-landscape renderings.</p>
<dt><dfn data-dfn-type="dfn" data-export id="duplex-printing">Duplex Printing<a class="self-link" href="#duplex-printing"></a></dfn>
<dd> Duplex printing prints one page box per side of a page sheet and uses both
sides of the page sheet. This module provides no ability to specify whether a
document is duplex printed, but the concept of left and right pages is based on
the assumption that the document is duplex printed, regardless of whether or
not it actually is.
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="binding-edge">Binding Edge</dfn>
<dd> The binding edge is the edge of the page box that is toward the binding if the
material is bound. The binding edge often has a larger margin than the opposite
edge to provide for the space used by the binding. The binding edge can be any
of the four edges. However, page sheets are customarily bound so that the
binding edge of page boxes with portrait orientation is vertical. This module
provides no method to specify the binding edge. In duplex printing, the binding
edge is on opposite sides of the page box for the left and right pages.
<dt><dfn data-dfn-type="dfn" data-export id="facing-pages">Facing Pages<a class="self-link" href="#facing-pages"></a></dfn>
<dd> Facing pages are two sequential pages such that when the document is duplex
printed they are on separate sheets of paper. Typically, the earlier page will
be the back side of one sheet and the later page will be the front side of
another. They are usually laid out so that the binding edges of facing pages
are vertical and adjacent when the pages are placed in their normal reading
orientation.
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="left-page">Left Page</dfn>
<dd> A page that would be on the left if it is part of a pair of facing pages as
typically laid out. Page layouts for documents using a left-to-right page
progression have the earlier of the facing pages on the left. Rules specific to
the left page can be specified using the <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left">:left</a> <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector">page selector</a>.
<dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="right-page">Right Page</dfn>
<dd> A page that would be on the right if it is part of a pair of facing pages as
typically laid out. Page layouts for documents using a right-to-left page
progression have the earlier of the facing pages on the right. Rules specific
to the right page can be specified using the <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right">:right</a> <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector①">page selector</a>.
</dl>
<h2 class="heading settled" data-level="3" id="page-model"><span class="secno">3. </span><span class="content">The Page Model</span><a class="self-link" href="#page-model"></a></h2>
<p>In the paged media formatting model, the document is transferred into one
or more page boxes. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-box">page box</dfn> is a specialized CSS
box that maps to a rectangular print media surface, such as a page of paper.
It is roughly analogous to the <a href="https://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a>. <img alt height="266" src="images/PageBox.png" style="float: right;" width="267"></p>
<p>As with other CSS <a href="https://www.w3.org/TR/CSS21/box.html">boxes</a>, a page box
consists of margin, border, padding, and content areas. The content and
margin areas of a page box have special functions:</p>
<p class="issue" id="issue-16b9253a"><a class="self-link" href="#issue-16b9253a"></a> In CSS 2.1, both the page box and page area are simple rectangles.
Neither is a CSS box with margins, borders, and padding.
This CSS box should be distinct from the page box and page area,
which would be its margin area and content area, respectively.
Naming ideas?</p>
<ul>
<li> The content area of a page box is called the <dfn data-dfn-type="dfn" data-export id="page-area">page area<a class="self-link" href="#page-area"></a></dfn>.
The content of the document is flowed into one or more page boxes.
The page area acts as a container for all the boxes generated by the root
element and its descendants that are laid out within a given page box. The
edges of the page area on the first page establish the rectangle that is the
initial <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block">containing block</a> of the document.
<li> The margin area of a page box is divided into
16 <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-margin-boxes">page-margin boxes</dfn>.
Each page-margin box has its own margin, border, padding and content areas.
Page-margin boxes are typically used to display running headers and footers.
</ul>
<p>The properties of a <a data-link-type="dfn" href="#page-box" id="ref-for-page-box①">page box</a> are determined by properties
declared within the <a data-link-type="dfn" href="#page-context" id="ref-for-page-context">page context</a>, which is the <a href="https://www.w3.org/TR/CSS21/syndata.html#x14">declaration block</a> of the <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page">@page</a> rule. Similarly the properties of a <a data-link-type="dfn" href="#page-margin-boxes" id="ref-for-page-margin-boxes">page-margin box</a> are determined by properties declared within its <a data-link-type="dfn" href="#margin-context" id="ref-for-margin-context">margin context</a>.
Declarations in the page context can affect the page box and/or inherit
to the page-margin boxes, but they do not apply to or inherit into the
document’s root element or other content.</p>
<p>The <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①">containing block</a> of the page box is specified using the <a class="property" data-link-type="propdesc" href="#descdef-page-size" id="ref-for-descdef-page-size">size</a> property in the <a data-link-type="dfn" href="#page-context" id="ref-for-page-context①">page context</a>. The width and horizontal margins
of the page box are then calculated exactly as for a <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">non-replaced block element in normal flow</a>. <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> The height and vertical margins
of the page box are calculated analogously (instead of using the block height
formulas). In both cases if the values are over-constrained, instead of
ignoring any margins, the containing block is resized to coincide with the
margin edges of the page box.</p>
<h3 class="heading settled" data-level="3.1" id="painting"><span class="secno">3.1. </span><span class="content"> Page Backgrounds and Painting Order</span><a class="self-link" href="#painting"></a></h3>
<p>When drawing a page of content, the page layers are painted in the
following painting order (bottommost first):</p>
<ol>
<li>page background
<li>document canvas
<li>page borders
<li>document contents
<li>page-margin boxes
</ol>
<p>In the page model, the page background behaves similar to the root background:
its <a data-link-type="dfn" href="https://www.w3.org/TR/css3-background/#background-painting-area" id="ref-for-background-painting-area">background painting area</a> is the <a data-link-type="dfn" href="#bleed-area" id="ref-for-bleed-area">bleed area</a>,
which covers the entire page box, including its margins (regardless of <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-clip" id="ref-for-propdef-background-clip">background-clip</a>).
Page backgrounds are anchored within the page box’s padding area by default
(and honor <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> if the UA supports <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>).
However if <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-attachment" id="ref-for-propdef-background-attachment">background-attachment</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-background/#valdef-background-attachment-fixed" id="ref-for-valdef-background-attachment-fixed">fixed</a> then the image is positioned relative to the page box including its margins
(i.e. the <a data-link-type="dfn" href="https://www.w3.org/TR/css3-background/#background-positioning-area" id="ref-for-background-positioning-area">background positioning area</a> is the page’s margin box).</p>
<p>The document canvas background is drawn as the page box’s background:
by default its <a data-link-type="dfn" href="https://www.w3.org/TR/css3-background/#background-painting-area" id="ref-for-background-painting-area①">background painting area</a> covers the page box’s border box,
and for UAs that support <a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a>, follows the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-background/#propdef-background-clip" id="ref-for-propdef-background-clip①">background-clip</a> value specified on the root element.
It remains, however, positioned with respect to the root element
or page area as usual.</p>
<p>With respect to the page-margin boxes,
the document canvas, page borders, and all of the document contents
are treated as a single element with a <code>z-index</code> value of <span class="css">0</span> that establishes a <a data-link-type="dfn" href="https://www.w3.org/TR/css3-positioning/#stacking-context" id="ref-for-stacking-context">stacking context</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>:
the page-margin boxes never interleave with parts of the document content
or between the content and the canvas.
They may only paint in front of the document content
or behind the document canvas.
The page background is always painted underneath everything else.</p>
<p>The <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> property applies to page-margin boxes.
Since the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position" id="ref-for-propdef-position">position</a> property does not apply to page-margin boxes, <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-z-index" id="ref-for-propdef-z-index①">z-index</a> always affects page-margin boxes as if they were positioned elements
regardless of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-position" id="ref-for-propdef-position①">position</a> property’s value.
Each page-margin boxes always establishes a stacking context.</p>
<p>The default painting order,
or <a href="https://www.w3.org/TR/CSS21/zindex.html">CSS2.1 Appendix E</a> "tree order",
of page-margin boxes with respect to each other is as follows:</p>
<ol>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-top-left-corner" id="ref-for-at-ruledef-top-left-corner">@top-left-corner</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left">@top-left</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-top-center" id="ref-for-at-ruledef-top-center">@top-center</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-top-right" id="ref-for-at-ruledef-top-right">@top-right</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-top-right-corner" id="ref-for-at-ruledef-top-right-corner">@top-right-corner</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-right-top" id="ref-for-at-ruledef-right-top">@right-top</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-right-middle" id="ref-for-at-ruledef-right-middle">@right-middle</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-right-bottom" id="ref-for-at-ruledef-right-bottom">@right-bottom</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right-corner" id="ref-for-at-ruledef-bottom-right-corner">@bottom-right-corner</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right" id="ref-for-at-ruledef-bottom-right">@bottom-right</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-center" id="ref-for-at-ruledef-bottom-center">@bottom-center</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left" id="ref-for-at-ruledef-bottom-left">@bottom-left</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left-corner" id="ref-for-at-ruledef-bottom-left-corner">@bottom-left-corner</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-left-bottom" id="ref-for-at-ruledef-left-bottom">@left-bottom</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-left-middle" id="ref-for-at-ruledef-left-middle">@left-middle</a>
<li><a class="css" data-link-type="maybe" href="#at-ruledef-left-top" id="ref-for-at-ruledef-left-top">@left-top</a>
</ol>
<p class="note" role="note"> Start with <a class="css" data-link-type="maybe" href="#at-ruledef-top-left-corner" id="ref-for-at-ruledef-top-left-corner①">@top-left-corner</a>, then go clockwise.
This order is arbitrary but can be overridden with <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-positioning/#propdef-z-index" id="ref-for-propdef-z-index②">z-index</a>.
It only has a visible effect when page-margin boxes overlap,
which should not happen in most cases. </p>
<h3 class="heading settled" data-level="3.2" id="content-outside-box"><span class="secno">3.2. </span><span class="content">Content outside the page box</span><a class="self-link" href="#content-outside-box"></a></h3>
<p>When formatting content in the page model, some content may end up outside the
page box. For example, an element whose <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-text-3/#propdef-white-space" id="ref-for-propdef-white-space">white-space</a> property has the value <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-text-3/#valdef-white-space-pre" id="ref-for-valdef-white-space-pre">pre</a> can generate a box that is wider than the page box. As another example,
when boxes are positioned absolutely or relatively, they may end up in
"inconvenient" locations. For example, images may be placed on the edge of
the page box or 100,000 meters below the page box.</ 7E1 p>
<p>A specification for the exact formatting of such elements lies outside the
scope of this document. However, it is recommended that authors and user agents
observe the following general principles concerning content outside the page
box:</p>
<ul>
<li>Content should be allowed slightly beyond the page box to allow pages
to "bleed".
<li>
User agents <em class="RFC2119">SHOULD</em> avoid generating a large
number of content-empty pages to honor the positioning of elements (e.g.,
printing 100 blank pages is probably neither the author’s nor the user’s
intent).
A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="content-empty">Content-empty page</dfn> is a page box whose page
area contains no printable content other than backgrounds and/or borders. A
page box whose page area contains generated content, or content whose
visibility is <span class="css">hidden</span>, or invisible content such as a zero-width space is
not a content-empty page. On the other hand, a page containing only a
background and/or borders and/or page-margin box content <em>is</em> a
content-empty page.
<p class="note" role="note">Note, however, that generating a small number of empty page
boxes is sometimes necessary to honor the forced-break values for <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/page.html#propdef-page-break-before" id="ref-for-propdef-page-break-before">page-break-before</a>/<a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-break/#propdef-break-before" id="ref-for-propdef-break-before">break-before</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/page.html#propdef-page-break-after" id="ref-for-propdef-page-break-after">page-break-after</a>/<a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-break/#propdef-break-after" id="ref-for-propdef-break-after">break-after</a>. <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a> </p>
<li>
Authors <em class="RFC2119">SHOULD NOT</em> position elements in
inconvenient locations just to avoid rendering them. Instead:
<ul>
<li>To suppress box generation entirely, set the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visuren.html#propdef-display" id="ref-for-propdef-display">display</a> property to <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>.
<li>To make a box invisible, set the <span class="property"><a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-visibility" id="ref-for-propdef-visibility">visibility</a></span> property.
</ul>
<li>This specification does not define how boxes positioned outside the page
box are handled. Possibilities include discarding them or creating page boxes
for them at the end of the document.
</ul>
<h3 class="heading settled" data-level="3.3" id="progression"><span class="secno">3.3. </span><span class="content">Page Progression</span><a class="self-link" href="#progression"></a></h3>
<p>CSS distinguishes between left pages and right pages on all documents,
whether they are printed duplex or not.
Each left page is followed by a right page and vice versa.
Left and right pages can be styled differently
with the <a href="#left-right-first"><code>:left</code> and <code>:right</code> pseudo-classes</a>.</p>
<p>Whether the first page of a document is a left page or a right page
depends on the page progression of the document.
The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-progression">page progression</dfn> is the direction in which the printed pages of a document would be sequenced
when laid out side-to-side.
For example, English and horizontally-set Japanese typically progress from left to right,
whereas Arabic and vertically-set Japanese pages typically progress from right to left.</p>
<p>The page progression direction is determined as follows:</p>
<ul>
<li>If text is laid out in horizontal lines,
the <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression">page progression</a> is the same as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#inline-base-direction" id="ref-for-inline-base-direction">inline base direction</a>.
<li>If text is laid out in vertical lines,
the <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression①">page progression</a> is the same as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a>.
</ul>
<p>If the UA supports the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> properties
from the CSS 3 Writing Modes Module <a data-link-type="biblio" href="#biblio-css3-writing-modes">[CSS3-WRITING-MODES]</a>, it must <a href="https://www.w3.org/TR/css3-writing-modes/#page-direction">determine</a> the <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression②">page progression</a> is determed by the <a data-link-type="dfn" href="https://www.w3.org/TR/css-writing-modes-4/#principal-writing-mode" id="ref-for-principal-writing-mode">principal writing mode</a>.</p>
<p>In documents with a left-to-right <a data-link-type="dfn" href="#page-progression" id="ref-for-page-progression③">page progression</a> the first page of the document is a right page, and vice versa.
To explicitly force a document to begin printing on a left or right page,
authors can specify a <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-break/#propdef-break-before" id="ref-for-propdef-break-before①">break-before</a> value
that that propagates a page break to the root. <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a> The UA must suppress the first (empty) page(s) in this case
(and the <code>:first</code> pseudo-class matches the first printed page).</p>
<div class="example" id="example-0b89bad0">
<a class="self-link" href="#example-0b89bad0"></a>
<pre>html { break-before: always }
</pre>
<p>For an HTML document with a left-to-right page progression,
the above style rule will cause the first page of the document
to print on a ':left' page</p>
<pre>html { break-before: left }
</pre>
<p>For an HTML document,
the above style rule will cause the first page of the document
to print on a ':left' page,
regardless of the page progression.</p>
</div>
<h2 class="heading settled" data-level="4" id="page-selector-and-context"><span class="secno">4. </span><span class="content"> Page Selectors and the Page Context</span><a class="self-link" href="#page-selector-and-context"></a></h2>
<h3 class="heading settled" data-level="4.1" id="at-page-rule"><span class="secno">4.1. </span><span class="content"><span id="page-box-page-rule"> The @page Rule</span></span><a class="self-link" href="#at-page-rule"></a></h3>
<p>Authors can specify various aspects of a page box,
such as its dimensions, orientation, and margins,
within an <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-page">@page</dfn> rule. <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page①">@page</a> rules are allowed
wherever <a href="https://www.w3.org/TR/CSS21/syndata.html#rule-sets">rule-sets</a> are allowed.
An <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page②">@page</a> rule consists of the keyword <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page③">@page</a>,
an optional comma-separated list of <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector②">page selectors</a> and a block of declarations
(said to be in the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-context">page context</dfn>).
An <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page④">@page</a> rule can also contain other at-rules,
interleaved between declarations.
The current level of this specification
only allows <a data-link-type="dfn" href="#margin-at-rule" id="ref-for-margin-at-rule">margin at-rules</a> inside <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑤">@page</a>.</p>
<p><a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑥">@page</a> rules without a selector list apply to every page.
Other <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑦">@page</a> rules apply to pages that <a data-link-type="dfn" href="#match" id="ref-for-match">match</a> at least one of their selectors.
Properties declared within the page context apply to the page box.</p>
<p>If an error is encountered during the processing of a declaration block within
a page or a margin context, the <a href="https://www.w3.org/TR/CSS21/syndata.html#parsing-errors">Rules for handling parsing errors</a> apply; that is, valid declarations within the block are applied.</p>
<h3 class="heading settled" data-level="4.2" id="page-selectors"><span class="secno">4.2. </span><span class="content">Page selectors</span><a class="self-link" href="#page-selectors"></a></h3>
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-selector">page selector</dfn> is made of
either a <a data-link-type="dfn" href="#page-type-selector" id="ref-for-page-type-selector">page type selector</a> or a <a data-link-type="dfn" href="#page-pseudo-class" id="ref-for-page-pseudo-class">page pseudo-class</a>,
followed by zero or more additional <a data-link-type="dfn" href="#page-pseudo-class" id="ref-for-page-pseudo-class①">page pseudo-classes</a>.
No whitespace is allowed between components of a selector.
The <a class="production css" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector">&lt;page-selector></a> grammar
and examples can be found below.</p>
<p>A <a data-link-type="dfn" href="#page-selector" id="ref-for-page-selector③">page selector</a> is said to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="match">match</dfn> a given page if and only if
all of its components match the page.</p>
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-type-selector">page type selector</dfn> is
a case-sensitive <a href="https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">CSS identifier</a> <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a>.
It <a data-link-type="dfn" href="#match" id="ref-for-match①">matches</a> pages of the <a href="#using-named-pages">named page type</a> generated by the <a class="property" data-link-type="propdesc" href="#propdef-page" id="ref-for-propdef-page">page</a> property. <span id="page-selector-syntax-restrict"> A page type name of <span class="css">auto</span> (<a href="https://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a>)
does not make the rule invalid,
but must never match. </span></p>
<p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="page-pseudo-class">page pseudo-class</dfn> is <a href="https://www.w3.org/TR/CSS21/syndata.html#characters">ASCII case-insensitive</a> and has the same syntax as <a href="https://www.w3.org/TR/selectors/#pseudo-classes">pseudo-classes</a> in regular Selectors. <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> The various <a data-link-type="dfn" href="#page-pseudo-class" id="ref-for-page-pseudo-class②">page pseudo-classes</a> are defined below.</p>
<h4 class="heading settled" data-level="4.2.1" id="spread-pseudos"><span class="secno">4.2.1. </span><span class="content"><span id="left-right-first"></span> Spread pseudo-classes: <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left①">:left</a>, <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right①">:right</a></span><a class="self-link" href="#spread-pseudos"></a></h4>
<p>When printing double-sided documents,
left and right pages are often formatted differently.
This can be expressed by using the <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left②">:left</a> and <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right②">:right</a> page pseudo-classes.</p>
<p>All pages are automatically classified by user agents
as either left pages or right pages,
based on <a href="#progression">page progression</a>.
The <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-left">:left</dfn> and <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-right">:right</dfn> pseudo-classes
only <a data-link-type="dfn" href="#match" id="ref-for-match②">match</a> <a data-link-type="dfn" href="#left-page" id="ref-for-left-page">left</a> or <a data-link-type="dfn" href="#right-page" id="ref-for-right-page">right pages</a>,
respectively. </p>
<div class="example" id="example-d233352a">
<a class="self-link" href="#example-d233352a"></a> The following example creates left and right binding edges using these pseudo-classes:
<pre>@page :left {
margin-left: 3cm;
margin-right: 4cm;
}
@page :right {
margin-left: 4cm;
margin-right: 3cm;
}
</pre>
</div>
<p>If different declarations have been given for left and right pages, the user
agent must honor these declarations even if the user
agent does not transfer the page boxes to left and right sheets (i.e., a
printer that only prints on one side of the medium must nevertheless produce
correctly formatted output).</p>
<div class="note" role="note">
<p><em><strong>Note.</strong> Adding declarations to the <a class="css" data-link-type="maybe" href="#valdef-page-left" id="ref-for-valdef-page-left③">:left</a> or <a class="css" data-link-type="maybe" href="#valdef-page-right" id="ref-for-valdef-page-right③">:right</a> pseudo-class
does not necessarily influence whether the document
comes out of the printer double- or single-sided
(which is outside the scope of this specification).</em></p>
</div>
<h4 class="heading settled" data-level="4.2.2" id="first-pseudo"><span class="secno">4.2.2. </span><span class="content"> First-page pseudo-class: <a class="css" data-link-type="maybe" href="#valdef-page-first" id="ref-for-valdef-page-first">:first</a></span><a class="self-link" href="#first-pseudo"></a></h4>
<p>The <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-first">:first</dfn> pseudo-class <a data-link-type="dfn" href="#match" id="ref-for-match③">matches</a> the first printed page of a document.</p>
<div class="example" id="example-0c64c208">
<a class="self-link" href="#example-0c64c208"></a>
<pre>@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
}
</pre>
</div>
<h4 class="heading settled" data-level="4.2.3" id="blank-pseudo"><span class="secno">4.2.3. </span><span class="content"> Blank-page pseudo-class: <a class="css" data-link-type="maybe" href="#valdef-page-blank" id="ref-for-valdef-page-blank">:blank</a></span><a class="self-link" href="#blank-pseudo"></a></h4>
<p>The <dfn class="dfn-paneled css" data-dfn-for="@page" data-dfn-type="value" data-export id="valdef-page-blank">:blank</dfn> pseudo-class <a data-link-type="dfn" href="#match" id="ref-for-match④">matches</a> <a data-link-type="dfn" href="#content-empty" id="ref-for-content-empty">content-empty pages</a> that appear as a result of <a href="https://www.w3.org/TR/css3-break/#forced-breaks">forced page breaks</a>.</p>
<div class="note" role="note"> Only the <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-break/#valdef-break-before-left" id="ref-for-valdef-break-before-left">left</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-break/#valdef-break-before-right" id="ref-for-valdef-break-before-right">right</a>, <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-break/#valdef-break-before-recto" id="ref-for-valdef-break-before-recto">recto</a> and <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css3-break/#valdef-break-before-verso" id="ref-for-valdef-break-before-verso">verso</a> values
of the <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-break/#propdef-break-before" id="ref-for-propdef-break-before②">break-before</a> and <a class="property" data-link-type="propdesc" href="https://www.w3.org/TR/css3-break/#propdef-break-after" id="ref-for-propdef-break-after①">break-after</a> properties
can generate pages that match <a class="css" data-link-type="maybe" href="#valdef-page-blank" id="ref-for-valdef-page-blank①">:blank</a>. </div>
<div class="example" id="example-63622ae9">
<a class="self-link" href="#example-63622ae9"></a> In this example, forced page break may occur before <code>h1</code> elements.
<pre>h1 { break-before: left }
@page :blank {
@top-center { content: "This page is intentionally left blank" }
}
</pre>
</div>
<p>A page matched by <a class="css" data-link-type="maybe" href="#valdef-page-blank" id="ref-for-valdef-page-blank②">:blank</a> can also be matched
by other page pseudo-classes.</p>
<div class="example" id="example-f6c58f27">
<a class="self-link" href="#example-f6c58f27"></a>
<p>If headers have been specified on all right pages, a blank right
page will be matched by both <code>:blank</code> and <code>:right</code>. Therefore, margin boxes set on right pages
will have to be removed unless they are wanted on blank pages. Here is
an example where the top center header is removed from blank pages,
while the page number remains:</p>
<pre>h1 { break-before: left }
@page :blank {
@top-center { content: none }
}
@page :right {
@top-center { content: "Preliminary edition" }
@bottom-center { content: counter(page) }
}
</pre>
<p>Due to the higher <a data-link-type="dfn" href="#specificity" id="ref-for-specificity">specificity</a> of <code>:blank</code> over <code>:right</code>, the top center header is removed even
if <code>content: none</code> comes before <code>content: "Preliminary
edition"</code>.</p>
</div>
<div class="note" role="note"> <em><strong>Note.</strong> Future versions of CSS may include other page
pseudo-classes.</em> </div>
<h3 class="heading settled" data-level="4.3" id="syntax-page-selector"><span class="secno">4.3. </span><span class="content">@page rule grammar</span><a class="self-link" href="#syntax-page-selector"></a></h3>
<p><a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑧">@page</a> rules are <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#parse-grammar" id="ref-for-css-parse-something-according-to-a-css-grammar">parsed</a> according to the following grammar,
plus the additional rules noted below:</p>
<pre class="prod">@page = @page <a class="production" data-link-type="type" href="#typedef-page-selector-list" id="ref-for-typedef-page-selector-list">&lt;page-selector-list></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list">&lt;declaration-list></a> }
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-page-selector-list"><a class="production" data-link-type="type" href="#typedef-page-selector-list" id="ref-for-typedef-page-selector-list①">&lt;page-selector-list></a></dfn> = <a class="production" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector①">&lt;page-selector></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a>
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-page-selector"><a class="production" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector②">&lt;page-selector></a></dfn> = [ <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-ident-token" id="ref-for-typedef-ident-token">&lt;ident-token></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a class="production" data-link-type="type" href="#typedef-pseudo-page" id="ref-for-typedef-pseudo-page">&lt;pseudo-page></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-req" id="ref-for-mult-req">!</a>
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-pseudo-page"><a class="production" data-link-type="type" href="#typedef-pseudo-page" id="ref-for-typedef-pseudo-page①">&lt;pseudo-page></a></dfn> = ':' [ left <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> right <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> first <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> blank ]
/<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus①">*</a> Margin rules <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus②">*</a>/
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-left-corner">@top-left-corner</dfn> = @top-left-corner { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-left">@top-left</dfn> = @top-left { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list②">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-center">@top-center</dfn> = @top-center { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list③">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-right">@top-right</dfn> = @top-right { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list④">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-top-right-corner">@top-right-corner</dfn> = @top-right-corner { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑤">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-left-corner">@bottom-left-corner</dfn> = @bottom-left-corner { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑥">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-left">@bottom-left</dfn> = @bottom-left { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑦">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-center">@bottom-center</dfn> = @bottom-center { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑧">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-right">@bottom-right</dfn> = @bottom-right { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list⑨">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-bottom-right-corner">@bottom-right-corner</dfn> = @bottom-right-corner { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①⓪">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-left-top">@left-top</dfn> = @left-top { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①①">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-left-middle">@left-middle</dfn> = @left-middle { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①②">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-left-bottom">@left-bottom</dfn> = @left-bottom { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①③">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-right-top">@right-top</dfn> = @right-top { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①④">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-right-middle">@right-middle</dfn> = @right-middle { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①⑤">&lt;declaration-list></a> };
<dfn class="dfn-paneled" data-dfn-type="at-rule" data-export id="at-ruledef-right-bottom">@right-bottom</dfn> = @right-bottom { <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-syntax-3/#typedef-declaration-list" id="ref-for-typedef-declaration-list①⑥">&lt;declaration-list></a> };
</pre>
<p>In addition, the following rules apply:</p>
<ul>
<li data-md>
<p>No whitespace is allowed between the productions in <a class="production css" data-link-type="type" href="#typedef-page-selector" id="ref-for-typedef-page-selector③">&lt;page-selector></a> or <a class="production css" data-link-type="type" href="#typedef-pseudo-page" id="ref-for-typedef-pseudo-page②">&lt;pseudo-page></a> (similar to the rule for <a class="production css" data-link-type="type" href="https://www.w3.org/TR/selectors4/#typedef-compound-selector" id="ref-for-typedef-compound-selector">&lt;compound-selector></a>).</p>
<li data-md>
<p>The <a class="css" data-link-type="maybe" href="#at-ruledef-page" id="ref-for-at-ruledef-page⑨">@page</a> rule can only contain <a data-link-type="dfn" href="#page-property" id="ref-for-page-property">page properties</a> and <a data-link-type="dfn" href="#margin-at-rule" id="ref-for-margin-at-rule①">margin at-rules</a>.</p>
<li data-md>
<p>The <a data-link-type="dfn" href="#margin-at-rule" id="ref-for-margin-at-rule②">margin at-rules</a> can only contain <a data-link-type="dfn" href="#page-margin-property" id="ref-for-page-margin-property">page-margin properties</a>.</p>
</ul>
<div class="example" id="example-691ff5b9">
<a class="self-link" href="#example-691ff5b9"></a> The following are examples of page selectors (declaration block intentionally
left blank)
<pre>@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
@page:first { ... }
@page toc, index { ... }
@page :blank:first { ... }
</pre>
<p>The following are examples of page-margin boxes
where the declaration blocks are intentionally left blank.</p>
<pre>@page {
@top-left { ... /* document name */ }
@bottom-center { ... /* page number */}
}
@page :left { @left-middle { ... /* page number in left margin */ }}
@page :right{ @right-middle { ... /* page number in right margins of right pages */}}
@page :left { @bottom-left-corner { ... /* left page numbers */ }}
@page :right { @bottom-right-corner { ... /* right page numbers */ }}
@page :first { @bottom-left-corner { ... /* empty footer on 1st page */ }
@bottom-right-corner { ... /* empty footer */ } }
</pre>
</div>
<h3 class="heading settled" data-level="4.4" id="cascading-and-page-context"><span class="secno">4.4. </span><span class="content">Cascading in the page context</span><a class="self-link" href="#cascading-and-page-context"></a></h3>
<p>Declarations in page and margin contexts <a href="https://www.w3.org/TR/CSS21/cascade.html">cascade</a> just like declarations in style rule for elements.</p>
<p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="specificity">specificity</dfn> of page a selector is computed in a manner
analogous to the computations defined in
the <a href="https://www.w3.org/TR/CSS21/selector.html">Selectors</a> module:</p>
<ul>
<li>
Count the number of page type names (= <var>f</var>)
<p class="note" role="note"> Given the syntax of page selectors, <var>f</var> can only ever be 0 or 1. </p>
<li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>)
<li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)
</ul>
<p class="note" role="note"> Note: Repeated occurrences of the same pseudo-classes are allowed
and do increase specificity. </p>
<p>Due to storage limitations,
implementations may have limitations on
the size of <var>f</var>, <var>g</var>, or <var>h</var>.
If so, values higher than the limit must be clamped to that limit,
and not overflow.</p>
<p>Specificities are compared by comparing the three components in order
(<var>f</var>, <var>g</var>, <var>h</var>):
the specificity with a larger <var>f</var> value is more specific;
if the two <var>f</var> values are tied,
then the two <var>g</var> values are compared, etc.
If all the values are tied, the two specificities are equal.</p>
<div class="example" id="example-f7460463">
<a class="self-link" href="#example-f7460463"></a>
<p>Some page specificity calculation examples follow:</p>
<pre>@page { } /* specificity = (0,0,0) */
@page :left { } /* specificity = (0,0,1) */
@page :first { } /* specificity = (0,1,0) */
@page :blank:left { } /* specificity = (0,1,1) */
@page artsy { } /* specificity = (1,0,0) */
@page artsy:left { } /* specificity = (1,0,1) */
@page artsy:first { } /* specificity = (1,1,0) */
</pre>
</div>
<div class="example" id="example-66f92469">
<a class="self-link" href="#example-66f92469"></a>
<p>Consider the following usage example:</p>
<pre>@page :left {
margin-left: 4cm;
}
@page {
margin-left: 3cm;
}
</pre>
<p>Due to the higher specificity of the pseudo-class selector,
the left margin on left pages will be 4cm and all other pages
(the right-facing pages) will have a left margin of 3cm.</p>
</div>
<div class="example" id="example-8b37b195">
<a class="self-link" href="#example-8b37b195"></a> In this example, the higher specificity of the green rules wins over the red
rule.
Therefore the first page will have blue text in the top-left page-margin box
and green text in the top-right page-margin box,
while subsequent pages will have red text in the page-margin boxes.
<pre>@page :first {
color: green;
@top-left {
content: "foo";
color: blue;
}
@top-right {
content: "bar";
}
}
@page { color: red;
@top-center {
content: "Page " counter(page);
}
}
</pre>
</div>
<div class="example" id="example-ba05142d">
<a class="self-link" href="#example-ba05142d"></a>
<p>Page contexts cascade, so the following stylesheet would style pages with 25
millimeter margins and 14 point type in the page-margin boxes:</p>
<pre>@page { margin: 25mm;}
@page { font-size: 14pt;}
</pre>
</div>
<h2 class="heading settled" data-level="5" id="margin-boxes"><span class="secno">5. </span><span class="content">Page-Margin Boxes</span><a class="self-link" href="#margin-boxes"></a></h2>
<p>Page-margin boxes are boxes within the page margin that,
like pseudo-elements, can contain generated content.</p>
<p>Page-margin boxes can be used to create page headers and footers,
which are portions of the page set aside for supplementary information
such as the page number or document title.</p>
<div class="example" id="example-e18d595c">
<a class="self-link" href="#example-e18d595c"></a> Typically, a <dfn data-dfn-type="dfn" data-noexport id="page-header">page header<a class="self-link" href="#page-header"></a></dfn> is located at the top of the page
in documents with a predominately horizontal writing direction
and on the side opposite the <a data-link-type="dfn" href="#binding-edge" id="ref-for-binding-edge">binding edge</a> for documents with a predominately vertical writing direction.
One possible design of page headers for horizontally written documents uses the <a class="css" data-link-type="maybe" href="#at-ruledef-top-left-corner" id="ref-for-at-ruledef-top-left-corner②">@top-left-corner</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-left" id="ref-for-at-ruledef-top-left①">@top-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-center" id="ref-for-at-ruledef-top-center①">@top-center</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-top-right" id="ref-for-at-ruledef-top-right①">@top-right</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-top-right-corner" id="ref-for-at-ruledef-top-right-corner①">@top-right-corner</a> page-margin boxes.
Another design, for vertically written documents, could use the <a class="css" data-link-type="maybe" href="#at-ruledef-right-top" id="ref-for-at-ruledef-right-top①">@right-top</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-right-middle" id="ref-for-at-ruledef-right-middle①">@right-middle</a>, and <a class="css" data-link-type="maybe" href="#at-ruledef-right-bottom" id="ref-for-at-ruledef-right-bottom①">@right-bottom</a> page-margin boxes
for <a data-link-type="dfn" href="#right-page" id="ref-for-right-page①">right facing pages</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-left-top" id="ref-for-at-ruledef-left-top①">@left-top</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-left-middle" id="ref-for-at-ruledef-left-middle①">@left-middle</a>, and <a class="css" data-link-type="maybe" href="#at-ruledef-left-bottom" id="ref-for-at-ruledef-left-bottom①">@left-bottom</a> for <a data-link-type="dfn" href="#left-page" id="ref-for-left-page①">left facing pages</a>.
<p>The <dfn data-dfn-type="dfn" data-noexport id="page-footer">page footer<a class="self-link" href="#page-footer"></a></dfn> is typically at
the opposite end of the page from the page header.
For example, the design of a horizontally written document with a page header
at the top of the page could use the <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left-corner" id="ref-for-at-ruledef-bottom-left-corner①">@bottom-left-corner</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-left" id="ref-for-at-ruledef-bottom-left①">@bottom-left</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-center" id="ref-for-at-ruledef-bottom-center①">@bottom-center</a>, <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right" id="ref-for-at-ruledef-bottom-right①">@bottom-right</a> and <a class="css" data-link-type="maybe" href="#at-ruledef-bottom-right-corner" id="ref-for-at-ruledef-bottom-right-corner①">@bottom-right-corner</a> page-margin boxes as the page footer.
The design of a vertically written document could use
the page-margin boxes of the binding edge of the page for the page footer.</p>
</div>
<p>Page-margin boxes are positioned with respect to the page area
and are independent of page orientation,
for example the top page-margin boxes are above the page area
in both portrait and landscape orientation.
The various page-margin boxes are defined
and illustrated in the diagram below:</p>
<table class="data" id="margin-box-def">
<caption>Table 1 Page-Margin Box Definitions</caption>
<thead>
<tr>
<th>Box
<th>Description
<th>Placement
<tbody>
<tr id="top-margin-boxes-def">
<th id="top-left-corner-box-def">top-left-corner
<td>a fixed-size box defined by the intersection of the top and left margins of the
page box
17D6
<td><img alt="the top left corner box with margin, border, and padding, nested within intersection of the page’s top and left margins" height="47" src="images/TopLeftCornerBox.png" width="181">
<tr id="top-left-box-def">
<th>top-left
<td>a variable-width box filling the top page margin between the top-left-corner
and top-center page-margin boxes
<td><img alt="the top left box with margin, border, and padding, nested in the page’s top margin next to the top left corner box" height="47" src="images/TopLeftMarginBox.png" width="181">
<tr id="top-center-box-def">
<th>top-center
<td>a variable-width box centered horizontally between the page’s left and right
border edges and filling the page top margin between the top-left and top-right
page-margin boxes
View remainder of file in raw view