You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3120 lines
113 KiB
3120 lines
113 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>CSS3 Module: Paged Media</title>
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
|
<link href="default.css" rel="stylesheet" type="text/css" />
|
|
|
|
<style type="text/css">
|
|
|
|
.keyword { font-weight:bold }
|
|
.equation { padding: 2% }
|
|
table.equation {text-align:center}
|
|
td, th { vertical-align: top }
|
|
#margin-values { border-collapse: collapse }
|
|
#margin-values td, #margin-values th {
|
|
padding: 0.2em; border: thin solid black }
|
|
|
|
|
|
.editorial { display: block; font-family: arial, helvetica, sans-serif;
|
|
font-size: 80%;
|
|
margin-left: .5in; margin-right: 1in ; padding: 0.125in;
|
|
background: #FFFFDD ;
|
|
}
|
|
|
|
.editorial:after { content: "Ed."}
|
|
.RFC2119 { text-transform: lowercase; font-style: italic }
|
|
em em.RFC2119 { text-transform: lowercase; font-style: normal }
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel="stylesheet"
|
|
type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div>
|
|
<div class="head"> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48"
|
|
src="http://www.w3.org/Icons/w3c_home" width="72" /></a> <!--end-logo-->
|
|
</p>
|
|
|
|
<h1 id="media">CSS3 Module: Paged Media</h1>
|
|
|
|
<h2 class="no-num no-toc" id="w3c-working">W3C Working Draft 10 October
|
|
2006</h2>
|
|
|
|
<dl>
|
|
<dt>This version:</dt>
|
|
|
|
<dd><a href="http://www.w3.org/TR/2006/WD-css3-page-20061010">
|
|
http://www.w3.org/TR/2006/WD-css3-page-20061010</a></dd>
|
|
|
|
<dt>Latest version:</dt>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a></dd>
|
|
|
|
<dt>Previous version:</dt>
|
|
|
|
<dd><a href="http://www.w3.org/TR/2004/CR-css3-page-20040225/">
|
|
http://www.w3.org/TR/2004/CR-css3-page-20040225/</a></dd>
|
|
|
|
<dt>Editors:</dt>
|
|
|
|
<dd>Håkon Wium Lie, Opera Software</dd>
|
|
|
|
<dd>Melinda Grant, Hewlett-Packard</dd>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
|
|
© 2006 <a href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.org/"><acronym title="European Research
|
|
Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright--></div>
|
|
|
|
<hr title="Separator for header" />
|
|
|
|
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
|
|
|
|
<p>This module describes the page model that partitions a flow into pages.
|
|
It builds on the <a href="http://www.w3.org/TR/CSS21/box.html"> Box model
|
|
module</a> and introduces and defines the page model and paged media. It
|
|
adds functionality for pagination, page margins, page size and
|
|
orientation, headers and footers, widows and orphans, and image
|
|
orientation. Finally it extends generated content to enable page
|
|
numbering and running headers / footers.</p>
|
|
<!-- "Status of this document" -->
|
|
<h2 class="no-num no-toc" id="status">Status of this Document</h2>
|
|
<!--begin-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="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://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>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
|
|
public mailing list <a
|
|
href="mailto:www-style@w3.org">www-style@w3.org</a> (see <a
|
|
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
|
|
discussion of this specification. When sending e-mail, please put the
|
|
text “css3-page” in the subject, preferably like this:
|
|
“[<!---->css3-page<!---->] <em>…summary of
|
|
comment…</em>”</p>
|
|
|
|
<p>This document was produced by the <a href="/Style/CSS/members">CSS
|
|
Working Group</a> (part of the <a href="/Style/">Style Activity</a>).</p>
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="/Style/CSS/Disclosures" rel="disclosure">public list of any patent
|
|
disclosures</a> made in connection with the deliverables of the group;
|
|
that page also includes instructions for disclosing a patent. An
|
|
individual who has actual knowledge of a patent which the individual
|
|
believes contains <a
|
|
href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of
|
|
the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
<p>This document contains the <abbr title="Cascading Style
|
|
Sheets">CSS3</abbr> Paged Media Module W3C Last Call <a
|
|
href="http://www.w3.org/2005/10/Process-20051014/tr.html#RecsWD"> Working
|
|
Draft</a> of 10 October 2006. The Last Call period ends on 3
|
|
November 2006.</p>
|
|
|
|
<p>Relative to the previous Candidate Recommendation, this version removes
|
|
page-based floats, string-set, and page-policy features, which have been
|
|
moved to <a href="http://www.w3.org/TR/2006/WD-css3-gcpm-20060612/">CSS3
|
|
Generated Content for Paged Media</a>; adds two new features (<a
|
|
class="property" href="#fit">'fit'</a> and <a class="property"
|
|
href="#fit-position">'fit-position'</a>); and incorporates a new
|
|
algorithm for determining margin box sizes as well as miscellaneous
|
|
clarifications and editorial improvements.</p>
|
|
<!-- "Table of contents" -->
|
|
<h2 class="no-num no-toc" id="contents">Table of Contents</h2>
|
|
<!--begin-toc-->
|
|
<ul class="toc">
|
|
<li><a href="#dependencies"><span class="secno">1. </span>Dependencies on
|
|
other CSS Modules</a></li>
|
|
|
|
<li><a href="#intro"><span class="secno">2. </span>Introduction</a>
|
|
<ul class="toc">
|
|
<li><a href="#terminology"><span class="secno">2.1.
|
|
</span>Terminology</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#page-box-page-rule"><span class="secno">3. </span>Page
|
|
Boxes: the @page Rule</a>
|
|
<ul class="toc">
|
|
<li><a href="#page-terms"><span class="secno">3.1. </span>Page
|
|
Terminology and the Page Model</a></li>
|
|
|
|
<li><a href="#page-type"><span class="secno">3.2. </span>Page types</a>
|
|
</li>
|
|
|
|
<li><a href="#page-size"><span class="secno">3.3. </span>Page size</a>
|
|
<ul class="toc">
|
|
<li><a href="#page-size-prop"><span class="secno">3.3.1. </span>Page
|
|
size: the 'size' property</a></li>
|
|
|
|
<li><a href="#page-size-media-query"><span class="secno">3.3.2.
|
|
</span>Media Queries</a></li>
|
|
|
|
<li><a href="#renderingpages"><span class="secno">3.3.3.
|
|
</span>Rendering page boxes that do not fit a page sheet</a></li>
|
|
|
|
<li><a href="#positioning-page-box"><span class="secno">3.3.4.
|
|
</span>Positioning the page box on the sheet</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#page-selector-and-context"><span class="secno">3.4.
|
|
</span>Page Selectors and the Page Context</a>
|
|
<ul class="toc">
|
|
<li><a href="#syntax-page-selector"><span class="secno">3.4.1.
|
|
</span>Page selector grammar</a></li>
|
|
|
|
<li><a href="#cascading-and-page-context"><span class="secno">3.4.2.
|
|
</span>Cascading in the page context</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#page-properties"><span class="secno">3.5. </span>Page
|
|
Properties</a></li>
|
|
|
|
<li><a href="#left-right-first"><span class="secno">3.6. </span>Left,
|
|
right, and first pages</a></li>
|
|
|
|
<li><a href="#content-outside-box"><span class="secno">3.7.
|
|
</span>Content outside the page box</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#margin-boxes"><span class="secno">4. </span>Margin
|
|
Boxes</a>
|
|
<ul class="toc">
|
|
<li><a href="#margin-at-rules"><span class="secno">4.1. </span>At-rules
|
|
for margin boxes</a></li>
|
|
|
|
<li><a href="#max-margin-dimension"><span class="secno">4.2.
|
|
</span>Maximum Dimension of margin boxes</a></li>
|
|
|
|
<li><a href="#margin-dimension"><span class="secno">4.3.
|
|
</span>Dimension of margin boxes</a></li>
|
|
|
|
<li><a href="#margin-text-alignment"><span class="secno">4.4.
|
|
</span>Margin boxes and default values</a>
|
|
<ul class="toc">
|
|
<li><a href="#margin-box-ex"><span class="secno">4.4.1. </span>Margin
|
|
box examples</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#populating-margin-boxes"><span class="secno">4.5.
|
|
</span>Populating margin boxes</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#page-breaks"><span class="secno">5. </span>Page Breaks</a>
|
|
<ul class="toc">
|
|
<li><a href="#pg-br-before-after"><span class="secno">5.1. </span>Break
|
|
before/after elements: 'page-break-before', 'page-break-after',
|
|
'page-break-inside'</a></li>
|
|
|
|
<li><a href="#using-named-pages"><span class="secno">5.2. </span>Using
|
|
named pages: 'page'</a></li>
|
|
|
|
<li><a href="#breaks-inside"><span class="secno">5.3. </span>Breaks
|
|
inside elements: 'orphans', 'widows'</a></li>
|
|
|
|
<li><a href="#allowed-pg-brk"><span class="secno">5.4. </span>Allowed
|
|
page breaks</a></li>
|
|
|
|
<li><a href="#forced-pg-brk"><span class="secno">5.5. </span>Forced
|
|
page breaks</a></li>
|
|
|
|
<li><a href="#best-pg-brk"><span class="secno">5.6.
|
|
</span>"Best" page breaks</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#pg-based-extensions"><span class="secno">6.
|
|
</span>Page-based Extensions to Counters</a>
|
|
<ul class="toc">
|
|
<li><a href="#page-based-counters"><span class="secno">6.1.
|
|
</span>Page-based counters</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a href="#orienting"><span class="secno">7. </span>Orienting an Image
|
|
on the Page</a></li>
|
|
|
|
<li><a href="#the-fit"><span class="secno">8. </span>The 'fit' and
|
|
'fit-position' Properties</a></li>
|
|
|
|
<li class="no-num"><a href="#references">References</a>
|
|
<ul class="toc">
|
|
<li class="no-num"><a href="#normative-references">Normative
|
|
References</a></li>
|
|
|
|
<li class="no-num"><a href="#informative-references">Informative
|
|
References</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<!--end-toc-->
|
|
<h2 id="dependencies"><span class="secno">1. </span>Dependencies on other
|
|
CSS Modules</h2>
|
|
|
|
<p>This CSS3 module depends on Cascading Style Sheets Level 2 Revision 1
|
|
<a href="#CSS21" rel="biblioentry">[CSS21]<!--{{!CSS21}}--></a> for all
|
|
underlying requirements such as syntax, selectors, box model, fonts,
|
|
etc. It may in the future be updated to depend on other CSS3
|
|
modules rather than on CSS 2.1.</p>
|
|
<!-- "Introduction" -->
|
|
<h2 id="intro"><span class="secno">2. </span>Introduction</h2>
|
|
|
|
<p>Paged media (e.g., paper, transparencies, pages that are displayed on
|
|
computer screens, etc.) differ from <a
|
|
href="http://www.w3.org/TR/CSS2/media.html#continuous-media-group">
|
|
continuous media</a>
|
|
<!-- update the link once there is a CSS3 module to define it? --> 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>
|
|
|
|
<li> the page properties such as size, orientation, margins, border, and
|
|
padding are specified,</li>
|
|
|
|
<li> headers and footers are established within the page margins,</li>
|
|
|
|
<li> content such as page counters are placed in the headers and footers,
|
|
and</li>
|
|
|
|
<li> orphans and widows can be controlled.</li>
|
|
</ul>
|
|
|
|
<p>CSS3 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. Often, but not always, the page box has a one-to-one
|
|
correspondence to a physical sheet onto which the document is ultimately
|
|
rendered (paper, transparency, screen etc.). The CSS3 page model
|
|
specifies formatting within the page box, but it is the user agent's
|
|
responsibility to transfer the page box to the sheet. Some user agent
|
|
transfer possibilities that are not addressed by CSS3 include:</p>
|
|
|
|
<ul id="complex-usecases">
|
|
<li>Transferring one page box to one sheet (e.g. single-sided printing);</li>
|
|
|
|
<li>Transferring two page boxes to the front and back surfaces of the
|
|
same sheet (e.g. double-sided printing);</li>
|
|
|
|
<li>Transferring N (small) page boxes to one sheet (called
|
|
"N-up");</li>
|
|
|
|
<li>Transferring one (large) page box to N x M sheets (called
|
|
"tiling");</li>
|
|
|
|
<li>Creating signatures. A signature is a group of pages printed on a
|
|
sheet, which, when folded and trimmed like a book, appear in their
|
|
proper sequence;</li>
|
|
|
|
<li>Printing one document to multiple output trays;</li>
|
|
|
|
<li>Generating files containing print instructions.</li>
|
|
</ul>
|
|
|
|
<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 a sheet of similar size.</p>
|
|
|
|
<h3 id="terminology"><span class="secno">2.1. </span>Terminology</h3>
|
|
|
|
<p>The keywords "<em class="RFC2119" title="MUST in RFC 2119
|
|
context">MUST</em>", "<em class="RFC2119" title="SHALL in RFC
|
|
2119 context">SHALL</em>", "<em class="RFC2119" title="MUST NOT
|
|
in RFC 2119 context">MUST NOT</em>", "<em class="RFC2119"
|
|
title="SHALL NOT in RFC 2119 context">SHALL NOT</em>", "<em
|
|
class="RFC2119" title="REQUIRED in RFC 2119 context">REQUIRED</em>",
|
|
"<em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em>", "<em class="RFC2119" title="SHOULD NOT
|
|
in RFC 2119 context">SHOULD NOT</em>", "<em class="RFC2119"
|
|
title="RECOMMENDED in RFC 2119 context">RECOMMENDED</em>", "<em
|
|
class="RFC2119" title="MAY in RFC 2119 context">MAY</em>", and
|
|
"<em class="RFC2119" title="OPTIONAL in RFC 2119
|
|
context">OPTIONAL</em>" when used in this document are to be
|
|
interpreted as described in <cite>RFC 2119</cite> <a href="#RFC2119"
|
|
rel="biblioentry">[RFC2119]<!--{{!RFC2119}}--></a>. However, for
|
|
readability, these words do not appear in all uppercase letters in this
|
|
specification.</p>
|
|
<!-- @page -->
|
|
<h2 id="page-box-page-rule"><span class="secno">3. </span>Page Boxes: the
|
|
@page Rule</h2>
|
|
|
|
<p>In the page model, the document is transferred into one or more page
|
|
boxes. The <a name="ind-page-box"><span class="index-def" id="page-box2"
|
|
title="page box"><dfn id="page-box0">page box</dfn></span></a> is a
|
|
specialized CSS box that maps to a rectangular print media surface.
|
|
It is roughly analogous to the viewport. As for other boxes, a page
|
|
box consists of margin, border, padding, and content areas. The content
|
|
and margin areas of a page box have special functions:</p>
|
|
|
|
<ul>
|
|
<li>The content area of a page box is called the <a class="index-def"
|
|
href="#page-area0" id="x" title="page area"></a><a
|
|
name="ind-page-area"><dfn id="page-area0"> page area</dfn></a>. The
|
|
content of the document is flowed into the page area. The edges of the
|
|
page area on the first page establish the rectangle that is the initial
|
|
<a
|
|
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
|
|
containing block</a> of the document.</li>
|
|
|
|
<li>The margin area of a page box is divided into 16 <dfn
|
|
id="margin">margin boxes</dfn>. Each margin box has its own margin,
|
|
border, padding and content areas. Margin boxed are typically used to
|
|
display running headers and footers.</li>
|
|
</ul>
|
|
|
|
<p>The properties of a <dfn id="page-box1">page box</dfn> are determined
|
|
by properties established within the <dfn id="page-context0"><a
|
|
href="#page-context">page context</a></dfn>, which is the rule set of the
|
|
@page rule. Page boxes differ from other boxes in that the <span
|
|
class="property"> <span class="property">'width'</span></span> and <span
|
|
class="property">'height'</span> properties do not apply to a page box.
|
|
The size of the page box is specified using the <a class="property"
|
|
href="#size">'size'</a> property in the page context.</p>
|
|
|
|
<h3 id="page-terms"><span class="secno">3.1. </span>Page Terminology and
|
|
the Page Model</h3>
|
|
|
|
<p>The following terminology and accompanying diagrams help to describe
|
|
the <dfn id="page-model"> page model</dfn>:</p>
|
|
|
|
<dl>
|
|
<dt id="page-sheet">Page sheet</dt>
|
|
|
|
<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="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.</dd>
|
|
|
|
<dt id="non-printable-area">Non-printable area</dt>
|
|
|
|
<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 area along each edge of the page sheet.
|
|
The unprintable region along the left and right edges of the page are
|
|
usually the same size, as are the top and bottom areas. However,
|
|
the top/bottom and left/right areas can be different. A user agent may
|
|
not be aware of this area or how it varies from device to device.
|
|
Printing devices <em class="RFC2119" title="MAY in RFC 2119 context">
|
|
MAY</em> adjust the layout of the document so that content is not lost.
|
|
How this adjustment is accomplished is device dependent within the
|
|
constraints expressed in the sections <a
|
|
href="#renderingpages">Rendering page boxes that do not fit a page
|
|
sheet</a> and <a href="#content-outside-box">Content outside the page
|
|
box</a>.</dd>
|
|
|
|
<dt id="printable-area">Printable area</dt>
|
|
|
|
<dd>The printable area is the area of page sheet that a printer is
|
|
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. This
|
|
value is printing device dependent. A user agent may not be aware of
|
|
this area or how it varies from printing device to printing device.
|
|
Printing devices <em class="RFC2119" title="MAY in RFC 2119 context">
|
|
MAY</em> adjust the layout 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">Rendering page boxes that do not fit a page
|
|
sheet</a> and <a href="#content-outside-box">Content outside the page
|
|
box</a>.</dd>
|
|
|
|
<dt id="page-box">Page box</dt>
|
|
|
|
<dd> <img alt="Illustration of the page box with page area nested within
|
|
the page padding that is within page border that is within the page
|
|
margin" height="266" src="PageBox.png" style="float: right;"
|
|
width="267" /> A page box is derived from the <a
|
|
href="http://www.w3.org/TR/css3-box/">box model</a> and contains
|
|
portions of the document flow destined for rendering on a page sheet.
|
|
The width and height of the page box are determined by the size
|
|
property. Unlike other boxes, the margins of the page box are subdivided
|
|
into <a href="#margin-box"> margin boxes</a>. In the simplest case, the
|
|
page box is congruent with the page sheet. However, there are more
|
|
complex use cases (see the <a href="#complex-usecases"> transfer
|
|
possibilities</a> in the <a href="#intro">Introduction</a>) where the
|
|
page box differs from the page sheet in values such as size or
|
|
orientation.</dd>
|
|
|
|
<dt id="page-area">Page area</dt>
|
|
|
|
<dd>The page area is a synonym for the content area of the page box. The
|
|
page area acts as a container for all the boxes laid out within a given
|
|
page box.</dd>
|
|
|
|
<dt id="margin-box">Margin box</dt>
|
|
|
|
<dd>Margin boxes act as containing boxes for header/footer content. The
|
|
following margin boxes are defined and illustrated in the diagram below:
|
|
|
|
<table id="margin-box-def" style="width: 90%;" summary="defintion of
|
|
each of the margin boxes">
|
|
<caption>Table 1 Margin Box Definitions</caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Box</th>
|
|
|
|
<th>Description</th>
|
|
|
|
<th>Placement</th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="3">
|
|
<hr />
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr id="top-margin-boxes-def">
|
|
<th id="top-left-corner-box-def">top-left-corner</th>
|
|
|
|
<td> a fixed-size box filling the area defined by the intersection of
|
|
the top and left margins of the page box</td>
|
|
|
|
<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="TopLeftCornerBox.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="top-left-box-def">
|
|
<th>top-left</th>
|
|
|
|
<td> a variable-width box within the area defined by the top margin
|
|
and adjoining the top-left-corner margin box</td>
|
|
|
|
<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="TopLeftMarginBox.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="top-center-box-def">
|
|
<th>top-center</th>
|
|
|
|
<td>a variable-width box within the area defined by the top margin,
|
|
centered on the page area, and between the top-left and top-right
|
|
margin boxes</td>
|
|
|
|
<td> <img alt="the top center box with margin, border, and padding,
|
|
centered within the page's top margin" height="47"
|
|
src="TopCenterMarginBox.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="top-right-box-def">
|
|
<th>top-right</th>
|
|
|
|
<td>a variable-width box within the area defined by the top margin
|
|
and adjoining the top-right-corner margin box</td>
|
|
|
|
<td> <img alt="the top right box with margin, border, and padding,
|
|
nested within the page's top margin" height="47"
|
|
src="TopRightMarginBox.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th id="top-right-corner-box-def">top-right-corner</th>
|
|
|
|
<td>a box filling the area defined by the intersection of the top and
|
|
right margins of the page box</td>
|
|
|
|
<td> <img alt="the top right corner box with margin, border, and
|
|
padding, nested within the intersection of the page's top and
|
|
right margin" height="47" src="TopRightCornerMarginBox.png"
|
|
width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="left-margin-boxes-def">
|
|
<th id="left-top-box-def">left-top</th>
|
|
|
|
<td>a variable-height box within the area defined by the left margin
|
|
and adjacent to the bottom of the top-left-corner.</td>
|
|
|
|
<td rowspan="3"> <img alt="left-top, left-middle, and left-bottom
|
|
margin boxes in the page box's left margin" height="226"
|
|
src="LeftMarginBoxes.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="left-middle-box-def">
|
|
<th>left-middle</th>
|
|
|
|
<td> a variable-height box in the area defined by the left margin,
|
|
centered on the page area, and between the left-top and left-bottom
|
|
margin boxes.</td>
|
|
</tr>
|
|
|
|
<tr id="left-bottom-box-def">
|
|
<th>left-bottom</th>
|
|
|
|
<td>a variable-height box within the area defined by the left margin
|
|
and adjacent to the top of the bottom-left-corner.</td>
|
|
</tr>
|
|
|
|
<tr id="right-margin-boxes-def">
|
|
<th id="right-top-box-def">right-top</th>
|
|
|
|
<td>a variable-height box within the area defined by the right margin
|
|
and adjacent to the bottom of the top-right-corner.</td>
|
|
|
|
<td rowspan="3"> <img alt="right-top, right-middle, and right-bottom
|
|
margin boxes in the page box's right margin" height="226"
|
|
src="RightMarginBoxes.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="right-middle-box-def">
|
|
<th>right-middle</th>
|
|
|
|
<td> a variable-height box in the area defined by the right margin,
|
|
centered on the page area, and between the right-top and
|
|
right-bottom margin boxes.</td>
|
|
</tr>
|
|
|
|
<tr id="right-bottom-box-def">
|
|
<th>right-bottom</th>
|
|
|
|
<td>a variable-height box within the area defined by the right margin
|
|
and adjacent to the top of the bottom-right-corner.</td>
|
|
</tr>
|
|
|
|
<tr id="bottom-margin-boxes-def">
|
|
<th id="bottom-left-corner-box-def">bottom-left-corner</th>
|
|
|
|
<td>a box filling the area defined by the intersection of the bottom
|
|
and left margins of the page box</td>
|
|
|
|
<td> <img alt="bottom left corner box with margin, border, and
|
|
padding, nested within the page margin at the intersection of the
|
|
left and bottom page margins" height="48"
|
|
src="BottomLeftCornerBox.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="bottom-left-box-def">
|
|
<th>bottom-left</th>
|
|
|
|
<td>a variable-width box within the area defined by the bottom margin
|
|
and adjoining the bottom-left-corner margin box</td>
|
|
|
|
<td> <img alt="bottom left margin box with margin, border, and
|
|
padding, nested within the page's bottom margin next to the
|
|
bottom-left-corner box" height="48" src="BottomLeftMarginBox.png"
|
|
width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="bottom-center-box-def">
|
|
<th>bottom-center</th>
|
|
|
|
<td>a variable-width box within the area defined by the bottom
|
|
margin, centered on the page area, and between the bottom-left and
|
|
bottom-right margin boxes</td>
|
|
|
|
<td style="vertical-align: middle;"> <img alt="bottom center box with
|
|
margin, border, and padding, nested within the page's bottom
|
|
margin and centered on the page" height="48"
|
|
src="BottomCenterMarginBox.png" width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="bottom-right-box-def">
|
|
<th>bottom-right</th>
|
|
|
|
<td>a variable-width box within the area defined by the bottom margin
|
|
and adjoining the bottom-right corner margin box</td>
|
|
|
|
<td> <img alt="bottom right margin box with margin, border, and
|
|
padding, nested within the page's bottom margin and next to the
|
|
bottom-right-corner box" height="48" src="BottomRightMarginBox.png"
|
|
width="181" /></td>
|
|
</tr>
|
|
|
|
<tr id="bottom-right-corner-box-def">
|
|
<th>bottom-right-corner</th>
|
|
|
|
<td>a box filling the area defined by the intersection of the bottom
|
|
and right margins of the page box</td>
|
|
|
|
<td> <img alt="bottom right corner box with margin, border, and
|
|
padding, nested within the page margin at the intersection of the
|
|
right and bottom page margins" height="48"
|
|
src="BottomRightCornerBox.png" width="181" /></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</dd>
|
|
|
|
<dt id="content-empty">Content-empty Page</dt>
|
|
|
|
<dd>a page surface whose page area contains no printable content other
|
|
than backgrounds and/or borders. A page containing generated content or
|
|
invisible content such as a zero-width space within the page area is not
|
|
a content-empty page. On the other hand, a page containing only a
|
|
background and/or borders and/or padding and/or margin-box content
|
|
<em>is</em> a content-empty page.</dd>
|
|
</dl>
|
|
|
|
<h3 id="page-type"><span class="secno">3.2. </span>Page types</h3>
|
|
|
|
<p>Page layouts have many possible realizations. Among the aspects of page
|
|
layout that can vary are paper size, orientation of the layout with
|
|
respect to the paper, order of the pages, how the document will be
|
|
printed, and how the document will be bound. Some of these depend upon
|
|
factors such as the major writing direction and the media type that are
|
|
not specified by this module. The following terminology is used to
|
|
describe pages and page treatments:</p>
|
|
|
|
<dl>
|
|
<dt id="page-orientation">Page Orientation</dt>
|
|
|
|
<dd>The page orientation is defined by comparing the length of the edges
|
|
of a <a href="#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.</dd>
|
|
|
|
<dt id="portrait">Portrait Orientation</dt>
|
|
|
|
<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.</dd>
|
|
|
|
<dt id="landscape">Landscape Orientation</dt>
|
|
|
|
<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.</dd>
|
|
|
|
<dt id="front-side">Front Side</dt>
|
|
|
|
<dd>Media used as a stack of sheets have two sides known as the front and
|
|
the back. Typically, the user agent prints on the front side of the
|
|
media when using only one side of the page sheet. Media used from a roll
|
|
or continuous form will print only on the front side. <span
|
|
class="note">CSS does not provide a mechanism to deal directly with the
|
|
front and back sides, rather page layouts must be designed in terms of
|
|
left and right pages. </span></dd>
|
|
|
|
<dt id="back-side">Back Side</dt>
|
|
|
|
<dd>The back side of a sheet medium is the side that cannot be seen when
|
|
looking at the front side. Typically, the back side is only used when
|
|
printing on both sides of the medium. Unless using special paper stock
|
|
such as letterhead it does not usually matter which side is the front
|
|
and which is the back.</dd>
|
|
|
|
<dt id="duplex-printing">Duplex Printing</dt>
|
|
|
|
<dd>Duplex printing uses 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 it actually is.</dd>
|
|
|
|
<dt id="binding-edge">Binding Edge treatment</dt>
|
|
|
|
<dd>The binding edge is the edge of the page box that is towards 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.</dd>
|
|
|
|
<dt id="facing-pages">Facing Pages</dt>
|
|
|
|
<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. It is up to the UA to
|
|
determine whether the left page or the right page of a pair of facing
|
|
pages is the earlier one of the sequence. How the UA makes this
|
|
determination is implementation dependent but often depends upon the
|
|
predominant writing direction of the document.</dd>
|
|
|
|
<dt id="major-writing-direction">Major Writing Direction</dt>
|
|
|
|
<dd>The major writing direction for the document is determined by the UA.
|
|
If the UA supports the <span class="property">'direction'</span>
|
|
property from CSS2 or the CSS 3 Text Module it <em class="RFC2119"
|
|
title="MUST in RFC 2119 context">MUST</em> determine it using the value
|
|
of that property on the root element.</dd>
|
|
|
|
<dt id="left-page">Left Page</dt>
|
|
|
|
<dd>A page that will 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 major writing direction have the earlier of the facing
|
|
pages on the left. Rules for the left page can be specified using the
|
|
<span class="css">':left'</span> page selector.</dd>
|
|
|
|
<dt id="right-page">Right Page</dt>
|
|
|
|
<dd>A page that will 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 major writing direction have the earlier of the facing
|
|
pages on the right. Rules for the right page can be specified using the
|
|
<span class="css">':right'</span> page selector.</dd>
|
|
|
|
<dt id="first-page">First Page</dt>
|
|
|
|
<dd>The first page in a document. The first page is generally printed on
|
|
the front side of a medium. Rules for the first page can be specified
|
|
using the <span class="css"> <code class="css">':first'</code></span>
|
|
page selector. A first page can be either a left page or a right page
|
|
but a UA <em class="RFC2119" title="MUST in RFC 2119 context">MUST</em>
|
|
apply any rules defined for a first page in preference to those defined
|
|
on a left page or a right page.</dd>
|
|
</dl>
|
|
<!-- "Page size: the 'size' property" -->
|
|
<h3 id="page-size"><span class="secno">3.3. </span>Page size</h3>
|
|
|
|
<p>Different parts of the world use different paper sizes. It is a goal of
|
|
this specification that web content should be adaptable to a range of
|
|
different sizes without having to write a specific style sheet for each
|
|
paper size.</p>
|
|
|
|
<p>However, in some situations it is important that a certain page size
|
|
achieves a certain style. One way to achieve this goal is to utilize the
|
|
<a class="property" href="#size">'size'</a> property, which requests that
|
|
the document is printed on a page which has a certain size; another
|
|
method is to use Media Queries <a href="#MEDIAQ"
|
|
rel="biblioentry">[MEDIAQ]<!--{{MEDIAQ}}--></a> which allow different
|
|
style sheets to be applied to different page sizes.</p>
|
|
|
|
<h4 id="page-size-prop"><span class="secno">3.3.1. </span>Page size: the
|
|
<a class="property" href="#size">'size'</a> property</h4>
|
|
|
|
<table class="propdef" id="namesize" summary="definition of the size
|
|
property">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="size">size</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td><length>{1,2} | auto | [ <page-size> || [ portrait |
|
|
landscape] ]</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>auto</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>page context</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>paged</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>This property specifies the size and orientation of the containing box
|
|
for page content, the <a href="#page-box">page box</a>. In the general
|
|
case, where one page box is rendered onto one <a href="#page-sheet">page
|
|
sheet</a>, the <a class="property" href="#size"> <span
|
|
class="property">'size'</span></a> property also indicates the size of
|
|
the destination page sheet.</p>
|
|
|
|
<p>The size of a page box <em class="RFC2119" title="MAY in RFC 2119
|
|
context"> MAY</em> either be "absolute" (fixed size) or
|
|
"relative" (scalable, i.e., fitting available sheet sizes).
|
|
Relative page boxes allow user agents to scale a document and make
|
|
optimal use of the page size.</p>
|
|
|
|
<p>Three values for the <a class="property" href="#size">'size'</a>
|
|
property create a relative page box:</p>
|
|
|
|
<dl>
|
|
<dt>auto</dt>
|
|
|
|
<dd>The page box will be set to the size and orientation of the page
|
|
sheet chosen by the UA.</dd>
|
|
|
|
<dt>landscape</dt>
|
|
|
|
<dd>Specifies that the page's content be printed in landscape
|
|
orientation. The page box is the same size as the page, and the longer
|
|
sides are horizontal. If a <span class="css"> <code
|
|
class="css">'<length>'</code></span> or <span
|
|
class="css">'<page-size>'</span> is not specified, the size of the
|
|
page sheet is chosen by the UA.</dd>
|
|
|
|
<dt>portrait</dt>
|
|
|
|
<dd>Specifies that the page's content be printed in portrait orientation.
|
|
The page box is the same size as the page, and the shorter sides are
|
|
horizontal. If a <span class="css">'<length>'</span> or <span
|
|
class="css">'<page-size>'</span> is not specified, the size of the
|
|
page sheet is chosen by the UA.</dd>
|
|
</dl>
|
|
|
|
<div class="example">
|
|
<p>In the following example, the outer edges of the page box will align
|
|
with the page. The percentage value on the <span
|
|
class="property">'margin'</span> property is relative to the page size
|
|
so if the page sheet dimensions are 210mm x 297mm (i.e., A4), the
|
|
margins are 21mm and 29.7mm.</p>
|
|
|
|
<pre>@page {
|
|
size: auto;/* auto is the initial value */
|
|
margin: 10%;
|
|
}</pre>
|
|
</div>
|
|
|
|
<p>Other values define a fixed-size page box, and thereby indicate the
|
|
preferred output media size. When possible, output should be rendered on
|
|
the media size indicated; if not available, a larger size should be used;
|
|
if not available, the contents of the page box should be scaled down to
|
|
fit the smaller page sheet.</p>
|
|
|
|
<dl>
|
|
<dt><length></dt>
|
|
|
|
<dd> The page box will be set to the given absolute length. If only one
|
|
length value is specified, it sets both the width and height of the page
|
|
box (i.e., the box is a square). The <a href="#page-context">page
|
|
context</a> has a font associated with it either by an explicit use of
|
|
the <span class="property">'font-family'</span> and <span
|
|
class="property">'font-size'</span> properties or from the UA's default
|
|
style sheet. Therefore, values in units of <span class="css">'em'</span>
|
|
and <span class="css">'ex'</span> refer to the page context's font.</dd>
|
|
</dl>
|
|
|
|
<div class="example">
|
|
<p>For example:</p>
|
|
|
|
<pre>@page {
|
|
size: 8.5in 11in;/* width height */
|
|
}</pre>
|
|
|
|
<p>The above example sets the width of the page box to be 8.5 inches and
|
|
the height to be 11 inches. The page box in this example requires a page
|
|
sheet size of 8.5"x11" or larger.</p>
|
|
</div>
|
|
|
|
<dl>
|
|
<dt><page-size></dt>
|
|
|
|
<dd>A page size can be specified using one of the following media names.
|
|
This is the equivalent of specifying the <span
|
|
class="css">'<page-size>'</span> using length values. The
|
|
definition of the the media names comes from <cite>Media Standardized
|
|
Names</cite> <a href="#PWGMSN"
|
|
rel="biblioentry">[PWGMSN]<!--{{!PWGMSN}}--></a>.
|
|
<dl>
|
|
<dt>A5</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of ISO A5 media: 148mm wide
|
|
and 210 mm high.</dd>
|
|
|
|
<dt>A4</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of IS0 A4 media: 210 mm wide
|
|
and 297 mm high.</dd>
|
|
|
|
<dt>A3</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of ISO A3 media: 297mm wide
|
|
and 420mm high.</dd>
|
|
|
|
<dt>B5</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of ISO B3 media: 176mm wide by
|
|
250mm high.</dd>
|
|
|
|
<dt>B4</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of ISO B4 media: 250mm wide by
|
|
353mm high.</dd>
|
|
|
|
<dt>letter</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of North American letter
|
|
media: 8.5 inches wide and 11 inches high</dd>
|
|
|
|
<dt>legal</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of North American legal: 8.5
|
|
inches wide by 14 inches high.</dd>
|
|
|
|
<dt>ledger</dt>
|
|
|
|
<dd>The page box <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> be set to the size of North American ledger: 11
|
|
inches wide by 17 inches high.</dd>
|
|
</dl>
|
|
</dd>
|
|
</dl>
|
|
|
|
<p>These media size names can be used in conjunction with <span
|
|
class="property">'landscape'</span> or <span
|
|
class="property">'portrait'</span> to indicate size and orientation.</p>
|
|
|
|
<div class="example">
|
|
<p>For example:</p>
|
|
|
|
<pre>@page {
|
|
size: A4 landscape;
|
|
}</pre>
|
|
|
|
<p>The above example sets the width of the page box to be 297mm and the
|
|
height to be 210mm. The page box in this example should be rendered on a
|
|
page sheet size of 210 mm by 297 mm.</p>
|
|
</div>
|
|
|
|
<p>User agents <em class="RFC2119" title="SHOULD in RFC2119
|
|
context">SHOULD</em> also support Media Size Self-Describing Names as
|
|
defined in Section 5 of <a href="#PWGMSN"
|
|
rel="biblioentry">[PWGMSN]<!--{{!PWGMSN}}--></a>.</p>
|
|
|
|
<h4 id="page-size-media-query"><span class="secno">3.3.2. </span>Media
|
|
Queries</h4>
|
|
|
|
<p>This section is informative.</p>
|
|
|
|
<p>By using Media Queries <a href="#MEDIAQ"
|
|
rel="biblioentry">[MEDIAQ]<!--{{MEDIAQ}}--></a>, one style sheet can
|
|
express different stylistic preferences for different page sizes.
|
|
Consider this example:</p>
|
|
|
|
<div class="example" style="font-size: 10pt;">
|
|
<pre> /* style sheet for "A4" printing */
|
|
@media print and (width: 21cm) and (height: 29.7cm) {
|
|
@page {
|
|
margin: 3cm;
|
|
}
|
|
}
|
|
|
|
/* style sheet for "letter" printing */
|
|
@media print and (width: 8.5in) and (height: 11in) {
|
|
@page {
|
|
margin: 1in;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p> In the example above, "A4" sheets are given a
|
|
"3cm" page margin, and "letter" sheets are given a
|
|
"1in" page margin.</p>
|
|
|
|
<p>In Media Queries, the page is always considered to be in Portrait
|
|
Orientation. That is, it is not necessary to write Media Queries that
|
|
swap the width and height values to make sure the style sheet is applied.
|
|
</p>
|
|
|
|
<h4 id="renderingpages"><span class="secno">3.3.3. </span>Rendering page
|
|
boxes that do not fit a page sheet</h4>
|
|
|
|
<p>If a page box does not match the target page sheet dimensions, the user
|
|
agent <em class="RFC2119" title="MAY in RFC 2119 context"> MAY</em>
|
|
choose (in order of preference) to:</p>
|
|
|
|
<ul>
|
|
<li>Render the page box at the indicated size on a larger page sheet.</li>
|
|
|
|
<li>Rotate the page box 90° if this will make the page box fit the page
|
|
sheet.</li>
|
|
|
|
<li>Scale the page box to fit the page sheet. (There is no requirement to
|
|
maintain the aspect ratio of the page or of any elements on the page
|
|
when scaling; however, preservation of the aspect ratio is preferred.)</li>
|
|
|
|
<li>Reformat the page contents, including <span
|
|
class="property">'spilling'</span> onto other page sheets.</li>
|
|
|
|
<li>Clip overflowed content (least preferred).</li>
|
|
</ul>
|
|
|
|
<p>The user agent <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> consult the user before performing these operations.</p>
|
|
|
|
<h4 id="positioning-page-box"><span class="secno">3.3.4.
|
|
</span>Positioning the page box on the sheet</h4>
|
|
|
|
<p> When the page box is smaller than the page size, the user agent <em
|
|
class="RFC2119" title="SHOULD in RFC 2119 context">SHOULD</em> center the
|
|
page box on the sheet since this will align double-sided pages and avoid
|
|
accidental loss of information that is printed near the edge of the
|
|
sheet.</p>
|
|
<!-- "Page selector and page context" -->
|
|
<h3 id="page-selector-and-context"><span class="secno">3.4. </span>Page
|
|
Selectors and the Page Context</h3>
|
|
|
|
<p>Authors specify the dimensions, orientation, margins, etc. of a page
|
|
box within an <a class="css" href="#page">@page</a> rule. An <a
|
|
class="css" href="#page">@page</a> rule consists of the keyword <a
|
|
class="css" href="#page">'@page'</a>, an <em class="RFC2119"
|
|
title="OPTIONAL in RFC 2119 context"> OPTIONAL</em> page name followed
|
|
with no intervening space by an <em class="RFC2119" title="OPTIONAL in
|
|
RFC 2119 context"> OPTIONAL</em> page pseudo-class and a block of
|
|
declarations and margin rules (said to be in the <dfn
|
|
id="page-context">page context</dfn>).</p>
|
|
|
|
<p>The <em class="RFC2119" title="OPTIONAL in RFC 2119
|
|
context">OPTIONAL</em> page name and <em class="RFC2119" title="OPTIONAL
|
|
in RFC 2119 context">OPTIONAL</em> page pseudo-class constitutes the <dfn
|
|
id="page-selector">page selector</dfn>. The page selector specifies for
|
|
which pages the declarations apply. In CSS3, page selectors <em
|
|
class="RFC2119" title="MAY in RFC 2119 context">MAY</em> designate the
|
|
first page of a document, all left pages, all right pages, or pages with
|
|
specific names.</p>
|
|
|
|
<p>Properties for the <a href="#page-box">page box</a> are specified
|
|
within the page context.</p>
|
|
|
|
<h4 id="syntax-page-selector"><span class="secno">3.4.1. </span>Page
|
|
selector grammar</h4>
|
|
|
|
<p>The syntax for a page selector is a specialization of the generic
|
|
at-rule and <em class="RFC2119" title="MUST in RFC 2119 context">
|
|
MUST</em> adhere to the following (more strict) grammar:</p>
|
|
|
|
<p>See <a href="#CSS21" rel="biblioentry">[CSS21]<!--{{!CSS21}}--></a>,
|
|
Section 4.1.1 and Appendix G for the expansion of missing productions:</p>
|
|
|
|
<p id="specializatons-of-ATKEYWORD">All new lexical tokens are
|
|
specializations of the ATKEYWORD lexical token:</p>
|
|
|
|
<pre class="lexical">PAGE_SYM ::= "@page"
|
|
TOPLEFTCORNER_SYM ::= "@top-left-corner"
|
|
TOPLEFT_SYM ::= "@top-left"
|
|
TOPCENTER_SYM ::= "@top-center"
|
|
TOPRIGHT_SYM ::= "@top-right"
|
|
TOPRIGHTCORNER_SYM ::= "@top-right-corner"
|
|
BOTTOMLEFTCORNER_SYM ::= "@bottom-left-corner"
|
|
BOTTOMLEFT_SYM ::= "@bottom-left"
|
|
BOTTOMCENTER_SYM ::= "@bottom-center"
|
|
BOTTOMRIGHT_SYM ::= "@bottom-right"
|
|
BOTTOMRIGHTCORNER_SYM ::= "@bottom-right-corner"
|
|
LEFTTOP_SYM ::= "@left-top"
|
|
LEFTMIDDLE_SYM ::= "@left-middle"
|
|
LEFTBOTTOM_SYM ::= "@right-bottom"
|
|
RIGHTTOP_SYM ::= "@right-top"
|
|
RIGHTMIDDLE_SYM ::= "@right-middle"
|
|
RIGHTBOTTOM_SYM ::= "@right-bottom"
|
|
|
|
|
|
<a href="#page" id="syntax-prod-page">page</a> :
|
|
PAGE_SYM S* IDENT? pseudo_page? S*
|
|
<code class="css">'{'</code> S* [ declaration | margin ]? [ <code class="css">';'</code> S* [ declaration | margin ]? ]* <code class="css">'}'</code> S*
|
|
;
|
|
|
|
<span id="syntax-prod-pseudo-page">pseudo_page</span> :
|
|
<code class="css">':'</code> [ "left" | "right" | "first" ]
|
|
;
|
|
|
|
<span id="syntax-prod-margin">margin</span> :
|
|
margin_sym S* <code class="css">'{'</code> declaration [ <code class="css">';'</code> S* declaration? ]* <code class="css">'}'</code> S*
|
|
;
|
|
|
|
<span id="syntax-prod-margin-sym">margin_sym</span> :
|
|
TOPLEFTCORNER_SYM |
|
|
TOPLEFT_SYM |
|
|
TOPCENTER_SYM |
|
|
TOPRIGHT_SYM |
|
|
TOPRIGHTCORNER_SYM |
|
|
BOTTOMLEFTCORNER_SYM |
|
|
BOTTOMLEFT_SYM |
|
|
BOTTOMCENTER_SYM |
|
|
BOTTOMRIGHT_SYM |
|
|
BOTTOMRIGHTCORNER_SYM |
|
|
LEFTTOP_SYM |
|
|
LEFTMIDDLE_SYM |
|
|
LEFTBOTTOM_SYM |
|
|
RIGHTTOP_SYM |
|
|
RIGHTMIDDLE_SYM |
|
|
RIGHTBOTTOM_SYM
|
|
;</pre>
|
|
|
|
<p id="page-selector-syntax-restrict">The following restrictions and
|
|
relaxations are made to the syntax above:</p>
|
|
|
|
<ul>
|
|
<li>The value <span class="property">'auto'</span> <em class="RFC2119"
|
|
title="MAY NOT in RFC 2119 context">may not</em> be used as a page name
|
|
and <em class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be
|
|
treated as a syntax error.</li>
|
|
</ul>
|
|
|
|
<div class="example">
|
|
<p>The following are examples of page selectors (declaration block
|
|
intentionally left blank)</p>
|
|
|
|
<pre>@page { ... }
|
|
@page :left { ... }
|
|
@page :right { ... }
|
|
@page LandscapeTable { ... }
|
|
@page CompanyLetterHead:first { ... } /* identifier and pseudo page. */
|
|
@page:first { ... };
|
|
</pre>
|
|
|
|
<p>The following are examples of 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>
|
|
|
|
<h4 id="cascading-and-page-context"><span class="secno">3.4.2.
|
|
</span>Cascading in the page context</h4>
|
|
|
|
<p>Optionally, @page rules can have one pseudo-class (':first',':left', or
|
|
<span class="property">'right'</span>) and/or one named page. The
|
|
specificity of @page rules are computed in an analogous manner to the
|
|
computations defined in the <a
|
|
href="http://www.w3.org/TR/CSS21/selector.html"> Selectors</a> module:</p>
|
|
|
|
<ul>
|
|
<li>if an @page rule has a named page, f=1</li>
|
|
|
|
<li>if an @page rule has a <code class="css">':first'</code>
|
|
pseudo-class, g=1</li>
|
|
|
|
<li>if an @page rule has a <code class="css">':left'</code> or <code
|
|
class="css">':right'</code> pseudo-class, h=1</li>
|
|
</ul>
|
|
|
|
<p>Concatenating the three numbers f-g-h gives the specificity.</p>
|
|
|
|
<div class="example">
|
|
<p>Some page specificity calculation examples follow:</p>
|
|
|
|
<pre> @page { } /* f=0 g=0 h=0 -> specificity = 0 */
|
|
@page :left { } /* f=0 g=0 h=1 -> specificity = 1 */
|
|
@page :first { } /* f=0 g=1 h=0 -> specificity = 10 */
|
|
@page artsy { } /* f=1 g=0 h=0 -> specificity = 100 */
|
|
@page artsy:left { } /* f=1 g=0 h=1 -> specificity = 101 */
|
|
@page artsy:first { } /* f=1 g=1 h=0 -> specificity = 110 */ </pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>Consider the following usage example:</p>
|
|
|
|
<pre>@page {
|
|
margin-left: 3cm;
|
|
}
|
|
|
|
@page :left {
|
|
margin-left: 4cm;
|
|
}</pre>
|
|
|
|
<p>Due to the higher specificity of the pseudo-class selector, the left
|
|
margin on left pages will be <span class="css">4 centimeters</span> and
|
|
all other pages (i.e., the right pages) will have a left margin of <span
|
|
class="css">3 centimeters</span>.</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>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 margin box and green text in the top-right margin box, while
|
|
subsequent pages will have red text in the margin boxes.</p>
|
|
|
|
<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">
|
|
<p>Page contexts cascade, so the following stylesheet would style pages
|
|
with 25 millimeter margins and 14 point type in the margin boxes:</p>
|
|
|
|
<pre>@page { margin: 25mm;}
|
|
@page { font-size: 14pt;}</pre>
|
|
</div>
|
|
|
|
<h3 id="page-properties"><span class="secno">3.5. </span>Page Properties</h3>
|
|
|
|
<div>
|
|
<p>The following properties can be used in the <a
|
|
href="#page-context">page context</a> to style the appearance of the
|
|
page box:</p>
|
|
|
|
<ul>
|
|
<li><a href="#page-size">size</a>,</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
|
|
background properties</a>,</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
|
|
properties</a>,</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
|
|
properties</a>, and</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
|
|
properties</a>.</li>
|
|
</ul>
|
|
|
|
<p>These properties can be used in the page context to set counters:</p>
|
|
|
|
<ul>
|
|
<li><a href="http://www.w3.org/TR/CSS21/generate.html#counters">
|
|
counter-reset, counter-increment</a>,</li>
|
|
</ul>
|
|
|
|
<p>These properties can be used in the page context to style the content
|
|
of margin boxes:</p>
|
|
|
|
<ul>
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>
|
|
</ul>
|
|
|
|
<p>That is, when set in the page context, the values become the initial
|
|
values for the margin boxes.</p>
|
|
|
|
<p>These properties can be used in the margin context to style margin
|
|
boxes and their content:</p>
|
|
|
|
<ul>
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
|
|
background properties</a>,</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/box.html#border-properties">border
|
|
properties</a>,</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/box.html#margin-properties">margin
|
|
properties</a>,</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/box.html#padding-properties">padding
|
|
properties</a>,</li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/colors.html#propdef-color">color</a>,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/CSS21/fonts.html">font properties</a>,</li>
|
|
|
|
<li><a href="http://www.w3.org/TR/CSS21/text.html">text properties</a></li>
|
|
|
|
<li><a
|
|
href="http://www.w3.org/TR/CSS21/generate.html#content">content</a>,</li>
|
|
</ul>
|
|
|
|
<p>The normal rules for box properties apply with the following
|
|
exceptions:</p>
|
|
|
|
<ul>
|
|
<li>Values in units of <span class="css">'em'</span> and <span
|
|
class="css">'ex'</span> refer to the page context's font. The <a
|
|
href="#page-context">page context</a> has a font associated with it
|
|
either by an explicit use of the <span class="property"> <span
|
|
class="property">'font-family'</span></span> and <span
|
|
class="property">'font-size'</span> properties or from their initial
|
|
values.</li>
|
|
|
|
<li> Percentage values on the margin, padding and border properties are
|
|
relative to the dimensions of the containing box (defined by the <a
|
|
class="property" href="#size">'size'</a> property in the page context).
|
|
For left and right, the margin, border and padding percentages are
|
|
relative to the width of the containing box; for top and bottom, the
|
|
margin, border and padding percentages are relative to the height of
|
|
the containing box.</li>
|
|
|
|
<li>The <span class="property">'width'</span> and <span
|
|
class="property"> <span class="property">'height'</span></span>
|
|
properties do not apply to the page box (and <em class="RFC2119"
|
|
title="SHOULD in RFC 2119 context"> SHOULD</em> be treated as if they
|
|
were set to <span class="css">'auto'</span>).</li>
|
|
|
|
<li>The page background applies to the entire page box, including the
|
|
page margins.</li>
|
|
</ul>
|
|
|
|
<p>The page background is painted first, and covers the entire <a
|
|
href="#page-box">page box</a>. A margin-box background is painted
|
|
over (on top of) the page background. The root element then paints
|
|
the canvas within the <a href="#page-area">page area</a>, which contains
|
|
the portions of the root element formatted for a single page (including
|
|
the margins of the root element). </p>
|
|
|
|
<p>The origin of the page background is the upper-left corner of the page
|
|
area.</p>
|
|
|
|
<p>When a box is interrupted at the bottom of one page and continued on
|
|
the top of the next, the box's margins, borders, and padding are not
|
|
rendered at the bottom and top of the respective pages. Properties in
|
|
other modules may modify this behavior. (At the time of writing, a
|
|
property <span class="property">'border-break'</span> <a href="#CSS3BG"
|
|
rel="biblioentry">[CSS3BG]<!--{{CSS3BG}}--></a> is under consideration.)</p>
|
|
|
|
<p>It is <em class="RFC2119" title="SHOULD in RFC2119
|
|
context">recommended</em> that user agents with a <a
|
|
href="#non-printable-area">non-printable area</a> (that is, user agents
|
|
which cannot print over the entire sheet surface) establish a default
|
|
page margin via the user agent stylesheet that includes the
|
|
non-printable area. It is further <em class="RFC2119" title="SHOULD in
|
|
RFC2119 context"> recommended</em> that authors assume that the default
|
|
page area will not include unprintable regions.</p>
|
|
|
|
<h3 id="left-right-first"><span class="secno">3.6. </span>Left, right,
|
|
and first pages</h3>
|
|
|
|
<p>When printing double-sided documents, the <a href="#page-box">page
|
|
boxes</a> on left and right pages <em class="RFC2119" title="MAY in RFC
|
|
2119 context">MAY</em> be different. This can be expressed through CSS
|
|
pseudo-classes defined in the <a href="#page-context"> page context</a>.</p>
|
|
|
|
<p>All pages are automatically classified by user agents into either the
|
|
<span class="css">':left'</span> or <span class="css">':right'</span>
|
|
pseudo-class. The following example creates left and right binding edges
|
|
using these pseudo-classes.</p>
|
|
|
|
<div class="example">
|
|
<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 <em class="RFC2119" title="MUST in RFC 2119
|
|
context">MUST</em> honor these declarations even if the user agent does
|
|
not transfer the page boxes to left and right sheets (e.g., a printer
|
|
that only prints single-sided).</p>
|
|
|
|
<p>Authors <em class="RFC2119" title="MAY in RFC 2119 context">MAY</em>
|
|
also specify style for the first page of a document with the <span
|
|
class="css">':first'</span> pseudo-class:</p>
|
|
|
|
<div class="example">
|
|
<pre>@page { margin: 2cm } /* All margins set to 2cm */
|
|
|
|
@page :first {
|
|
margin-top: 10cm /* Top margin on first page 10cm */
|
|
}</pre>
|
|
</div>
|
|
|
|
<p>Whether the first page of a document is <span
|
|
class="css">':left'</span> or <span class="css"> <code
|
|
class="css">':right'</code></span> depends on the major writing
|
|
direction of the document and is outside the scope of this document.
|
|
However, to force a <span class="css"> <code
|
|
class="css">':left'</code></span> or <span class="css">':right'</span>
|
|
first page, authors <em class="RFC2119" title="MAY in RFC 2119 context">
|
|
MAY</em> insert a page break before the first generated box (e.g., in
|
|
HTML, specify this for the BODY element).</p>
|
|
|
|
<div class="note">
|
|
<p><em><strong>Note.</strong> Adding declarations to the <span
|
|
class="css"> <code class="css">':left'</code></span> or <span
|
|
class="css">':right'</span> 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>
|
|
|
|
<div class="note">
|
|
<p><em><strong>Note.</strong> Future versions of CSS may include other
|
|
page pseudo-classes.</em></p>
|
|
</div>
|
|
|
|
<h3 id="content-outside-box"><span class="secno">3.7. </span>Content
|
|
outside the page box</h3>
|
|
|
|
<p>When formatting content in the page model, some content <em
|
|
class="RFC2119" title="MAY in RFC 2119 context"> MAY</em> end up outside
|
|
the page box. For example, an element whose <span class="property">
|
|
<span class="property">'white-space'</span></span> property has the
|
|
value <span class="css">'pre'</span> <em class="RFC2119" title="MAY in
|
|
RFC 2119 context"> MAY</em> generate a box that is wider than the page
|
|
box. Also, when boxes are positioned absolutely, they <em
|
|
class="RFC2119" title="MAY in RFC 2119 context"> MAY</em> end up in
|
|
"inconvenient" locations. For example, images <em
|
|
class="RFC2119" title="MAY in RFC 2119 context"> MAY</em> be placed on
|
|
the edge of the page box. Similarly when boxes use fixed or relative
|
|
positioning, they <em class="RFC2119" title="MAY in RFC 2119 context">
|
|
MAY</em> also end up outside of the page box.</p>
|
|
|
|
<p>A specification for the exact formatting of such elements lies outside
|
|
the scope of this document. However, we recommend that authors and user
|
|
agents observe the following general principles concerning content
|
|
outside the page box:</p>
|
|
|
|
<ul>
|
|
<li>User agents <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> avoid generating a large number of empty page
|
|
boxes to honor the positioning of elements (e.g., you don't want to
|
|
print 100 blank pages). Note, however, that generating a small number
|
|
of empty page boxes <em class="RFC2119" title="MAY in RFC 2119
|
|
context"> MAY</em> be necessary to honor the <span
|
|
class="css">'left'</span> and <span class="css"> <span
|
|
class="property">'right'</span></span> values for <a class="property"
|
|
href="#page-break-before">'page-break-before'</a> and <a
|
|
class="property" href="#page-break-after"> <span
|
|
class="property">'page-break-after'</span></a>.</li>
|
|
|
|
<li>Authors <em class="RFC2119" title="SHOULD in RFC 2119
|
|
context">SHOULD</em> not position elements in inconvenient locations
|
|
just to avoid rendering them. Instead:
|
|
<ul>
|
|
<li>To suppress box generation entirely, set the <span
|
|
class="property"> <span class="property">'display'</span></span>
|
|
property to <span class="css">'none'</span>.</li>
|
|
|
|
<li>To make a box invisible, set the <span
|
|
class="property">'visibility'</span> property.</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li>User agents <em class="RFC2119" title="MAY in RFC 2119
|
|
context">MAY</em> handle boxes positioned outside the page box in
|
|
several ways, including discarding them or creating page boxes for them
|
|
at the end of the document.</li>
|
|
</ul>
|
|
<!-- "Margin boxes" -->
|
|
<h2 id="margin-boxes"><span class="secno">4. </span>Margin Boxes</h2>
|
|
|
|
<p>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. The location of page headers and footer
|
|
is one of the many graphic design choices a document's author makes.</p>
|
|
|
|
<dl>
|
|
<dt>Page Header</dt>
|
|
|
|
<dd>Typically, a page header is located at the top of the page in
|
|
documents with a predominately horizontal writing direction and on the
|
|
side opposite the <a href="#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
|
|
<span class="css">'top-left-corner'</span>, <span
|
|
class="css">'top-left'</span>, <span class="css">'top-center'</span>,
|
|
<span class="css">'top-right'</span> and <span
|
|
class="css">'top-right-corner'</span> margin boxes. Another design, for
|
|
vertically written documents, could use the <span
|
|
class="css">'right-top'</span>, <span
|
|
class="css">'right-middle'</span>, and <span
|
|
class="css">'right-bottom'</span> margin boxes for <a
|
|
href="#right-page">right facing pages</a> and <span
|
|
class="css">'left-top'</span>, <span class="css">'left-middle'</span>,
|
|
and <span class="css">'left-bottom'</span> for <a
|
|
href="#left-page">left facing pages</a>. However, there are no
|
|
constraints placed on the use of margin boxes for page headers, other
|
|
than those expressed in the discussion of <a
|
|
href="#page-selector-syntax-restrict">restrictions to the grammar of
|
|
the page selector</a></dd>
|
|
|
|
<dt>Page Footer</dt>
|
|
|
|
<dd>Typically, the page footer is 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 <span
|
|
class="css">'bottom-left-corner'</span>, <span
|
|
class="css">'bottom-left'</span>, <span
|
|
class="css">'bottom-center'</span>, <span
|
|
class="css">'bottom-right'</span> and <span
|
|
class="css">'bottom-right-corner'</span> margin boxes as the page
|
|
footer. The design of a vertically written document could use the
|
|
margin boxes of the binding edge of the page for the page footer.
|
|
However, there are no constraints placed on the use of margin boxes for
|
|
page footers, other than those expressed in the discussion of <a
|
|
href="#page-selector-syntax-restrict">restrictions to the grammar of
|
|
the page selector</a></dd>
|
|
</dl>
|
|
|
|
<p>Please note that the margin boxes are oriented with respect to the
|
|
content and are independent of page orientation, for example the top
|
|
margin boxes are above the page box in both portrait and landscape
|
|
orientation.</p>
|
|
|
|
<p>Margin boxes are created through <a href="#margin-at-rules">margin
|
|
at-rules</a> inside the <a href="#page-context">page context</a>.</p>
|
|
<!-- "Margin at-rules" -->
|
|
<h3 id="margin-at-rules"><span class="secno">4.1. </span>At-rules for
|
|
margin boxes</h3>
|
|
|
|
<p>A <dfn id="margin-at-rule">margin at-rule</dfn> consists of an <a
|
|
href="#specializatons-of-ATKEYWORD">ATKEYWORD</a> that identifies the
|
|
margin box (e.g. <span class="css">'@top-left'</span>) and a block of
|
|
declarations (said to be in the <dfn id="margin-context">margin
|
|
context</dfn>).</p>
|
|
|
|
<div class="example">
|
|
<p>The following style sheet establishes a page header containing the
|
|
title ("Hamlet") on the left side and the page number,
|
|
preceded by "Page ", on the right side:</p>
|
|
|
|
<pre>@page {
|
|
size: 8.5in 11in;
|
|
margin: 10%;
|
|
|
|
@top-left {
|
|
content: "Hamlet";
|
|
}
|
|
@top-right {
|
|
content: "Page " counter(page);
|
|
}
|
|
}</pre>
|
|
</div>
|
|
|
|
<h3 id="max-margin-dimension"><span class="secno">4.2. </span>Maximum
|
|
Dimension of margin boxes</h3>
|
|
|
|
<p>The maximum potential width and height of each margin box is
|
|
determined by establishing the containing box for the margin box in the
|
|
steps shown below. There are two quantities used in the following
|
|
calculations:</p>
|
|
|
|
<ul>
|
|
<li> <dfn id="MaxBoxWidth">max box width</dfn>, which is the sum of the
|
|
width of the page's left padding area, the width of the <a
|
|
href="#page-box">page area</a>, and the width of the page's right
|
|
padding area. In other words, it is the distance between the <a
|
|
href="#page-box">left page border and the right page border</a>. This
|
|
quantity is used when calculating dimensions of the top and bottom
|
|
margin boxes.</li>
|
|
|
|
<li> <dfn id="MaxBoxHeight">max box height</dfn>, which is the sum of
|
|
the height of the page's top padding area, the height of the <a
|
|
href="#page-box">page area</a>, and the height of the page's right
|
|
padding area. In other words, it is the distance between the <a
|
|
href="#page-box">top page border and the bottom page border</a>.
|
|
This quantity is used when calculating dimensions of the left and right
|
|
margin boxes.</li>
|
|
</ul>
|
|
|
|
<h3 id="margin-dimension"><span class="secno">4.3. </span>Dimension of
|
|
margin boxes</h3>
|
|
|
|
<p>Definitions: The "outer width" of a margin box is the sum of
|
|
its used left and right margin, used left and right border, used left
|
|
and right padding, and used width. The "outer height" of a
|
|
margin box is the sum of its used top and bottom margin, used top and
|
|
bottom border, used top and bottom padding and used height.</p>
|
|
|
|
<p>The following rules apply to <span class="property">'top-left'</span>,
|
|
<span class="property">'top-center'</span> and <span
|
|
class="property">'top-right'</span> margin boxes, which are referred to
|
|
as [1], [2], and [3], respectively, in the expression below.</p>
|
|
|
|
<p>Rules:</p>
|
|
|
|
<ul>
|
|
<li>The UA chooses used values for each box's width, left and right
|
|
margin, left and right border thickness, and left and right padding. It
|
|
chooses them in such a way that the value of:
|
|
<div>
|
|
<pre>
|
|
left-margin[1]² + left-margin[2]² + left-margin[3]² +
|
|
right-margin[1]² + right-margin[2]² + right-margin[3]²
|
|
</pre>
|
|
</div>
|
|
is as small as possible under the constraints below.
|
|
("foo[n]" stands for the used value of property foo of the
|
|
n'th box and "x²" for the square of x.)
|
|
<ol>
|
|
<li>The sum of the outer widths of the three boxes is equal to max box
|
|
width.</li>
|
|
|
|
<li>If the center box is not empty or if its computed width is not
|
|
<span class="property">'auto'</span>, then the outer widths of the
|
|
other two boxes are equal to each other (i.e., the center box is
|
|
centered in that case).</li>
|
|
|
|
<li>If a box is empty and its computed width is <span
|
|
class="property">'auto'</span>, then the used values of its left and
|
|
right padding and left and right border are all 0. (This makes such a
|
|
box invisible, because, by item 5, its width is also 0.)</li>
|
|
|
|
<li>If a box is empty and its computed width is <span
|
|
class="property">'auto'</span>, then the used values of its left and
|
|
right padding and left and right border are all 0. (This makes such a
|
|
box invisible, because, by item 5, its width is also 0.)</li>
|
|
|
|
<li>If a box's computed width is <span class="property">'auto'</span>,
|
|
then: min intrinsic width <= used width <= max intrinsic width.
|
|
</li>
|
|
|
|
<li>The used values of the left box's left margin, the center box's
|
|
left and right margin and the right box's right margin are their
|
|
respective computed values, unless that computed value is <span
|
|
class="property">'auto'</span>.</li>
|
|
|
|
<li>The used values of the left box's right margin and the right box's
|
|
left margin are their respective computed values, unless that
|
|
computed value is <span class="property">'auto'</span>.</li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li>If the above constraints are contradictory
|
|
("over-constrained"), then constraint 7 is replaced by 7a:
|
|
<ol>
|
|
<li style="list-style-type: none;">7a. If the computed values of the
|
|
left box's left and right margins are 'auto and not
|
|
'auto', respectively, then the used value of the right margin
|
|
is its computed value. If the computed values of the right box's
|
|
left and right margins are not 'auto' and 'auto',
|
|
respectively, then the used value of the left margin is its computed
|
|
value. This effectively means that the specified right margin of the
|
|
left box is ignored if necessary, and ditto for the left margin of
|
|
the right box.</li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li>Note that, by their definitions, margins <em class="RFC2119"
|
|
title="MAY in RFC2119 context">may</em> be negative, but widths <em
|
|
class="RFC2119" title="MAY NOT in RFC2119 context">may not.</em></li>
|
|
</ul>
|
|
|
|
<p>The used values for bottom-left, bottom-center and bottom-right are
|
|
established by the same rules.</p>
|
|
|
|
<p>The used values for left-top, left-middle and left-bottom boxes are
|
|
established by the same rules, with "width" replaced by
|
|
"height", "left" by "top",
|
|
"right" by "bottom" and "center" by
|
|
"middle".</p>
|
|
|
|
<p>The used values for right-top, right-middle and right-bottom boxes are
|
|
established by the same rules as for left-top, left-middle and
|
|
left-bottom.</p>
|
|
|
|
<h3 id="margin-text-alignment"><span class="secno">4.4. </span>Margin
|
|
boxes and default values</h3>
|
|
|
|
<p>Margin boxes have an initial value of zero for padding, border and
|
|
margin. The default height of top boxes is the value of the page box's
|
|
top margin. The default height of the bottom boxes is the value of the
|
|
page box's bottom margin.</p>
|
|
|
|
<p>The initial value for <span class="property">'content'</span> is <span
|
|
class="css"> <span class="property">'none'</span></span>. The initial
|
|
<span class="property">'width'</span> and <span
|
|
class="property">'height'</span> of margin boxes is <span class="css">
|
|
<span class="property">'auto'</span></span>. The initial value of
|
|
text-align and vertical-align is defined below:</p>
|
|
|
|
<table id="margin-values" style="border-collapse: collapse;"
|
|
summary="definition of margin box default properties">
|
|
<caption>Table 2. Initial values for Margin Boxes</caption>
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Margin box</th>
|
|
|
|
<th><span class="property">'text-align'</span></th>
|
|
|
|
<th><span class="property">'vertical-align'</span></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td><a href="#top-left-corner-box-def">top-left-corner</a></td>
|
|
|
|
<td align="center">right</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#top-left-box-def">top-left</a></td>
|
|
|
|
<td align="center">left</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#top-center-box-def">top-center</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#top-right-box-def">top-right</a></td>
|
|
|
|
<td align="center">right</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#top-right-corner-box-def">top-right-corner</a></td>
|
|
|
|
<td align="center">left</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#left-top-box-def">left-top</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">top</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#left-middle-box-def">left-middle</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#left-bottom-box-def">left-bottom</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">bottom</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#right-top-box-def">right-top</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">top</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#right-middle-box-def">right-middle</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#right-bottom-box-def">right-bottom</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">bottom</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#bottom-left-corner-box-def">bottom-left-corner</a></td>
|
|
|
|
<td align="center">right</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#bottom-left-box-def">bottom-left</a></td>
|
|
|
|
<td align="center">left</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#bottom-center-box-def">bottom-center</a></td>
|
|
|
|
<td align="center">center</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#bottom-right-box-def">bottom-right</a></td>
|
|
|
|
<td align="center">right</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><a href="#bottom-right-corner-box-def">bottom-right-corner</a></td>
|
|
|
|
<td align="center">left</td>
|
|
|
|
<td align="center">middle</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h4 id="margin-box-ex"><span class="secno">4.4.1. </span>Margin box
|
|
examples</h4>
|
|
|
|
<p>The following is a collection of examples of margin box usage.</p>
|
|
|
|
<div class="example">
|
|
<p>Here is an example of a page with only a top-left header:</p>
|
|
|
|
<pre>@page {
|
|
@top-left { content: "Header in Left Cell (top-left)" }
|
|
}</pre>
|
|
|
|
<p>Because there are no contents defined for the top-center or the
|
|
top-right margin boxes, the extent of the top-left margin box is
|
|
allowed to cross the center of the page box.</p>
|
|
|
|
<p><img alt="Header Example 1" height="177" src="header-ex-1.png"
|
|
width="737" /></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following is an example of a page with a centered header:</p>
|
|
|
|
<pre>@page {
|
|
@top-center { content: "Header in Center Cell (top-center)" }
|
|
}</pre>
|
|
|
|
<p><img alt="Header Example 2" height="177" src="header-ex-2.png"
|
|
width="737" /></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following is an example of a page with a single header in the
|
|
top-right margin box:</p>
|
|
|
|
<pre>@page {
|
|
@top-right { content: "Header in Right Cell (top-right)" }
|
|
}</pre>
|
|
|
|
<p>Because the content of the center cell is empty, the extent of the
|
|
top-right margin box is allowed to cross the center of the page box.</p>
|
|
|
|
<p><img alt="Header Example 3" height="177" src="header-ex-3.png"
|
|
width="737" /></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following is an example of a page with a top-center and a
|
|
top-left header:</p>
|
|
|
|
<pre>@page {
|
|
@top-left { content: "Left Cell (top-left)" }
|
|
@top-center { content: "Header in Center Cell (top-center)" }
|
|
}</pre>
|
|
|
|
<p><img alt="Header Example 4" height="177" src="header-ex-4.png"
|
|
width="737" /></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following is an example of a page with a top-center and a
|
|
top-right header:</p>
|
|
|
|
<pre>@page {
|
|
@top-center { content: "Header in Center Cell (top-center)" }
|
|
@top-right { content: "Right Cell (top-right)" }
|
|
}</pre>
|
|
|
|
<p><img alt="Header Example 5" height="177" src="header-ex-5.png"
|
|
width="737" /></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following is an example of a page with top-left and top-right
|
|
headers:</p>
|
|
|
|
<pre>@page {
|
|
@top-left { content: "Header in top-left with approx. "
|
|
"twice as many words as right cell." }
|
|
@top-right { content: "Right cell (top-right)" }
|
|
}</pre>
|
|
|
|
<p>Because there are no center cell contents, the extent of the top-left
|
|
is allowed to cross the center of the page box. As the intrinsic width
|
|
of the top-left contents is approximately twice the intrinsic width of
|
|
that of the top-right, the top-left margin box is approximately twice
|
|
as wide as the top-right margin box.</p>
|
|
|
|
<p><img alt="Header Example 6" height="177" src="header-ex-6.png"
|
|
width="737" /></p>
|
|
</div>
|
|
|
|
<h3 id="populating-margin-boxes"><span class="secno">4.5.
|
|
</span>Populating margin boxes</h3>
|
|
|
|
<p>A margin box is instantiated if a margin context is established and
|
|
one of the following conditions holds:</p>
|
|
|
|
<ul>
|
|
<li>The computed value of <span class="property">'content'</span> is not
|
|
<span class="css"> <span class="property">'none'</span></span>.</li>
|
|
|
|
<li>The properties <span class="css">'width'</span> and <span
|
|
class="css"> <span class="property">'height'</span></span> are set in
|
|
the <a href="#margin-context">margin context</a>.</li>
|
|
</ul>
|
|
|
|
<div class="example">
|
|
<p>This example style sheet could be used to create a centered header
|
|
with the current chapter name:</p>
|
|
|
|
<pre>body {counter-reset: chapter;}
|
|
div.chapter {counter-increment: chapter;}
|
|
@page {
|
|
margin: 10%;
|
|
@top-center { content: "Chapter" counter(chapter) }
|
|
}</pre>
|
|
</div>
|
|
|
|
<p>Note that a counter value could be updated many times on a given page.
|
|
The value of the counter at the beginning of page processing <em
|
|
class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be used by
|
|
default.</p>
|
|
|
|
<h2 id="page-breaks"><span class="secno">5. </span>Page Breaks</h2>
|
|
|
|
<p>The following sections explain page formatting in CSS3 paged media.
|
|
Five properties indicate where the user agent <em class="RFC2119"
|
|
title="MAY in RFC 2119 context">MAY</em> or <em class="RFC2119"
|
|
title="SHOULD in RFC 2119 context">SHOULD</em> break pages, and on what
|
|
page (left or right) the subsequent content <em class="RFC2119"
|
|
title="SHOULD in RFC 2119 context">SHOULD</em> resume. Each page break
|
|
ends layout in the current <a href="#page-box">page box</a> and causes
|
|
remaining pieces of the document tree to be laid out in a new page box.</p>
|
|
|
|
<h3 id="pg-br-before-after"><span class="secno">5.1. </span>Break
|
|
before/after elements: <a class="property"
|
|
href="#page-break-before">'page-break-before'</a>, <a class="property"
|
|
href="#page-break-after">'page-break-after'</a>, <a class="property"
|
|
href="#page-break-inside">'page-break-inside'</a></h3>
|
|
|
|
<table class="propdef" id="namepage-break-before" summary="property
|
|
definition">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="page-break-before">page-break-before</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td>auto | always | avoid | left | right</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>auto</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>block-level elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>no</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>paged</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="propdef" id="namepage-break-after" summary="property
|
|
definition">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="page-break-after">page-break-after</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td>auto | always | avoid | left | right</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>auto</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>block-level elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>no</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>paged</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="propdef" id="namepage-break-inside" summary="property
|
|
definition">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="page-break-inside">page-break-inside</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td>auto | avoid</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>auto</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>block-level elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>yes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>paged</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>Values for these properties have the following meanings:</p>
|
|
|
|
<dl>
|
|
<dt>auto</dt>
|
|
|
|
<dd>Neither force nor forbid a page break before (after, inside) the
|
|
generated box.</dd>
|
|
|
|
<dt>always</dt>
|
|
|
|
<dd>Always force a page break before (after) the generated box.</dd>
|
|
|
|
<dt>avoid</dt>
|
|
|
|
<dd>Avoid a page break before (after, inside) the generated box.</dd>
|
|
|
|
<dt>left</dt>
|
|
|
|
<dd>Force one or two page breaks before (after) the generated box so
|
|
that the next page is formatted as a left page.</dd>
|
|
|
|
<dt>right</dt>
|
|
|
|
<dd>Force one or two page breaks before (after) the generated box so
|
|
that the next page is formatted as a right page.</dd>
|
|
</dl>
|
|
|
|
<p>A potential page break location is typically under the influence of
|
|
the parent element's <a class="property"
|
|
href="#page-break-inside">'page-break-inside'</a> property, the <a
|
|
class="property" href="#page-break-after"> <span
|
|
class="property">'page-break-after'</span></a> property of the preceding
|
|
element, and the <a class="property" href="#page-break-before"> <span
|
|
class="property">'page-break-before'</span></a> property of the
|
|
following element. When these properties have values other than <span
|
|
class="css">'auto'</span>, the values <span class="css"> <span
|
|
class="property">'always'</span></span>, <span
|
|
class="css">'left'</span>, and <span class="css">'right'</span> take
|
|
precedence over <span class="css">'avoid'</span>. See the section on <a
|
|
href="#allowed-pg-brk"> allowed page breaks</a> for the exact rules on
|
|
how these properties <em class="RFC2119" title="MAY in RFC 2119
|
|
context"> MAY</em> force or suppress a page break.</p>
|
|
|
|
<h3 id="using-named-pages"><span class="secno">5.2. </span>Using named
|
|
pages: <a class="property" href="#page">'page'</a></h3>
|
|
|
|
<table class="propdef" id="namepage" summary="property definition">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="page">page</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td>auto | <identifier></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>auto</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>block-level elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>yes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>paged</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>The <a class="property" href="#page">'page'</a> property can be used
|
|
to specify a particular type of page where an element <em
|
|
class="RFC2119" title="SHOULD in RFC 2119 context"> SHOULD</em> be
|
|
displayed.</p>
|
|
|
|
<div class="example">
|
|
<p>This example will put all tables on a right-hand side landscape page
|
|
(named "rotated"):</p>
|
|
|
|
<pre>@page rotated { size: landscape }
|
|
table { page: rotated; page-break-before: right }</pre>
|
|
</div>
|
|
|
|
<p>The <a class="property" href="#page">'page'</a> property works as
|
|
follows: If a block box with inline content has a <a class="property"
|
|
href="#page">'page'</a> property that is different from the preceding
|
|
block box with inline content, then one or two page breaks are inserted
|
|
between them, and the boxes after the break are rendered on a page box
|
|
of the named type. See <a href="#forced-pg-brk">"Forced page
|
|
breaks" below</a>.</p>
|
|
|
|
<div class="example">
|
|
<p>In this example, the two tables are rendered on landscape pages
|
|
(indeed, on the same page, if they fit). The page type
|
|
"narrow" is used for the <p> after the second table, as
|
|
the page properties for the table element are no longer in effect:</p>
|
|
|
|
<pre>@page narrow { size: 9cm 18cm }
|
|
@page rotated { size: landscape }
|
|
div { page: narrow }
|
|
table { page: rotated }</pre>
|
|
with this document:
|
|
<pre><div>
|
|
<table>...</table>
|
|
<table>...</table>
|
|
<p>This text is rendered on a <span class="property">'narrow'</span> page</p>
|
|
</div></pre>
|
|
</div>
|
|
|
|
<h3 id="breaks-inside"><span class="secno">5.3. </span>Breaks inside
|
|
elements: <a class="property" href="#orphans">'orphans'</a>, <a
|
|
class="property" href="#widows">'widows'</a></h3>
|
|
|
|
<table class="propdef" id="nameorphans" summary="property definition">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="orphans">orphans</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td><integer></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>2</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>block-level elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>yes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>visual</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table class="propdef" id="namewidows" summary="property definition">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="widows">widows</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td><integer></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>2</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>block-level elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>yes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>visual</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>The <a class="property" href="#orphans">'orphans'</a> property
|
|
specifies the minimum number of lines of a paragraph that <em
|
|
class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be left at
|
|
the bottom of a page. The <a class="property"
|
|
href="#widows">'widows'</a> property specifies the minimum number of
|
|
lines of a paragraph that <em class="RFC2119" title="MUST in RFC 2119
|
|
context"> MUST</em> be left at the top of a page. Examples of how they
|
|
are used to control page breaks are given below.</p>
|
|
|
|
<p>If a paragraph contains fewer lines than the value of <a
|
|
class="property" href="#widows">'widows'</a> or <a class="property"
|
|
href="#orphans">'orphans'</a>, the rule is relaxed.</p>
|
|
|
|
<h3 id="allowed-pg-brk"><span class="secno">5.4. </span>Allowed page
|
|
breaks</h3>
|
|
|
|
<p>In the normal flow, page breaks <em class="RFC2119" title="MAY in RFC
|
|
2119 context"> may</em> occur at the following places:</p>
|
|
|
|
<ol>
|
|
<li>In the vertical margin between block boxes (or rows in a table).
|
|
When a page break occurs here, the computed values of the relevant
|
|
<span class="property"> <span
|
|
class="property">'margin-top'</span></span> and <span
|
|
class="property">'margin-bottom'</span> properties are set to <span
|
|
class="css"> <code class="css">'0'</code></span>.</li>
|
|
|
|
<li>Between line boxes inside a block box.</li>
|
|
</ol>
|
|
|
|
<p>These breaks are subject to the following rules:</p>
|
|
|
|
<ul>
|
|
<li><strong>Rule A:</strong> Breaking at (1) is allowed only if the <a
|
|
class="property" href="#page-break-after">'page-break-after'</a> and <a
|
|
class="property" href="#page-break-before"> <span
|
|
class="property">'page-break-before'</span></a> properties of all the
|
|
elements generating boxes that meet at this margin allow it, which is
|
|
when at least one of them has the value <span class="css"> <span
|
|
class="property">'always'</span></span>, <span
|
|
class="css">'left'</span>, or <span class="css">'right'</span>, or when
|
|
all of them are <span class="css">'auto'</span>.</li>
|
|
|
|
<li><strong>Rule B:</strong> However, if all of them are <span
|
|
class="css"> <span class="property">'auto'</span></span> and the
|
|
nearest common ancestor of all the elements has a <a class="property"
|
|
href="#page-break-inside"> <span
|
|
class="property">'page-break-inside'</span></a> value of <span
|
|
class="css">'avoid'</span>, then breaking here is not allowed.</li>
|
|
|
|
<li><strong>Rule C:</strong> Breaking at (2) is allowed only if the
|
|
number of line boxes between the break and the start of the enclosing
|
|
block box is the value of <a class="property"
|
|
href="#orphans">'orphans'</a> or more, and the number of line boxes
|
|
between the break and the end of the box is the value of <a
|
|
class="property" href="#widows"> <span
|
|
class="property">'widows'</span></a> or more.</li>
|
|
|
|
<li><strong>Rule D:</strong> In addition, breaking at (2) is allowed
|
|
only if the <a class="property" href="#page-break-inside"> <span
|
|
class="property">'page-break-inside'</span></a> property is <span
|
|
class="css">'auto'</span>.</li>
|
|
</ul>
|
|
|
|
<p>If the above doesn't provide enough break points to keep content from
|
|
overflowing the page boxes, then rules B and D are dropped in order to
|
|
find additional breakpoints.</p>
|
|
|
|
<p>If that still does not lead to sufficient break points, rules A and C
|
|
are dropped as well, to find still more break points.</p>
|
|
|
|
<h3 id="forced-pg-brk"><span class="secno">5.5. </span>Forced page breaks</h3>
|
|
|
|
<p>A page break <em class="RFC2119" title="MUST in RFC 2119
|
|
context">MUST</em> occur at (1) if, among the <a class="property"
|
|
href="#page-break-after">'page-break-after'</a> and <a class="property"
|
|
href="#page-break-before">'page-break-before'</a> properties of all the
|
|
elements generating boxes that meet at this margin, there is at least
|
|
one with the value <span class="css">'always'</span>, <span
|
|
class="css">'left'</span>, or <span class="css"> <span
|
|
class="property">'right'</span></span>.</p>
|
|
|
|
<p>When multiple <a class="property"
|
|
href="#page-break-before">'page-break-before'</a> and/or <code
|
|
class="css">'page-break-after; properties with values of "always",
|
|
"left" or "right" apply at a margin, only one of them should generate
|
|
page breaks. That is, no content-empty pages are generated by page-break
|
|
properties, except for at most one content-empty page as may be required
|
|
by :right and :left values to position ensuing content on a right- or
|
|
left-facing page.</code></p>
|
|
|
|
<p>A page break <em class="RFC2119" title="MUST in RFC 2119
|
|
context">MUST</em> also occur at (1) if the last line box above this
|
|
margin and the first one below it do not have the same value for <a
|
|
class="property" href="#page">'page'</a>.</p>
|
|
|
|
<h3 id="best-pg-brk"><span class="secno">5.6. </span>"Best"
|
|
page breaks</h3>
|
|
|
|
<p>CSS3 does <em>not</em> define which of a set of allowed page breaks
|
|
<em class="RFC2119" title="MUST in RFC 2119 context"> MUST</em> be used;
|
|
except as defined earlier in the section, CSS3 does not forbid a user
|
|
agent to break at every possible break point, or to not break at all.
|
|
But CSS3 does recommend that user agents observe the following
|
|
heuristics (while recognizing that they are sometimes contradictory):</p>
|
|
|
|
<ul>
|
|
<li>Break as few times as possible.</li>
|
|
|
|
<li>Make all pages that don't end with a forced break appear to have
|
|
about the same height.</li>
|
|
|
|
<li>Avoid breaking inside a block that has a border.</li>
|
|
|
|
<li>Avoid breaking inside a table.</li>
|
|
|
|
<li>Avoid breaking inside a floated element.</li>
|
|
</ul>
|
|
|
|
<div class="example">
|
|
<p>Suppose, for example, that the style sheet contains <span
|
|
class="css"> <code class="css">'orphans : 4'</code></span>, <span
|
|
class="css">'widows : 2'</span>, and there are 20 lines (line boxes)
|
|
available at the bottom of the current page:</p>
|
|
|
|
<ul>
|
|
<li>If a paragraph at the end of the current page contains 20 lines or
|
|
fewer, it <em class="RFC2119" title="SHOULD in RFC 2119 context">
|
|
SHOULD</em> be placed on the current page.</li>
|
|
|
|
<li>If the paragraph contains 21 or 22 lines, the second part of the
|
|
paragraph <em class="RFC2119" title="MUST in RFC 2119 context">
|
|
MUST</em> not violate the <a class="property"
|
|
href="#widows">'widows'</a> constraint, and so the second part <em
|
|
class="RFC2119" title="MUST in RFC 2119 context">MUST</em> contain
|
|
exactly two lines.</li>
|
|
|
|
<li>If the paragraph contains 23 lines or more, the first part <em
|
|
class="RFC2119" title="SHOULD in RFC 2119 context"> SHOULD</em>
|
|
contain 20 lines and the second part the remaining lines.</li>
|
|
</ul>
|
|
|
|
<p>Now suppose that <a class="property" href="#orphans">'orphans'</a> is
|
|
<span class="css"> <code class="css">'10'</code></span>, <a
|
|
class="property" href="#widows">'widows'</a> is <span
|
|
class="css">'20'</span>, and there are 8 lines available at the bottom
|
|
of the current page:</p>
|
|
|
|
<ul>
|
|
<li>If a paragraph at the end of the current page contains 8 lines or
|
|
fewer, it <em class="RFC2119" title="SHOULD in RFC 2119 context">
|
|
SHOULD</em> be placed on the current page.</li>
|
|
|
|
<li>If the paragraph contains 9 lines or more, it cannot be split (that
|
|
would violate the orphan constraint), so it <em class="RFC2119"
|
|
title="SHOULD in RFC 2119 context"> SHOULD</em> move as a block to the
|
|
next page.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2 id="pg-based-extensions"><span class="secno">6. </span>Page-based
|
|
Extensions to Counters</h2>
|
|
|
|
<h3 id="page-based-counters"><span class="secno">6.1. </span>Page-based
|
|
counters</h3>
|
|
|
|
<p>Counters apply to page contexts defined by means of the <a class="css"
|
|
href="#page"> <code class="css">'@page'</code></a> rule. This is useful
|
|
for maintaining a page count.</p>
|
|
|
|
<div class="example">
|
|
<p>The following rules result in the placement of the current page
|
|
number in the middle of the outside margin of each page.</p>
|
|
|
|
<pre>@page {
|
|
margin: 10%;
|
|
counter-increment: page;
|
|
|
|
@top-center {
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
font-size: 2em;
|
|
content: counter(page);
|
|
}
|
|
}</pre>
|
|
</div>
|
|
|
|
<h2 id="orienting"><span class="secno">7. </span>Orienting an Image on
|
|
the Page</h2>
|
|
|
|
<p>Images from camera phones, digital cameras or scanners may be encoded
|
|
sideways. For example, the first row of image data may represent
|
|
the leftmost or rightmost column of image pixels. Furthermore, often
|
|
such devices have limited resources, and do not have the capability to
|
|
rotate the image into an upright orientation. However, this type
|
|
of device may have internal knowledge or can accept input from its user
|
|
on the rotational correction to perform. </p>
|
|
|
|
<p>The image-orientation property provides a way to specify a rotation to
|
|
be applied to an image. This facility is not intended to specify
|
|
other image transformations such as flipping the image in the horizontal
|
|
or vertical direction. Also, this facility is not needed to
|
|
correctly orient an image when printing in landscape versus portrait
|
|
orientation.</p>
|
|
|
|
<table class="propdef" id="nameimage-orientation"
|
|
summary="image-orientation property definition">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="image-orientation">image-orientation</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td>auto | <angle></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>auto</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>images</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>paged</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value modulo full circle value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p> <a class="property" href="#image-orientation">'image-orientation'</a>
|
|
specifies a rotation in the right or clockwise direction that a user
|
|
agent applies to an image. In terms of the order of
|
|
transformations, the image is first rotated, then sized, then
|
|
positioned. Thus height and width properties apply to the rotated
|
|
rather than the original image dimensions.</p>
|
|
|
|
<p>Two values for the <a class="property"
|
|
href="#image-orientation">'image-orientation'</a> property apply to an
|
|
image:</p>
|
|
|
|
<dl>
|
|
<dt>auto</dt>
|
|
|
|
<dd>The image will be set to the orientation of the page. That is,
|
|
for a pixelated image consisting of rows and columns of pixels, a row
|
|
is displayed across the width of the display surface and a column along
|
|
the height.</dd>
|
|
|
|
<dt><angle></dt>
|
|
|
|
<dd> A positive value rotates the image to the right (in a clockwise
|
|
direction) by the given number of degrees. Negative values rotate to
|
|
the left or in a counter-clockwise direction. Specified values outside
|
|
the range of ]-360, 360[ degrees are moduloed by 360 to produce a
|
|
computed value within that range. User agents <em class="RFC2119"
|
|
title="Must in RFC 2119 context">MUST</em> support values which compute
|
|
to 0, 90, 180, and 270 degrees. Support for other values is optional.</dd>
|
|
</dl>
|
|
|
|
<pre
|
|
class="example">The following examples rotate the image in four major orientations:
|
|
img.original { image-orientation: auto }
|
|
img.zero { image-orientation: 0 }
|
|
img.ninety { image-orientation: 90deg }
|
|
img.tilt { image-orientation: -1deg }
|
|
...
|
|
<img class="ninety" src=... />
|
|
</pre>
|
|
|
|
<h2 id="the-fit"><span class="secno">8. </span>The <a class="property"
|
|
href="#fit">'fit'</a> and <a class="property"
|
|
href="#fit-position">'fit-position'</a> Properties</h2>
|
|
|
|
<table class="propdef" id="namefit">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="fit">fit</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td>fill | hidden | meet | slice</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>fill</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>replaced elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>yes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>visual</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p> </p>
|
|
|
|
<table class="propdef" id="namefit-position">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="fit-position">fit-position</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td>[ [<var><percentage></var> | <var><length></var>
|
|
]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] |
|
|
auto</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>0% 0%</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>replaced elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>yes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>refer to width and height of box itself</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>visual</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>specified value</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>The <a class="property" href="#fit">'fit'</a> property gives a hint
|
|
for how to scale a replaced element if neither its <span
|
|
class="property">'width'</span> nor its <span
|
|
class="property">'height'</span> property is <code
|
|
class="css">'auto'</code>. Not all replaced objects can be scaled, but
|
|
images typically can.</p>
|
|
|
|
<dl>
|
|
<dt>fill</dt>
|
|
|
|
<dd>Scale the object's height and width independently so that the
|
|
content just touches all edges of the containing box.</dd>
|
|
|
|
<dt>hidden</dt>
|
|
|
|
<dd>Do not scale the object.</dd>
|
|
|
|
<dt>meet</dt>
|
|
|
|
<dd>Make the object as large as possible with its width <= <span
|
|
class="property">'width'</span> and height <= <span
|
|
class="property">'height'</span>, while preserving its aspect ratio.
|
|
Position the object as for the <code class="css">'hidden'</code> value.</dd>
|
|
|
|
<dt>slice</dt>
|
|
|
|
<dd>Make the object as small as possible with its width >= <span
|
|
class="property">'width'</span> and height >= <span
|
|
class="property">'height'</span>, while preserving its aspect ratio.
|
|
Position the object as for the <code class="css">'hidden'</code> value.</dd>
|
|
</dl>
|
|
|
|
<p class="issue">'Hidden' is not really an intuitive name, <span
|
|
class="property">'none'</span> might be better. But SMIL already uses
|
|
<span class="property">'hidden'</span>...</p>
|
|
|
|
<p>See the <span class="property">'overflow'</span> property for how to
|
|
render parts of the object that extend beyond the edges of the box.</p>
|
|
|
|
<p class="note">The keywords are intended to convey the visual effect in
|
|
the case that <span class="property">'overflow'</span> is <code
|
|
class="css">'hidden'</code>, which is expected to be the most common
|
|
case.</p>
|
|
|
|
<div class="figure">
|
|
<p><img alt="Illustration of the four values" src="fit.png" /></p>
|
|
|
|
<p class="caption">An example showing how each of the four values of <a
|
|
class="property" href="#fit">'fit'</a> causes the object (gray
|
|
rectangle) to be scaled to fit the given box (red dotted outline).</p>
|
|
</div>
|
|
|
|
<p>The <a class="property" href="#fit-position">'fit-position'</a>
|
|
determines the alignment of the object inside the box. The values have
|
|
the same meaning as the values on <span
|
|
class="property">'background-position'</span>, with the addition of the
|
|
value <code class="css">'auto'</code>, specifically:</p>
|
|
|
|
<dl>
|
|
<dt><percentage> <percentage></dt>
|
|
|
|
<dd>With a value pair of <code class="css">'0% 0%'</code>, the upper
|
|
left corner of the image is aligned with the upper left corner of the
|
|
box's padding edge. A value pair of <code class="css">'100%
|
|
100%'</code> places the lower right corner of the image in the lower
|
|
right corner of padding area. With a value pair of <code
|
|
class="css">'14% 84%'</code>, the point 14% across and 84% down the
|
|
image is to be placed at the point 14% across and 84% down the padding
|
|
area.</dd>
|
|
|
|
<dt><length> <length></dt>
|
|
|
|
<dd>With a value pair of <code class="css">'2cm 2cm'</code>, the upper
|
|
left corner of the image is placed 2cm to the right and 2cm below the
|
|
upper left corner of the padding area.</dd>
|
|
|
|
<dt>'top left', <code class="css">'left top'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'0% 0%'</code>.</dd>
|
|
|
|
<dt>'top', <code class="css">'top center'</code>, <code
|
|
class="css">'center top'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'50% 0%'</code>.</dd>
|
|
|
|
<dt>'right top', <code class="css">'top right'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'100% 0%'</code>.</dd>
|
|
|
|
<dt>'left', <code class="css">'left center'</code>, <code
|
|
class="css">'center left'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'0% 50%'</code>.</dd>
|
|
|
|
<dt>'center', <code class="css">'center center'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'50% 50%'</code>.</dd>
|
|
|
|
<dt>'right', <code class="css">'right center'</code>, <code
|
|
class="css">'center right'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'100% 50%'</code>.</dd>
|
|
|
|
<dt>'bottom left', <code class="css">'left bottom'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'0% 100%'</code>.</dd>
|
|
|
|
<dt>'bottom', <code class="css">'bottom center'</code>, <code
|
|
class="css">'center bottom'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'50% 100%'</code>.</dd>
|
|
|
|
<dt>'bottom right', <code class="css">'right bottom'</code></dt>
|
|
|
|
<dd>Same as <code class="css">'100% 100%'</code>.</dd>
|
|
|
|
<dt><dfn id="auto" title="auto!!value of
|
|
'fit-position'">auto</dfn></dt>
|
|
|
|
<dd>Put the object's top left corner in the top left corner of the
|
|
box. Properties in other modules may modify this behavior. (At
|
|
the time of writing, a property <span
|
|
class="property">'writing-mode'</span> is under consideration.)</dd>
|
|
</dl>
|
|
|
|
<p>The computed value is the same as the specified value, i.e., the
|
|
keywords are not replaced by percentages and the percentages are not
|
|
replaced by something else. (This is an exception to the general rule
|
|
that percentages are computed to some other value before being
|
|
inherited.)</p>
|
|
|
|
<p class="note">Note: areas of the box not covered by the replaced
|
|
element will show the element's <span
|
|
class="property">'background'</span>.</p>
|
|
|
|
<p class="note">Note: the <a class="property" href="#fit">'fit'</a>
|
|
property has the same meaning as the <a class="html" href="#fit">
|
|
fit</a> attribute in <a href="#SMIL10"
|
|
rel="biblioentry">[SMIL10]<!--{{SMIL10}}--></a>, except that the value
|
|
<span class="property">'scroll'</span> is not available, because the
|
|
<span class="property">'overflow'</span> property can be used instead.</p>
|
|
|
|
<h2 class="no-num" id="references">References</h2>
|
|
|
|
<h3 class="no-num" id="normative-references">Normative References</h3>
|
|
<!--begin-normative--> <!-- Sorted by label -->
|
|
<dl class="bibliography">
|
|
<dt style="display:
|
|
none"><!-- keeps the doc valid if the DL is empty --> <!----></dt>
|
|
|
|
<dt id="CSS21">[CSS21]</dt>
|
|
|
|
<dd>Bert Bos; et al. <cite>Cascading Style Sheets, level 2 revision
|
|
1.</cite> 11 April 2006. W3C Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2006/WD-CSS21-20060411">http://www.w3.org/TR/2006/WD-CSS21-20060411</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id="PWGMSN">[PWGMSN]</dt>
|
|
|
|
<dd>Ron Bergman; Tom Hastings. <cite>Media Standardized Names.</cite> 26
|
|
February 2002. IEEE ISTO Printer Working Group 5101.1-2002. URL: <a
|
|
href="ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf">ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-20020226-5101.1.pdf</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id="RFC2119">[RFC2119]</dt>
|
|
|
|
<dd>S. Bradner. <cite>Key words for use in RFCs to Indicate Requirement
|
|
Levels.</cite> Internet RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
<h3 class="no-num" id="informative-references">Informative References</h3>
|
|
<!--begin-informative--> <!-- Sorted by label -->
|
|
<dl class="bibliography">
|
|
<dt style="display:
|
|
none"><!-- keeps the doc valid if the DL is empty --> <!----></dt>
|
|
|
|
<dt id="CSS3BG">[CSS3BG]</dt>
|
|
|
|
<dd>Tim Boland; Bert Bos. <cite>CSS3 Backgrounds and Borders
|
|
Module.</cite> 16 February 2005. W3C Working Draft. (Work in progress.)
|
|
URL: <a
|
|
href="http://www.w3.org/TR/2005/WD-css3-background-20050216">http://www.w3.org/TR/2005/WD-css3-background-20050216</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id="MEDIAQ">[MEDIAQ]</dt>
|
|
|
|
<dd>Håkon Wium Lie; Tantek Çelik; Daniel Glazman. <cite>Media
|
|
Queries.</cite> 8 July 2002. W3C Candidate Recommendation. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708">http://www.w3.org/TR/2002/CR-css3-mediaqueries-20020708</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id="SMIL10">[SMIL10]</dt>
|
|
|
|
<dd>Philipp Hoschka (ed). <cite>Synchronized Multimedia Integration
|
|
Language (SMIL) 1.0 Specification.</cite> 15 June 1998. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1998/REC-smil-19980615">http://www.w3.org/TR/1998/REC-smil-19980615</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative--></div>
|
|
</div>
|
|
</body>
|
|
</html>
|