Copyright © 2006 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
This module describes the page model that partitions a flow into pages. It builds on the Box model module 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.
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 W3C technical reports index at http://www.w3.org/TR/.
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 the Style Activity).
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 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 Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This document contains the CSS3 Paged Media Module W3C Last Call Working Draft of 10 October 2006. The Last Call period ends on 3 November 2006.
Relative to the previous Candidate Recommendation, this version removes page-based floats, string-set, and page-policy features, which have been moved to CSS3 Generated Content for Paged Media; adds two new features ('fit' and 'fit-position'); and incorporates a new algorithm for determining margin box sizes as well as miscellaneous clarifications and editorial improvements.
This CSS3 module depends on Cascading Style Sheets Level 2 Revision 1 [CSS21] 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.
Paged media (e.g., paper, transparencies, pages that are displayed on computer screens, etc.) 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:
CSS3 defines a page model that specifies how a document is formatted within a rectangular area, called the page box, 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:
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 size and orientation. In the general case, CSS3 assumes that one page box will be transferred to one surface of a sheet of similar size.
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 [RFC2119]. However, for readability, these words do not appear in all uppercase letters in this specification.
In the page 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. 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:
The properties of a page box are determined by properties established within the page context, which is the rule set of the @page rule. Page boxes differ from other boxes in that the 'width' and 'height' properties do not apply to a page box. The size of the page box is specified using the 'size' property in the page context.
The following terminology and accompanying diagrams help to describe the page model:
Box | Description | Placement |
---|---|---|
|
||
top-left-corner | a fixed-size box filling the area defined by the intersection of the top and left margins of the page box | ![]() |
top-left | a variable-width box within the area defined by the top margin and adjoining the top-left-corner margin box | ![]() |
top-center | 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 | ![]() |
top-right | a variable-width box within the area defined by the top margin and adjoining the top-right-corner margin box | ![]() |
top-right-corner | a box filling the area defined by the intersection of the top and right margins of the page box | ![]() |
left-top | a variable-height box within the area defined by the left margin and adjacent to the bottom of the top-left-corner. | ![]() |
left-middle | 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. | |
left-bottom | a variable-height box within the area defined by the left margin and adjacent to the top of the bottom-left-corner. | |
right-top | a variable-height box within the area defined by the right margin and adjacent to the bottom of the top-right-corner. | ![]() |
right-middle | 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. | |
right-bottom | a variable-height box within the area defined by the right margin and adjacent to the top of the bottom-right-corner. | |
bottom-left-corner | a box filling the area defined by the intersection of the bottom and left margins of the page box | ![]() |
bottom-left | a variable-width box within the area defined by the bottom margin and adjoining the bottom-left-corner margin box | ![]() |
bottom-center | 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 | ![]() |
bottom-right | a variable-width box within the area defined by the bottom margin and adjoining the bottom-right corner margin box | ![]() |
bottom-right-corner | a box filling the area defined by the intersection of the bottom and right margins of the page box | ![]() |
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:
':first'
page selector. A first page can be either a left page or a right page
but a UA MUST
apply any rules defined for a first page in preference to those defined
on a left page or a right page.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.
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 'size' property, which requests that the document is printed on a page which has a certain size; another method is to use Media Queries [MEDIAQ] which allow different style sheets to be applied to different page sizes.
Name: | size |
Value: | <length>{1,2} | auto | [ <page-size> || [ portrait | landscape] ] |
Initial: | auto |
Applies to: | page context |
Inherited: | N/A |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
This property specifies the size and orientation of the containing box for page content, the page box. In the general case, where one page box is rendered onto one page sheet, the 'size' property also indicates the size of the destination page sheet.
The size of a page box MAY 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.
Three values for the 'size' property create a relative page box:
'<length>'
or '<page-size>' is not specified, the size of the
page sheet is chosen by the UA.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.
@page { size: auto;/* auto is the initial value */ margin: 10%; }
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.
For example:
@page { size: 8.5in 11in;/* width height */ }
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.
These media size names can be used in conjunction with 'landscape' or 'portrait' to indicate size and orientation.
For example:
@page { size: A4 landscape; }
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.
User agents SHOULD also support Media Size Self-Describing Names as defined in Section 5 of [PWGMSN].
This section is informative.
By using Media Queries [MEDIAQ], 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) { @page { margin: 3cm; } } /* style sheet for "letter" printing */ @media print and (width: 8.5in) and (height: 11in) { @page { margin: 1in; } }
In the example above, "A4" sheets are given a "3cm" page margin, and "letter" sheets are given a "1in" page margin.
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.
If a page box does not match the target page sheet dimensions, the user agent MAY choose (in order of preference) to:
The user agent SHOULD consult the user before performing these operations.
When the page box is smaller than the page size, the user agent SHOULD 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.
Authors specify the dimensions, orientation, margins, etc. of a page box within an @page rule. An @page rule consists of the keyword '@page', an OPTIONAL page name followed with no intervening space by an OPTIONAL page pseudo-class and a block of declarations and margin rules (said to be in the page context).
The OPTIONAL page name and OPTIONAL page pseudo-class constitutes the page selector. The page selector specifies for which pages the declarations apply. In CSS3, page selectors MAY designate the first page of a document, all left pages, all right pages, or pages with specific names.
Properties for the page box are specified within the page context.
The syntax for a page selector is a specialization of the generic at-rule and MUST adhere to the following (more strict) grammar:
See [CSS21], 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_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" page : PAGE_SYM S* IDENT? pseudo_page? S*'{'
S* [ declaration | margin ]? [';'
S* [ declaration | margin ]? ]*'}'
S* ; pseudo_page :':'
[ "left" | "right" | "first" ] ; margin : margin_sym 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 restrictions and relaxations are made to the syntax above:
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 { ... };
The following are examples of margin boxes where the declaration blocks are intentionally left blank.
@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 */ } }
Optionally, @page rules can have one pseudo-class (':first',':left', or 'right') and/or one named page. The specificity of @page rules are computed in an analogous manner to the computations defined in the Selectors module:
':first'
pseudo-class, g=1':left'
or ':right'
pseudo-class, h=1Concatenating the three numbers f-g-h gives the specificity.
Some page specificity calculation examples follow:
@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 */
Consider the following usage example:
@page { margin-left: 3cm; } @page :left { margin-left: 4cm; }
Due to the higher specificity of the pseudo-class selector, the left margin on left pages will be 4 centimeters and all other pages (i.e., the right pages) will have a left margin of 3 centimeters.
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.
@page :first { color: green; @top-left { content: "foo"; color: blue; } @top-right { content: "bar"; } } @page { color: red; @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 margin boxes:
@page { margin: 25mm;} @page { font-size: 14pt;}
The following properties can be used in the page context to style the appearance of the page box:
These properties can be used in the page context to set counters:
These properties can be used in the page context to style the content of margin boxes:
That is, when set in the page context, the values become the initial values for the margin boxes.
These properties can be used in the margin context to style margin boxes and their content:
The normal rules for box properties apply with the following exceptions:
The page background is painted first, and covers the entire page box. A margin-box background is painted over (on top of) the page background. The root element then paints the canvas within the page area, which contains the portions of the root element formatted for a single page (including the margins of the root element).
The origin of the page background is the upper-left corner of the page area.
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 'border-break' [CSS3BG] is under consideration.)
It is recommended that user agents with a non-printable area (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 recommended that authors assume that the default page area will not include unprintable regions.
When printing double-sided documents, the page boxes on left and right pages MAY be different. This can be expressed through CSS pseudo-classes defined in the page context.
All pages are automatically classified by user agents into either the ':left' or ':right' pseudo-class. The following example creates left and right binding edges using these pseudo-classes.
@page :left { margin-left: 3cm; margin-right: 4cm; } @page :right { margin-left: 4cm; margin-right: 3cm; }
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 (e.g., a printer that only prints single-sided).
Authors MAY also specify style for the first page of a document with the ':first' pseudo-class:
@page { margin: 2cm } /* All margins set to 2cm */ @page :first { margin-top: 10cm /* Top margin on first page 10cm */ }
Whether the first page of a document is ':left' or ':right'
depends on the major writing
direction of the document and is outside the scope of this document.
However, to force a ':left'
or ':right'
first page, authors
MAY insert a page break before the first generated box (e.g., in
HTML, specify this for the BODY element).
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).
Note. Future versions of CSS may include other page pseudo-classes.
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' MAY generate a box that is wider than the page box. Also, when boxes are positioned absolutely, they MAY end up in "inconvenient" locations. For example, images MAY be placed on the edge of the page box. Similarly when boxes use fixed or relative positioning, they MAY also end up outside of the page box.
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:
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.
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.
Margin boxes are created through margin at-rules inside the page context.
A margin at-rule consists of an ATKEYWORD that identifies the 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:
@page { size: 8.5in 11in; margin: 10%; @top-left { content: "Hamlet"; } @top-right { content: "Page " counter(page); } }
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:
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.
The following rules apply to 'top-left', 'top-center' and 'top-right' margin boxes, which are referred to as [1], [2], and [3], respectively, in the expression below.
Rules:
left-margin[1]² + left-margin[2]² + left-margin[3]² + right-margin[1]² + right-margin[2]² + right-margin[3]²
The used values for bottom-left, bottom-center and bottom-right are established by the same rules.
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 boxes are established by the same rules as for left-top, left-middle and left-bottom.
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.
The initial value for 'content' is 'none'. The initial 'width' and 'height' of margin boxes is 'auto'. The initial value of text-align and vertical-align is defined below:
Margin box | 'text-align' | 'vertical-align' |
---|---|---|
top-left-corner | right | middle |
top-left | left | middle |
top-center | center | middle |
top-right | right | middle |
top-right-corner | left | middle |
left-top | center | top |
left-middle | center | middle |
left-bottom | center | bottom |
right-top | center | top |
right-middle | center | middle |
right-bottom | center | bottom |
bottom-left-corner | right | middle |
bottom-left | left | middle |
bottom-center | center | middle |
bottom-right | right | middle |
bottom-right-corner | left | middle |
The following is a collection of examples of margin box usage.
Here is an example of a page with only a top-left header:
@page { @top-left { content: "Header in Left Cell (top-left)" } }
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.
The following is an example of a page with a centered header:
@page { @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 margin box:
@page { @top-right { content: "Header in Right Cell (top-right)" } }
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.
The following is an example of a page with a top-center and a top-left header:
@page { @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:
@page { @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 headers:
@page { @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. 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.
A margin box is instantiated if a margin context is established and one of the following conditions holds:
This example style sheet could be used to create a centered header with the current chapter name:
body {counter-reset: chapter;} div.chapter {counter-increment: chapter;} @page { margin: 10%; @top-center { content: "Chapter" counter(chapter) } }
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 MUST be used by default.
The following sections explain page formatting in CSS3 paged media. Five properties indicate where the user agent MAY or SHOULD break pages, and on what page (left or right) the subsequent content SHOULD resume. Each page break ends layout in the current page box and causes remaining pieces of the document tree to be laid out in a new page box.
Name: | page-break-before |
Value: | auto | always | avoid | left | right |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
Name: | page-break-after |
Value: | auto | always | avoid | left | right |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
Name: | page-break-inside |
Value: | auto | avoid |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | yes |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
Values for these properties have the following meanings:
A potential page break location is typically under the influence of the parent element's 'page-break-inside' property, the 'page-break-after' property of the preceding element, and the 'page-break-before' property of the following element. When these properties have values other than 'auto', the values 'always', 'left', and 'right' take precedence over 'avoid'. See the section on allowed page breaks for the exact rules on how these properties MAY force or suppress a page break.
Name: | page |
Value: | auto | <identifier> |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | yes |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value |
The 'page' property can be used to specify a particular type of page where an element SHOULD be displayed.
This example will put all tables on a right-hand side landscape page (named "rotated"):
@page rotated { size: landscape } table { page: rotated; page-break-before: right }
The 'page' property works as follows: If a block box with inline content has a 'page' 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 "Forced page breaks" below.
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:
<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>
Name: | orphans |
Value: | <integer> |
Initial: | 2 |
Applies to: | block-level elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
Name: | widows |
Value: | <integer> |
Initial: | 2 |
Applies to: | block-level elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
The 'orphans' property specifies the minimum number of lines of a paragraph that MUST be left at the bottom of a page. The 'widows' property specifies the minimum number of lines of a paragraph that MUST be left at the top of a page. Examples of how they are used to control page breaks are given below.
If a paragraph contains fewer lines than the value of 'widows' or 'orphans', the rule is relaxed.
In the normal flow, page breaks may occur at the following places:
'0'
.These breaks are subject to the following rules:
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.
If that still does not lead to sufficient break points, rules A and C are dropped as well, to find still more break points.
A page break MUST occur at (1) if, among the 'page-break-after' and 'page-break-before' properties of all the elements generating boxes that meet at this margin, there is at least one with the value 'always', 'left', or 'right'.
When multiple 'page-break-before' and/or '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.
A page break MUST 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 'page'.
CSS3 does not define which of a set of allowed page breaks MUST 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):
Suppose, for example, that the style sheet contains 'orphans : 4'
, 'widows : 2', and there are 20 lines (line boxes)
available at the bottom of the current page:
Now suppose that 'orphans' is
'10'
, 'widows' is '20', and there are 8 lines available at the bottom
of the current page:
Counters apply to page contexts defined by means of the '@page'
rule. This is useful
for maintaining a page count.
The following rules result in the placement of the current page number in the middle of the outside margin of each page.
@page { margin: 10%; counter-increment: page; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } }
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.
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.
Name: | image-orientation |
Value: | auto | <angle> |
Initial: | auto |
Applies to: | images |
Inherited: | N/A |
Percentages: | N/A |
Media: | paged |
Computed value: | specified value modulo full circle value |
'image-orientation' 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.
Two values for the 'image-orientation' property apply to an image:
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=... />
Name: | fit |
Value: | fill | hidden | meet | slice |
Initial: | fill |
Applies to: | replaced elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
Name: | fit-position |
Value: | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | auto |
Initial: | 0% 0% |
Applies to: | replaced elements |
Inherited: | yes |
Percentages: | refer to width and height of box itself |
Media: | visual |
Computed value: | specified value |
The 'fit' property gives a hint
for how to scale a replaced element if neither its 'width' nor its 'height' property is 'auto'
. Not all replaced objects can be scaled, but
images typically can.
'hidden'
value.'hidden'
value.'Hidden' is not really an intuitive name, 'none' might be better. But SMIL already uses 'hidden'...
See the 'overflow' property for how to render parts of the object that extend beyond the edges of the box.
The keywords are intended to convey the visual effect in
the case that 'overflow' is 'hidden'
, which is expected to be the most common
case.
An example showing how each of the four values of 'fit' causes the object (gray rectangle) to be scaled to fit the given box (red dotted outline).
The 'fit-position'
determines the alignment of the object inside the box. The values have
the same meaning as the values on 'background-position', with the addition of the
value 'auto'
, specifically:
'0% 0%'
, the upper
left corner of the image is aligned with the upper left corner of the
box's padding edge. A value pair of '100%
100%'
places the lower right corner of the image in the lower
right corner of padding area. With a value pair of '14% 84%'
, the point 14% across and 84% down the
image is to be placed at the point 14% across and 84% down the padding
area.'2cm 2cm'
, the upper
left corner of the image is placed 2cm to the right and 2cm below the
upper left corner of the padding area.'left top'
'0% 0%'
.'top center'
, 'center top'
'50% 0%'
.'top right'
'100% 0%'
.'left center'
, 'center left'
'0% 50%'
.'center center'
'50% 50%'
.'right center'
, 'center right'
'100% 50%'
.'left bottom'
'0% 100%'
.'bottom center'
, 'center bottom'
'50% 100%'
.'right bottom'
'100% 100%'
.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.)
Note: areas of the box not covered by the replaced element will show the element's 'background'.
Note: the 'fit' property has the same meaning as the fit attribute in [SMIL10], except that the value 'scroll' is not available, because the 'overflow' property can be used instead.