Status of this Document
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
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.
The (archived)
public mailing list www-style@w3.org (see instructions) 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] …summary of comment…”
This document was produced by the CSS Working Group (part of
This document was produced by a group operating under the 5 February
2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in
connection with the deliv that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains Essential
Claim(s) must disclose the information in accordance with section
6 of the W3C Patent Policy.
Table of Contents
1. Introduction
Paged media (e.g., paper, transparencies, photo album pages, pages
displayed on computer screens as printed output simulations) differ from
continuous
media 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:
the page properties such as size, orientation, margins, border, and
headers and footers are established wit
content such as page counters are placed in the
orphans and widows can be controlled.
This module defines a
specifies how a document is formatted within a rectangular area, called
the , that has finite width and
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 . In
the general case, CSS3 assumes that one page box will be transferred to
one surface of similar size.
All properties defined in this specification also accept the inherit
keyword as their value, but for readability it has not been listed
explicitly.
2. Conformance
All of the text in this specification is normative except sections
explicitly marked as non-normative, examples, and notes. The keywords
"MUST", "SHALL", "MUST NOT", "SHALL NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED",
"MAY", and "OPTIONAL" when
used in this document are to be interpreted as described in RFC
2119 . However, for
readability, these words do not appear in all uppercase letters in this
specification.
Examples in this specification are introduced with the words "for
example" or are set apart from the normative text with
class="example", like this:
This is an example of an informative example.
Informative notes begin with the word "Note" and are set apart from the
normative text with class="note", like this:
Note, this is an informative note.
3. Page Terminology
The following terminology and accompanying diagrams help to describe
the page model:
Page sheet
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.
Printable and non-printable areas
The non-printable area is the area of a page sheet that a physical
device such as a printer is not capable of marking reliably, usually due
to the printer's paper handling mechanism. This value is printer
dependent and is usually a small region along each edge of the page
sheet. The printable area is the area of page sheet that a printer
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. A user agent may not know the dimensions of this area for a
partic but when its dimensions are known, user
agents MAY adjust the formatting of the document
so that content falls within the printable area. How this adjustment is
accomplished is device dependent within the constraints expressed in the
Page Orientation
The page orientation is defined by comparing the length of the edges
of a . The page box is a rectangle with
two perpendicular edges called the long edge and the short edge. The
length of the long edge is always greater than or equal to the length of
the short edge. When the page box is square, the two edges are of the
same length and either can be used as the long edge with the other being
the short edge. This specification defines page orientations of ‘portrait’ and ‘landscape’.
Portrait Orientation
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.
Landscape Orientation
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. Note that CSS3 makes no distinction
between landscape and reverse-landscape orientations. However, future
versions of CSS may do so. UAs should consider, when formatting for
duplexed printing, the binding edge, page progression, and ease of
reading when choosing between landscape and reverse-landscape
renderings.
Duplex Printing
Duplex printing prints one page box per side of a page sheet and uses
both sides of the page sheet. This module provides no ability to specify
whether a document is duplex printed, but the concept of left and right
pages is based on the assumption that the document is duplex printed,
regardless of whether or not it actually is.
Binding Edge
The binding edge is the edge of the page box that is toward the
binding if the material is bound. The binding edge often has a larger
margin than the opposite edge to provide for the space used by the
binding. The binding edge can be any of the four edges. However, page
sheets are customarily bound so that the binding edge of page boxes with
portrait orientation is vertical. This module provides no method to
specify the binding edge. In duplex printing, the binding edge is on
opposite sides of the page box for the left and right pages.
Facing Pages
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.
A page that would be on the left if it is part of a pair of facing
pages as typically laid out. Page layouts for documents using a
left-to-right page progression have the earlier of the facing pages on
the left. Rules specific to the left page can be specified using the
‘’ page selector.
Right Page
A page that would be on the right if it is part of a pair of facing
pages as typically laid out. Page layouts for documents using a
right-to-left page progression have the earlier of the facing pages on
the right. Rules specific to the right page can be specified using the
‘’ page selector.
4. The Page Model
In the paged media formatting model, the document is transferred into
one or more page boxes. The page box is a
specialized CSS box that maps to a rectangular print media surface, such
as a page of paper. It is roughly analogous to the viewport.
As with other CSS boxes, a page box consists
of margin, border, padding, and content areas. The content and margin
areas of a page box have special functions:
The content area of a page box is called the page
area. The content of the document is flowed into one or more page
boxes. The page area acts as a container for all the boxes generated by
the root element and its descendants that are laid out within a given
page box. The edges of the page area on the first page establish the
rectangle that is the initial containing
block of the document.
The margin area of a page box is divided into 16 page-margin boxes. Each page-margin box has
its own margin, border, padding and content areas. Page-margin boxes are
typically used to display running headers and footers.
The properties of a
determined by properties declared
within the , which is the
of the @page rule. Similarly the properties of a
page-margin box are determined by properties declared within its
. Declarations in the
page context can affect the page box and/or inherit to the page-margin
boxes, but they do not apply to or inherit into the document's root
element or other content.
The containing block of the
page box is specified using the ‘’ property in the page context. The width and horizontal
margins of the page box are then calculated exactly as for a non-replaced
block element in normal flow.
The height and vertical
margins of the page box are calculated analogously (instead of using the
block height formulas). In both cases if the values are over-constrained,
instead of ignoring any margins, the containing block is resized to
coincide with the margin edges of the page box.
:root { font-size: 1 } @page { width: 50 }
Because the page context inherits from the root,
and the vw unit depends on the size of the page,
this creates a cycle. How do we break it?
The first rule is a common use case for e.g. slides.
The second rule is common in Japanese, where the page is sized to fit the paragraph text.
Page Backgrounds and
Painting Order
When drawing a page of content, the page layers are painted in the
following painting order (bottommost first):
page background
document canvas
page borders
document contents
page-margin boxes
In the page model, the page background behaves similar to the root
background: its background
painting area is the entire page box, including its margins
(regardless of ‘background-clip’). Page
backgrounds are anchored within the page box's padding area by default
(and honor ‘background-origin’ if the UA
supports ). However if ‘background-attachment’ is ‘fixed’ then the image is positioned relative to the
page box including its margins (i.e. the background
positioning area, like the background painting area, is
the page's margin box).
The document canvas background is drawn as the page box's background:
by default its background painting area covers the page box's
border box, and for UAs that support , follows the ‘background-clip’ value specified on the root
element. It remains, however, positioned with respect to the root element
or page area as usual.
With respect to the page-margin boxes, the document canvas, page
borders, and all of the document contents are treated as a single element
with a z-index value of ‘0’ that
establishes a stacking context
page-margin boxes never interleave with parts of the document content or
between the content and the canvas. They may only paint in front of the
document content or behind the document canvas. The page background is
always painted underneath everything else.
The ‘z-index’ property applies to
page-margin boxes. Since the ‘position’
property does not apply to page-margin boxes, ‘z-index’ always affects page-margin boxes as if
they were positioned elements regardless of the ‘position’ property's value. Each page-margin
boxes always establishes a stacking context.
The default painting order, or CSS2.1 Appendix E "tree
order", of page-margin boxes with respect to each other is as follows:
‘@top-left-corner’
‘@top-left’
‘@top-center’
‘@top-right’
‘@top-right-corner’
‘@right-top’
‘@right-middle’
‘@right-bottom’
‘@bottom-right-corner’
‘@bottom-right’
‘@bottom-center’
‘@bottom-left’
‘@bottom-left-corner’
‘@left-bottom’
‘@left-middle’
‘@left-top’
Start with ‘@top-left-corner’,
then go clockwise. This order is arbitrary but can be overridden with
‘z-index’. It only has a visible effect
when page-margin boxes overlap, which should not happen in most cases.
When formatting content in the page model, some content may end up
outside the page box. For example, an element whose ‘white-space’ property has the value ‘pre’ can generate a box that is wider than the
page box. As another example, when boxes are positioned absolutely or
relatively, they may end up in "inconvenient" locations. For example,
images may be placed on the edge of the page box or 100,000 meters below
the page box.
A specification for the exact formatting of such elements lies outside
the scope of this document. However, it is recommended that authors and
user agents observe the following general principles concerning content
outside the page box:
Content should be allowed slightly beyond the page box to allow pages
to "bleed".
User agents SHOULD avoid generating a large
number of content-empty pages to honor the positioning of elements
(e.g., printing 100 blank pages is probably neither the author's nor
the user's intent). A Content-empty page is
a page box whose page area contains no printable content other than
backgrounds and/or borders. A page box whose page area contains
generated content, or content whose visibility is ‘hidden’, or invisible content such as a
zero-width space is not a content-empty page. On the other hand, a page
containing only a background and/or borders and/or page-margin box
content is a content-empty page.
Note, however, that generating a small number of empty
page boxes is sometimes necessary to honor the forced-break values for
‘page-break-before’/‘break-before’ and ‘page-break-after’/‘break-after’.
Authors SHOULD NOT position elements in
inconvenient locations just to avoid rendering them. Instead:
To suppress box generation entirely, set the ‘display’
property to ‘none’.
To make a box invisible, set the ‘visibility’ property.
This specification does not define how boxes positioned outside the
page box are handled. Possibilities include discarding them or creating
page boxes for them at the end of the document.
4.3. Page Progression
CSS distinguishes between left pages and right pages on all documents,
whether they are printed duplex or not. Each left page is followed by a
right page and vice versa. Left and right pages can be styled differently
with the .
Whether the first page of a document is a left page or a right page
depends on the page progression of the document. The page progression is the direction in which the
printed pages of a document would be sequenced when laid out
side-to-side. For example, English and horizontally-set Japanese
typically progress from left to right, whereas Arabic and vertically-set
Japanese pages typically progress from right to left. In documents with a
left-to-right page progression the first page of the document is a right
page, and vice versa.
The page progression direction is determined as follows:
If text is laid out in horizontal lines, the page progression is the
same as the inline progression.
If text is laid out in vertical lines, the page progression is the
same as the block progression.
If the UA supports the ‘direction’ and
‘writing-mode’ properties from the CSS 3
Writing Modes Module , it
must determine
whether the first page is a left or right page from the values of those
properties on the root element.
To explicitly force a document to begin printing on a left or right
page, authors can specify a ‘break-before’ value that that propagates a
page break to the root.
The UA must
suppress the first (empty) page(s) in this case (and the :first pseudo-class matches the first
printed page).
html { break-before: always }
For an HTML document with a left-to-right page progression, the above
style rule will cause the first page of the document to print on a ‘:left’ page
html { break-before: left }
For an HTML document, the above style rule will cause the first page
of the document to print on a ‘’ page, regardless of the page progression.
Selectors and the Page Context
The @page Rule
Authors can specify various aspects of a page box, such as its
dimensions, orientation, and margins, within an ‘@page’ rule. ‘@page’ rules
are allowed wherever rule-sets
are allowed. An ‘@page’ rule consists of the
keyword ‘@page’, an OPTIONAL comma-separated list of page selectors and a block of declarations
(said to be in the page context). An ‘@page’ rule can also contain other at-rules,
interleaved between declarations. The current level of this specification
only allows
‘@page’.
‘@page’ rules without a selector list apply
to every page. Other ‘@page’ rules apply to
pages that
at least one of their
selectors. Properties declared within the page context apply to the page
If an error is encountered during the processing of a declaration block
within a page or a margin context, the Rules for
handling parsing errors that is, valid declarations within the
block are applied.
This rule is missing a CSSOM API. See .
5.2. Page selectors
A page selector is made of either a page type selector or a page pseudo-class, followed by zero
or more additional . No whitespace is allowed between components of a
selector. The
and examples can be found below.
is said to match a given page if and only if all of its components
match the page.
A page type selector is a
case-sensitive CSS
identifier . It matches pages of the named page type generated by the ‘page’ property.
A page type name of ‘auto’ (ASCII
case-insensitive) does not make the rule invalid, but MUST never match.
A page pseudo-class is ASCII
case-insensitive and has the same syntax as pseudo-classes
in regular Selectors.
The various page pseudo-classes are defined
Spread pseudo-classes: ‘’, ‘’
When printing double-sided documents, left and right pages are often
formatted differently. This can be expressed by using the ‘:left’ and ‘:right’ page pseudo-classes.
All pages are automatically classified by user agents as either left
pages or right pages, based on . The ‘:left’ and ‘:right’ pseudo-classes only match
or , respectively.
The following example creates left and right binding
edges using these pseudo-classes:
@page :left {
margin-left: 3
margin-right: 4
@page :right {
margin-left: 4
margin-right: 3
If different declarations have been given for left and right pages, the
user agent MUST honor these declarations even if
the user agent does not transfer the page boxes to left and right sheets
(i.e., a printer that only prints on one side of the medium must
nevertheless produce correctly formatted output).
Note. Adding declarations to the ‘:left’ or ‘:right’ 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).
First-page
pseudo-class: ‘’
The ‘:first’
pseudo-class
printed page of a document.
@page { margin: 2cm } /* All margins set to 2cm */
@page :first {
margin-top: 10cm /* Top margin on first page 10cm */
Blank-page
pseudo-class: ‘’
The ‘:blank’
pseudo-class
content-empty
pages that appear as a result of forced page
Only the ‘’, ‘right’, ‘recto’ and ‘verso’ values
of the ‘break-before’ and ‘break-after’ properties can generate pages that
match ‘’.
In this example, forced page break may occur before h1
h1 { break-before: left }
@page :blank {
@top-center { content: "This page is intentionally left blank" }
A page matched by ‘’ can also be matched by other page
pseudo-classes.
If headers have been specified on all right pages, a blank right page
will be matched by both
and :right. Therefore, margin boxes set on
right pages will have to be removed unless they are wanted on blank
pages. Here is an example where the top center header is removed from
blank pages, while the page number remains:
h1 { break-before: left }
@page :blank {
@top-center { content: none }
@page :right {
@top-center { content: "Preliminary edition" }
@bottom-center { content: counter(page) }
Due to the higher
of :blank over :right, the top center header is removed
even if content: none comes before content:
"Preliminary edition".
Note. Future versions of CSS may include other
page pseudo-classes.
5.3. @page rule
The syntax for the @page rule is a specialization of the generic
at-rule defined by CSS 2.1. This grammar extends the at-rule syntax to
allow @page rules nested inside @media rules. User agents MUST adhere to the following grammar:
Section 4.1.1 and Appendix G for the expansion of missing productions:
All new lexical tokens are
specializations of the ATKEYWORD lexical token:
::= "@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
::= "@left-bottom"
RIGHTTOP_SYM
::= "@right-top"
RIGHTMIDDLE_SYM
::= "@right-middle"
RIGHTBOTTOM_SYM
::= "@right-bottom"
MEDIA_SYM S* medium [ COMMA S* medium ]* LBRACE S* [ page_rule | ruleset ]* '}' S*
page_rule :
PAGE_SYM S* page_selector_list '{' S* page_body '}' S*
page_selector_list :
[ page_selector S* [ ',' page_selector S* ]* ]?
page_selector :
pseudo_page+ | IDENT pseudo_page*
pseudo_page :
':' [ "left" | "right" | "first" | "blank" ]
page_body :
/* Can be empty */
declaration? [ ';' S* page_body ]? |
page_margin_box page_body
page_margin_box :
margin_sym S* '{' S* declaration? [ ';' S* declaration? ]* '}' S*
margin_sym :
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
The following are examples of page selectors (declaration block
intentionally left blank)
@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /*
identifier and pseudo page. */
@page:first { ... }
@page toc, index { ... }
@page :blank:first { ... }
The following are examples of page-margin boxes where the declaration
blocks are intentionally left blank.
@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 */ } }
5.4. Cascading
in the page context
Declarations in page and margin contexts cascade just like
declarations in rule sets.
The specificity of page a selector is
computed in a manner analogous to the computations defined in the Selectors module:
Count the number of page type names (= f)
Given the syntax of page seletors, f can only
ever be 0 or 1.
Count the number of ‘’ or ‘’ pseudo-classes (= g)
Count the number of ‘’ or ‘’ pseudo-classes (= h)
Note: Repeated occurrences of the same pseudo-classes are
allowed and do increase specificity.
Due to storage limitations, implementations may have limitations on
the size of f, g, or h. If so, values
higher than the limit must be clamped to that limit, and not overflow.
Specificities are compared by comparing the three components in order
(f, g, h): the specificity with a larger
f va if the two f values are
tied, then the two g values are compared, etc. If all the
values are tied, the two specificities are equal.
Some page specificity calculation examples follow:
@page { } /* specificity = (0,0,0) */
@page :left { } /* specificity = (0,0,1) */
@page :first { } /* specificity = (0,1,0) */
@page :blank:left { } /* specificity = (0,1,1) */
@page artsy { } /* specificity = (1,0,0) */
@page artsy:left { } /* specificity = (1,0,1) */
@page artsy:first { } /* specificity = (1,1,0) */
Consider the following usage example:
@page :left {
margin-left: 4
margin-left: 3
Due to the higher specificity of the pseudo-class selector, the left
margin on left pages will be 4cm and all other pages (the right-facing
pages) will have a left margin of 3cm.
In this example, the higher specificity of the green rules wins over
the red rule. Therefore the first page will have blue text in the
top-left page-margin box and green text in the top-right page-margin
box, while subsequent pages will have red text in the page-margin boxes.
@page :first {
@top-left {
content: "foo";
@top-right {
content: "bar";
@page { color:
@top-center {
content: "Page " counter(page);
Page contexts cascade, so the following stylesheet would style pages
with 25 millimeter margins and 14 point type in the page-margin boxes:
@page { margin: 25}
@page { font-size: 14}
6. Page-Margin Boxes
Page-margin boxes are boxes within the page margin that, like
pseudo-elements, can contain generated content.
Page-margin boxes can be used to create page headers and footers, which
are portions of the page set aside for supplementary information such as
the page number or document title.
Typically, a
is located at the
top of the page in documents with a predominately horizontal writing
direction and on the side opposite the
for documents with a predominately vertical writing direction.
One possible design of page headers for horizontally written documents
uses the ‘@top-left-corner’, ‘@top-left’, ‘@top-center’,
‘@top-right’ and ‘@top-right-corner’ page-margin boxes. Another design,
for vertically written documents, could use the ‘@right-top’, ‘@right-middle’, and ‘@right-bottom’ page-margin boxes for right facing pages and ‘@left-top’, ‘@left-middle’, and ‘@left-bottom’ for .
is typically at the opposite
end of the page from the page header. For example, the design of a
horizontally written document with a page header at the top of the page
could use the ‘@bottom-left-corner’, ‘@bottom-left’, ‘@bottom-center’, ‘@bottom-right’ and ‘@bottom-right-corner’ page-margin boxes as the page
footer. The design of a vertically written document could use the
page-margin boxes of the binding edge of the page for the page footer.
Page-margin boxes are positioned with respect to the page area and are
independent of page orientation, for example the top page-margin boxes
are above the page area in both portrait and landscape orientation. The
various page-margin boxes are defined and illustrated in the diagram
Table 1 Page-Margin Box Definitions
Description
top-left-corner
a fixed-size box defined by the intersection of the top and left
margins of the page box
a variable-width box filling the top page margin between the
top-left-corner and top-center page-margin boxes
top-center
a variable-width box centered horizontally between the page's left
and right border edges and filling the page top margin between the
top-left and top-right page-margin boxes
a variable-width box filling the top page margin between the
top-center and top-right-corner page-margin boxes
top-right-corner
a fixed-size box defined by the intersection of the top and right
margins of the page box
a variable-height box filling the left page margin between the
top-left-corner and left-middle page-margin boxes
left-middle
a variable-height box centered vertically between the page's top
and bottom border edges and filling the left page margin between the
left-top and left-bottom page-margin boxes
left-bottom
a variable-height box filling the left page margin between the
left-middle and bottom-left-corner page-margin boxes
a variable-height box filling the right page margin between the
top-right-corner and right-middle page-margin boxes
right-middle
a variable-height box centered vertically between the page's top
and bottom border edges and filling the right page margin between the
right-top and right-bottom page-margin boxes
right-bottom
a variable-height box filling the right page margin between the
right-middle and bottom-right-corner page-margin boxes
bottom-left-corner
a fixed-size box defined by the intersection of the bottom and left
margins of the page box
bottom-left
a variable-width box filling the bottom page margin between the
bottom-left-corner and bottom-center page-margin boxes
bottom-center
a variable-width box centered horizontally between the page's left
and right border edges and filling the bottom page margin between the
bottom-left and bottom-right page-margin boxes
bottom-right
a variable-width box filling the bottom page margin between the
bottom-center and bottom-right-corner page-margin boxes
bottom-right-corner
a fixed-size box defined by the intersection of the bottom and
right margins of the page box
6.1. At-rules for
page-margin boxes
Page-margin boxes are created by
inside the . Authors
should put these rules after any declarations in the page context as
legacy clients may not handle declarations after margin at-rules
correctly.
A margin at-rule consists of an ATKEYWORD that identifies the
page-margin box (e.g. ‘@top-left’) and a block of declarations (said
to be in the margin context).
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:
size: 8.5in 11
margin: 10%;
@top-left {
content: "Hamlet";
@top-right {
content: "Page " counter(page);
6.2. Populating
page-margin boxes
As with the ‘:before’ and ‘:after’ pseudo-elements, a specified ‘content: normal’ on a page-margin box computes to
‘none’. A page-margin box is generated if and only if the computed value of its
‘content’ property is not ‘none’. Otherwise, no box is generated, as for
elements with ‘display: none’.
The ‘display’ property does
not apply to page-margin boxes.
The following style sheet creates a green box in each corner of the
page except the bottom-left corner.
@top-left-corner { content: " "; border: }
@top-right-corner { content: url(foo.png); border: }
@bottom-right-corner { content: counter(page); border: }
@bottom-left-corner { content: border: }
6.3. Computing
Page-margin Box Dimensions
The width and height of each page-margin box is determined by the rules
below. These rules define the equivalent of CSS2.1 Sections 10.3 and 10.6
for page-margin boxes.
The rules for applying ‘min-height’,
‘max-height’, ‘min-width’, and ‘max-width’
do apply to page-margin
boxes and may imply a recalculation of the width, height, and/or margins
if the dimensions resulting from the specified ‘width’ or ‘height’ violate their constraints. If the UA does
not support the ‘min-height’ or ‘min-width’ properties then it must behave as if
‘min-height’ and ‘min-width’ were always zero.
6.3.1. Page-Margin Box Layout Terminology
In addition to the box model definitions in CSS2.1 , and the sizing terms in CSS
Intrinsic Sizing , the following
terms are defined for use in the subsequent page-margin box calculations:
available width
The sum of the page’s left border width, left padding, page area width, right padding, and right border
width. In other words, it is the distance between the page box’s left right border edges. This quantity
is used when calculating dimensions of the top and bottom page-margin
available height
The sum of the page’s top border width, top padding, page area height, bottom padding, and bottom border
width. In other words, it is the distance between the page box’s top bottom border edges. This quantity
is used when calculating dimensions of the left and right page-margin
outer width
The width of the outer edge, as
defined in .
outer min width
Like the , except that
is used when the width is ‘auto’.
outer max width
Like the , except that
is used when ‘width’ is ‘auto’.
The containing block for a corner
page-margin box is the rectangle defined by the intersection of the two
page margins meeting at that corner.
For all other page-margin boxes, the containing block is the rectangle formed by
the encapsulating page margin minus the containing blocks of the adjacent
corners' page-margin boxes. This means that the size of this containing
block is given in one dimension by the used page margin and in the other
dimension by the
(for top and bottom page-margin boxes) or available height (for left and right
page-margin boxes).
Page-Margin Box
Variable Dimension Computation Rules
The following rules apply to ‘top-left’, ‘top-center’ and ‘top-right’ page-margin boxes, which are referred
to as A, B, and C, respectively, in this section.
6.3.2.1. Margins
If the ‘margin-left’ or ‘margin-right’ property of any of the three boxes
computes to ‘auto’, the used value is zero.
6.3.2.2. Resolving
‘auto’ widths
The following algorithm determines the used width of each box. For this
purpose, boxes that are not
assumed to have a ‘width’ and an outer width of zero.
Note: The high-level goals are (in order of priority) to
center the middle box (B) if it is generated, to minimize overflow and
overlap, and to distribute space proportionally to the amount of content.
If the middle box (B) is not ,
distribute the
and C as follows:
If only one box has ‘width: auto’, its
used width is resolved so that the sum of the outer widths equals available width.
If A and C both have ‘width:
auto’, distribute the space to each box as follows:
If the sum of the outer max-content widths is less than the
, call that
difference the flex space. Calculate each box's flex
factor as proportional to its outer max-content width, and
set its used outer width to:
max-content width + flex space × flex
factor ÷ ∑flex factors
Otherwise if the sum of the outer min-content widths is less
than the , call
that difference the flex space calculate each box's flex
factor as proportional to its max-content minus
min-content, and set its used outer width to:
min-content width + flex space × flex
factor ÷ ∑flex factors
Otherwise, calculate its outer size as in the previous case, but
set each box's flex factor as proportional to its outer
min-content width.
In each case, both flex factors are assumed to be ‘1’ if their sum is equal to zero.
If the middle box (B) is ,
determine the ‘auto’ widths of A, B, and C as
First, resolve any ‘auto’ width of the
middle box (B): Assume there are two boxes, B and AC, where each of AC's
dimensions is double the maximum of A and C. (This preserves B's
centering.) Distribute the space to these two boxes (B and the imaginary
AC) as described for A and C .
Then, resolve any ‘auto’ widths of the
side boxes (A and C) by setting that box's outer width to
used outer size of B) ÷ 2
6.3.2.3. Handling ‘min-width’ and ‘max-width’
The ‘min-width’ and ‘max-width’ properties
apply to page-margin boxes in
the variable dimension like on normal elements, except that the three
boxes on the same side are considered together.
More precisely:
The tentative used widths are calculated (without ‘min-width’ and ‘max-width’) following the rules under Resolving ‘auto’
widths above.
If the tentative used width of any of the three boxes is greater
than ‘max-width’, the rules above are
applied again, but this time using the computed value of ‘max-width’ as the computed value for ‘width’.
If the resulting width of any of the three boxes is smaller than
‘min-width’, the rules above are applied
again, but this time using the value of ‘min-width’ as the computed value for ‘width’.
6.3.2.4. Positioning
Once the dimensions of the boxes are determined, they are positioned
as follows:
The left outer edge of A is flush with the left edge of the
containing block
The outer area of B is centered in the containing block.
The right outer edge of C is flush with the right edge of the
containing block.
6.3.2.5. Boxes on other
The used values for ‘bottom-left’,
‘bottom-center’ and ‘bottom-right’ page-margin boxes are established
by the same rules as for ‘top-left’,
‘top-center’, and ‘top-right’, respectively.
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".
The used values for ‘right-top’,
‘right-middle’ and ‘right-bottom’ page-margin boxes are established
by the same rules as for ‘left-top’,
‘left-middle’ and ‘left-bottom’, respectively.
6.3.3. Page-Margin Box Fixed
Dimension Computation Rules
The rules below are used to calculate the used values of each ‘top-left-corner’, ‘top-left’, ‘top-center’, ‘top-right’, and ‘top-right-corner’ page-margin box's ‘height’, ‘margin-top’, and ‘margin-bottom’ properties:
The following constraint must hold among the used values of the
margin box's properties:
‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ = top page margin
If ‘border-top-width’ + ‘padding-top’ + ‘height’ (if it is not ‘auto’) + ‘padding-bottom’ + ‘border-bottom-width’, plus ‘margin-top’ and/or ‘margin-bottom’ if not ‘auto’, is larger than the height of the top page
margin, then any ‘auto’ values for ‘margin-top’ or ‘margin-bottom’ are, for the following rules,
treated as zero.
If at this point all of ‘height’,
‘margin-top’, and ‘margin-bottom’ have a computed value other than
‘auto’, the values are said to be
"over-constrained". In this case, the specified value of ‘margin-top’ is treated as ‘auto’.
If there is now exactly one value specified as ‘auto’, its used value follows from the equality.
If ‘height’ is set to ‘auto’, any other ‘auto’ values become ‘0’ and ‘height’
follows from the resulting equality
If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, their used values are equal. This
vertically centers the page-margin box content within the top page
The same rules apply to the bottom page-margin boxes
(bottom-left-corner, bottom-left, bottom-center, bottom-right, and
bottom-right-corner), except that in the overconstrained case, the
‘margin-bottom’ is ignored rather than
the ‘margin-top’.
Analogous rules govern the properties for the left and right
page-margin boxes with respect to ‘width’
(top-left-corner, left-top, left-middle, left-bottom, and
bottom-left- top-right-corner, right-top, right-middle,
right-bottom, bottom-right-corner), with ‘top’ replaced by ‘’, ‘bottom’ replaced by ‘’, and ‘height’ replaced by ‘width’. In the overconstrained case for left
(right) page-margin boxes, the specified value of ‘margin-left’ (‘margin-right’) is ignored.
6.4. Page-margin box
The following is a collection of examples of page-margin box usage.
Here is an example of a page with only a top-left header:
@top-left { content: "Header in Left Cell (top-left)" }
Because there are no contents defined for the top-center or the
top-right page-margin boxes, the extent of the top-left page-margin box
is allowed to cross the center of the page box.
The following is an example of a page with a centered header:
@top-center { content: "Header in Center Cell (top-center)" }
The following is an example of a page with a single header in the
top-right page-margin box:
@top-right { content: "Header in Right Cell (top-right)" }
Because the content of the center cell is empty, the extent of the
top-right page-margin box is allowed to cross the center of the page
The following is an example of a page with a top-center and a top-left
@top-left { content: "Left Cell (top-left)" }
@top-center { content: "Header in Center Cell (top-center)" }
The following is an example of a page with a top-center and a
top-right header:
@top-center { content: "Header in Center Cell (top-center)" }
@top-right { content: "Right Cell (top-right)" }
The following is an example of a page with top-left and top-right
@top-left { content: "Header in top-left with approx. "
"twice as many words as right cell." }
@top-right { content: "Right cell (top-right)" }
Because there are no center cell contents, the extent of the top-left
is allowed to cross the center of the page box.
7. Page Properties
defines the normative list
of CSS 2.1
If a conforming user agent supports any of these properties on block
boxes, then it MUST also support that property in
the . This specification
additionally defines the ‘’ property that only applies in the page
Properties that apply to the page-margin boxes can also be set within
the page context: if inheritable or explicitly inherited (with the
‘inherit’ keyword in the margin context),
they will inherit to the page-margin boxes.
The same appendix defines the normative list of CSS 2.1 [CSS21] properties that apply to page-margin
boxes. If a conforming user agent supports any of these properties
on block boxes, then it MUST also support that
property in the .
Other properties defined by
do not apply in these
contexts. Behavior for properties not included in CSS 2.1 is undefined.
Note: The intent of leaving other properties undefined is
to allow the gradual addition of appropriate CSS3 properties as they
emerge, without having to update this specification with each addition.
, both the page context and the margin
context have a computed value for every property, even if that property
does not apply to the page or page-margin box.
The normal rules for CSS properties apply with the following
exceptions:
page-margin boxes inherit from the page context. The page context
inherits from the root element. However, since the previous revision of
CSS Paged Media Level 3 did not specify this point, an implementation
that sets inherited properties in the page context to their initial
values (as for the root element) is also conformant to CSS Paged Media
Level 3. Note that this exception will be removed in Level 4.
Values in units of ‘em’ and ‘ex’ are interpreted relative to the font associated
with their context. When used on the ‘font-size’ property in the margin context, they
are relative to the font of the page context. When used on the ‘font-size’ property in the page context, they
are relative to the ‘font-size’ of the
root element. However, since a previous revision of CSS Paged Media
Level 3 was ambiguous on this point, an implementation that treats
‘em’ and ‘ex’ on
‘font-size’ as relative to the initial
value is also conformant to CSS Paged Media Level 3. Note that this
exception will be removed in Level 4.
Percentage values on the margin and padding properties are relative
to the dimensions of the containing block. For right and left values,
percentages are relative to the width of
and bottom values, percentages are relative to the height of the
containing block.
The used values of ‘width’ and
‘height’ have special computation rules
for page boxes and page- see
The page background is positioned and painted .
The rules for counter scoping are modified as described below.
As on the ‘::before’ and ‘::after’ pseudo-elements, the ‘normal’ value of the ‘content’ property computes to ‘none’ on page-margin boxes.
On page-margin boxes, the ‘vertical-align’ property behaves as
specified for table cells. It always performs alignment in
the vertical dimension, regardless of writing mode.
It is recommended that user agents establish a
default page margin via the user agent stylesheet that includes any
non-printable area. It is further recommended
that authors assume that the default page area will not include
unprintable regions.
7.1. Page-based
Counters can be defined and controlled within an ‘@page’ rule, and used as
content in page-margin boxes. This is useful for maintaining a page
A ‘counter-increment’ within either a
page or margin context causes the counter to increment with the
generation of each page box.
If a counter is reset or incremented within the page context, it is in
scope for all page-margin boxes and obscures all counters of the same
name within the document.
If a counter is reset or incremented within a margin context, it is in
scope for that page-margin box and obscures any counters of the same
name in both the page context and the document.
If a counter that has not been reset or incremented within the margin
context or the page context is used by counter() or counters() in the
margin context, then the resultant value is exactly as if the
page-margin box were an element within the document at the start of the
page, inside the deepest element in the normal flow that spans the page
break. Use of the counter in this way does not affect the calculation of
the counter's value.
A counter named ‘’
is automatically created and incremented by 1 on every page of the
document, unless the ‘counter-increment’
property in the
explicitly specifies a different increment for the ‘page’ counter. The implied
‘’ counter is a real
counter, and can be directly affected using the ‘counter-increment’ and ‘counter-reset’ properties when named explicitly
in those properties. It can also be used in the ‘counter()’ and ‘counters()’ function forms.
The following rules result in the placement of the current page
number in the middle of the outside margin of each page.
margin: 10%;
@top-center {
font-family: sans-
font-weight:
font-size: 2
content: counter(page);
Adding the following rule will make all pages even-numbered.
counter-increment: page 2;
Additionally, a counter named ‘’ is automatically created by the UA. Its
value is always the total number of pages in the document. (In
continuous media this is always 1.) The value of ‘pages’ cannot be manipulated:
while ‘counter-reset’ and ‘counter-increment’ statements that set it are
valid, they have no effect.
In all other respects, page-associated counters behave as described in
, Nested Counters
and Scope and Counters.
7.2. Page-margin
boxes and default values
Properties used within page or margin contexts take their initial
values from their respective
however, user agents
must behave as though the values in the following table were established
by rules in the UA default style sheet.
Table 2. Default values for Page-Margin Boxes
Page-margin box
‘text-align’
‘vertical-align’
This example style sheet could be used to create a centered header
with the current chapter name:
body {counter-reset:}
div.chapter {counter-increment:}
margin: 10%;
@top-center { content: "Chapter" counter(chapter) }
8. Page Size
People around the world use many 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.
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
‘’ property,
which indicates that the document should preferentially be displayed on
a surfa another method is to use Media Queries [MEDIAQ] which allow
different style sheets to be applied to different page sizes.
8.1. Page size: the ‘size’ property
&length&{1,2} | auto | [ &page-size& || [ portrait |
landscape] ]
Applies to:
page context
Inherited:
Percentages:
Computed value:
specified value
This property specifies the target size and orientation of the page box’s containing block. In the general case,
where one page box is rendered onto one , the ‘’ property also indicates the size of
the destination page sheet.
The size of a page box can either be "absolute" (fixed size) or
"scalable" (i.e., fitting available sheet sizes). The first three values
in the table below can be used to create scalable page boxes. 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 the specified size is not available, the rules for transposing a page box to a different size
property declaration is
qualified by a ‘width’, ‘height’, ‘device-width’,
‘device-height’, ‘aspect-ratio’, ‘device-aspect-ratio’ or ‘orientation’ media query
(or other conditional on
the size of the paper), then the declaration must be ignored. Media
queries do not honor ‘’: they assume the paper size that would
be chosen if no @page rules were specified.
It would be useful if media queries could respond at least to sizes
specified on an unqualified @page.
Another option could be to do like ‘@viewport’ rules :
First apply ‘@page’ rules (matching which
selectors?), using the UA’s default page size for Media Queries and
viewport-percentage
lengths . The resulting page
size is the "base page size". The entire set of stylesheets is applied
again, this time using the "base page size" for Media Queries and
viewport-percentage lengths.
In the following example
size: 4in 6
@media (max-width: 6in) {
The second
declaration is
ignored, i.e. the specified value of the size property is 4in 6in.
Description
The page box will be set to a size and orientation chosen by the
UA. In the usual case, the page box size and orientation is chosen to
match the target media sheet.
Specifies that the page's content be printed in landscape
orientation. The longer sides of the page box are horizontal. If a
‘&page-size&’
is not specified, the size of the page sheet is chosen by the UA.
Specifies that the page's content be printed in portrait
orientation. The shorter sides of the page box are horizontal. If a
‘&page-size&’
is not specified, the size of the page sheet is chosen by the UA.
The page box will be set to the given absolute dimension(s). 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). If two length values are
specified, the first establishes the page box width, and the second
the page box height. Values in units of ‘em’ and ‘ex’ refer to the page context's font.
Negative lengths are illegal.
&page-size&
A page size can be specified using one of the following media
names. This is the equivalent of specifying the ‘&page-size&’ using
length values. The definition of the the media names comes from
Media Standardized Names .
Equivalent to the size of ISO A5 media: 148mm wide and 210 mm
Equivalent to the size of ISO A4 media: 210 mm wide and 297 mm
Equivalent to the size of ISO A3 media: 297mm wide and 420mm
Equivalent to the size of ISO B5 media: 176mm wide by 250mm
Equivalent to the size of ISO B4 media: 250mm wide by 353mm
Equivalent to the size of North American letter media: 8.5
inches wide and 11 inches high
Equivalent to the size of North American legal: 8.5 inches wide
by 14 inches high.
Equivalent to the size of North American ledger: 11 inches wide
by 17 inches high.
The ‘&page-size&’ names can be used
in conjunction with ‘landscape’ or
‘portrait’ to indicate both size and
orientation.
8.1.1. Some examples:
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.
In the following example, the outer edges of the page box will align
with the page. The percentage value on the ‘margin’ 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. Assuming there are
no page borders or padding set in the UA default style sheet, the
resulting page area is 189mm by 367.3mm (210mm-21mm by 297mm-29.7mm).
size:/* auto is the initial value */
margin: 10%;
size: 8.5in 11/* width height */
The above example sets the width of the page box to be 8.5 inches and
the height to be 11 inches. This indicates that the page sheet size
should be 8.5"x11" and the orientation ‘portrait’.
8.1.2. Media
This section is informative.
By using Media Queries , one style sheet can
express different stylistic preferences for different page sizes.
Consider this example:
/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
In the example above, "A4" sheets are given a "3cm" page margin, and
"letter" sheets are given a "1in" page margin.
8.2. Rendering page boxes
that do not fit a page sheet
If a page box does not match the target page sheet dimensions, the
user agent should do one of the following (in order of preference):
Render the page box at the indicated size on a larger page sheet.
Rotate the page box 90° if this will make the page box fit the page
Scale the page box to fit the page sheet. (The aspect ratio of the
page box should be preserved.)
Graphically "slice" the page box onto multiple page sheets.
Clip overflowed content (least preferred).
The user agent MAY wish to consult the user
before performing these operations.
8.3. Positioning the
page box on the sheet
When the page box is smaller than the page sheet, the user agent SHOULD either:
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
position the page box in the upper left corner of the page sheet (or
another corner, based on the ‘direction’ and ‘writing-mode’ properties of the page box) as
this may minimize media consumption.
The user agent MAY wish to consult the user in
this regard.
Page Breaks
The CSS Fragmentation Module
module defines
how and where CSS boxes can be fragmented, including across page
breaks. It defines a few properties that indicate where the user agent
MAY or MUST break pages,
and on what page (left or right) the subsequent content resumes. Each
page break ends layout in the current
and causes remaining pieces of the document tree to be laid out in a new
9.1. Using named pages:
auto | &identifier&
Applies to:
boxes that create class 1 break
Inherited:
no (but see prose)
Percentages:
Computed value:
specified value
property is used to specify a particular type of page (called a named page) on which an element MUST be displayed. If necessary, a forced page
break is introduced and a new page generated of the specified type.
This page can be styled by using the same type name in a
Page type names are case-sensitive identifiers. However the ‘auto’ value, being a CSS keyword, is ASCII
case-insensitive.
property does not inherit. However, if the ‘’ value on an element is ‘auto’, then its used value is the value specified on
its nearest ancestor with a non-auto value. When specified on the root
element, the used value for ‘auto’ is the
empty string.
Because a previous version of this specification indicated that the
‘’ property is
inherited, an implementation that inherits the ‘’ property and treats ‘auto’ as always naming the empty string remains
conformant to CSS Paged Media Level 3. Note that this exception will be
removed in Level 4. Therefore authors should not explicitly specify the
‘auto’ value on a descendant of an element
with a non-‘auto’ value, as the resulting
behavior will be unpredictable.
property works as follows:
First, any ‘auto’ values are resolved
against non-‘auto’ ancestors (as specified
Next, a start ‘page’ value and end ‘page’
value is determined for each box as the value (if any) propagated
from its first or last child box (respectively), else the used value on
the box itself. A child propagates its own start or
if and only if the ‘’ property applies to it.
Note: A first or last child box is not always
generated by a first or last child element. For example, an
element could only have a previous sibling with ‘display: none’ which does not generate any box.
The first printed page’s type is the start ‘page’ value of the root.
If for any two boxes meeting at a Class 1 break
point, the
of the box preceding the
of the box succeeding the
break do not match, then a page break is forced between the two boxes,
and content after the break resumes on a page box of the named type.
Essentially, the two ‘’ values compared are those from the
deepest boxes meeting at the class 1 break point, ignoring any subtrees
rooted by boxes to which the ‘’ property does not apply.
for additional
details on page breaks.
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:
@page narrow { size: 9cm 18cm }
@page rotated { size: landscape }
div { page: narrow }
table { page: rotated }
with this document:
&table&...&/table&
&table&...&/table&
&p&This text is rendered on a 'narrow' page&/p&
In Japanese documents, sometimes different parts of a single document
will have different kihon hanmen.
The ‘page’ property, together
with ‘@page’ rules specifying different page
widths, can accomodate this type of layout:
&!DOCTYPE html>
&html lang="ja">
{ writing-mode: vertical-
line-height: 1.6; }
columns: 2; column-gap: 1 }
.index { page:
columns: 3; column-gap: 1 }
/* center kihon hanmen on page */
40 } /* 1.6 × 25 lines
@page main
{ height: 61 } /* 2 × 30 chars + 1 × gap */
@page index { height: 62 } /* 3 × 20 chars + 2 × gap */
&section class="main"> ... &/section>
&section class="index"> ... &/section>
10. Image Properties
This section has been moved to .
Appendix A: Applicable CSS2.1
Properties
CSS 2.1 Properties that apply
within the page context
This list is described in the
properties
background
properties
background-color
background-image
background-repeat
background-attachment
background-position
background
properties
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-short-style
border-top
border-right
border-bottom
border-left
properties
counter-reset
counter-increment
font-family
font-style
font-variant
font-weight
properties
min-height
max-height
line-height
properties
margin-top
margin-right
margin-bottom
margin-left
properties
outline-width
outline-style
outline-color
properties
padding-top
padding-right
padding-bottom
padding-left
letter-spacing
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
visibility
properties
CSS 2.1 properties that apply
within the margin contexts
This list is described in the
properties
unicode-bidi
background
properties
background-color
background-image
background-repeat
background-attachment
background-position
background
properties
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-short-style
border-top
border-right
border-bottom
border-left
properties
counter-reset
counter-increment
font-family
font-style
font-variant
font-weight
properties
min-height
max-height
line-height
properties
margin-top
margin-right
margin-bottom
margin-left
properties
outline-width
outline-style
outline-color
properties
padding-top
padding-right
padding-bottom
padding-left
letter-spacing
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
vertical-align
visibility
properties
Appendix B: Transfer
Possibilities
Often, but not always, the page box has a one-to-one correspondence to
the physical surface onto which the document is ultimately rendered. 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
Transferring one page box to one sheet (e.g. single-sided printing);
Transferring two page boxes to the front and back surfaces of the
same sheet (e.g. double-sided printing);
Transferring N (small) page boxes to one sheet (called "N-up");
Transferring one (large) page box to N x M sheets (called "tiling");
Creating signatures. A signature is a group
of pages printed on a sheet, which, when folded and trimmed like a
book, appear in t
Printing one document to m
Generating files containing print instructions.
Changes since the 10 October 2006
Working Draft are:
The first printed page can be named.
The ‘’ pseudo-class was imported from the Generated Content for Paged
Media module.
‘@page’ rules can now take multiple comma
separated selectors, each selector can have multiple pseudo-classes.
@page :first, :blank { @bottom-center { content: none } }
@page :first:left { @bottom-left { content: none } }
Margin boxes are renamed , to avoid confusion with the margin area of each box.
layout rules
for page-margin boxes have been much simplified to not require
quadratic optimization.
The relative
of page-margin
boxes and page content has changed.
The description of page breaks and definition of related properties
(except for the ‘’ property) have been moved to the CSS
Fragmentation Module.
The ‘fit’ and ‘fit-position’ properties are renamed to
‘object-fit’ and ‘object-position’, redefined to enable
additional use cases, and moved to the CSS3 Image Values and Replaced
Content module.
The default stacking order of page-magin boxes is now defined.
Support for the ‘z-index’ property
on page-margin boxes is not optional anymore.
Each page-margin box eastablishes a stacking context.
Many miscellaneous clarifications and editorial improvements have
been incorporated.
References
Normative References
Bert B et al. Cascading
Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7
June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-/
[CSS3-BREAK]
Rossen A Elika J. Etemad. CSS
Fragmentation Module Level 3. 23 August 2012. W3C Working
Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-css3-break-/
[CSS3-SIZING]
Tab Atkins Jr.; Elika J. Etemad. CSS
Intrinsic & Extrinsic Sizing Module Level 3. 27
September 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-css3-sizing-/
Bert B Elika J. E Brad Kemper. CSS
Backgrounds and Borders Module Level 3. 24 July 2012. W3C
Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2012/CR-css3-background-/
Florian Rivoal. Media
Queries. 19 June 2012. W3C Recommendation. URL: http://www.w3.org/TR/2012/REC-css3-mediaqueries-/
Ron B Tom Hastings. Media
Standardized Names. 26 February 2002. IEEE ISTO Printer
Working Group 2. URL: ftp://ftp.pwg.org/pub/pwg/candidates/cs-pwgmsn10-1.1.pdf
S. Bradner.
Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt
Tantek ? et al. Selectors
Level 3. 29 September 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-css3-selectors-/
[CSS-DEVICE-ADAPT]
Rune Lillesveen. CSS
Device Adaptation. 15 September 2011. W3C Working Draft.
(Work in progress.) URL: http://www.w3.org/TR/2011/WD-css-device-adapt-/
[CSS3-IMAGES]
Elika J. E Tab Atkins Jr. CSS
Image Values and Replaced Content Module Level 3. 17 April
2012. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2012/CR-css3-images-/
[CSS3-WRITING-MODES]
Elika J. E Koji Ishii. CSS
Writing Modes Module Level 3. 15 November 2012. W3C Working
Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-css3-writing-modes-/
H?kon Wium L Tab A Elika J. Etemad. CSS
Values and Units Module Level 3. 28 August 2012. W3C
Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2012/CR-css3-values-/
Yasuhiro A et al. Requirements
for Japanese Text Layout. 3 April 2012. W3C Working Group
Note. URL: http://www.w3.org/TR/2012/NOTE-jlreq-/}