CSS3 Module: Paged Media

Abstract

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.

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 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.

Table of Contents

• 1. Dependencies on other CSS Modules
• 2. Introduction
  • 2.1. Terminology
• 3. Page Boxes: the @page Rule
  • 3.1. Page Terminology and the Page Model
  • 3.2. Page types
  • 3.3. Page size
    • 3.3.1. Page size: the 'size' property
    • 3.3.2. Media Queries
    • 3.3.3. Rendering page boxes that do not fit a page sheet
    • 3.3.4. Positioning the page box on the sheet
  • 3.4. Page Selectors and the Page Context
    • 3.4.1. Page selector grammar
    • 3.4.2. Cascading in the page context
  • 3.5. Page Properties
  • 3.6. Left, right, and first pages
  • 3.7. Content outside the page box
• 4. Margin Boxes
  • 4.1. At-rules for margin boxes
  • 4.2. Maximum Dimension of margin boxes
  • 4.3. Dimension of margin boxes
  • 4.4. Margin boxes and default values
    • 4.4.1. Margin box examples
  • 4.5. Populating margin boxes
• 5. Page Breaks
  • 5.1. Break before/after elements: 'page-break-before', 'page-break-after', 'page-break-inside'
  • 5.2. Using named pages: 'page'
  • 5.3. Breaks inside elements: 'orphans', 'widows'
  • 5.4. Allowed page breaks
  • 5.5. Forced page breaks
  • 5.6. "Best" page breaks
• 6. Page-based Extensions to Counters
  • 6.1. Page-based counters
• 7. Orienting an Image on the Page
• 8. The 'fit' and 'fit-position' Properties
• References
  • Normative References
  • Informative References

1. Dependencies on other CSS Modules

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.

2. Introduction

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:

• page breaks are created and avoided,
• the page properties such as size, orientation, margins, border, and padding are specified,
• headers and footers are established within the page margins,
• content such as page counters are placed in the headers and footers, and
• orphans and widows can be controlled.

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:

• 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 their proper sequence;
• Printing one document to multiple output trays;
• Generating files containing print instructions.

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.

2.1. Terminology

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.

3. Page Boxes: the @page Rule

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 content area of a page box is called the page area. The content of the document is flowed into the page area. The edges of the page area on the first page establish the rectangle that is the initial containing block of the document.
• The margin area of a page box is divided into 16 margin boxes. Each margin box has its own margin, border, padding and content areas. Margin boxed are typically used to display running headers and footers.

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.

3.1. Page Terminology and the Page Model

The following terminology and accompanying diagrams help to describe the page model:

Page sheet

The page sheet is one surface of the physical medium. The illustration to the right shows a representation of the upper-left corner of a page sheet.

Non-printable area

The non-printable area is the area of a page sheet that a physical device such as a printer is not capable of marking reliably, usually due to the printer's paper handling mechanism. This value is printer dependent and is usually a small area along each edge of the page sheet. The unprintable region along the left and right edges of the page are usually the same size, as are the top and bottom areas.  However, the top/bottom and left/right areas can be different. A user agent may not be aware of this area or how it varies from device to device. Printing devices MAY adjust the layout of the document so that content is not lost. How this adjustment is accomplished is device dependent within the constraints expressed in the sections Rendering page boxes that do not fit a page sheet and Content outside the page box.

Printable area

The printable area is the area of page sheet that a printer is capable of marking reliably. The size of the printable area is the size of the page sheet reduced by the size of the non-printable area. This value is printing device dependent. A user agent may not be aware of this area or how it varies from printing device to printing device. Printing devices MAY adjust the layout of the document so that content falls within the printable area. How this adjustment is accomplished is device dependent within the constraints expressed in the sections Rendering page boxes that do not fit a page sheet and Content outside the page box.

Page box

A page box is derived from the box model and contains portions of the document flow destined for rendering on a page sheet. The width and height of the page box are determined by the size property. Unlike other boxes, the margins of the page box are subdivided into margin boxes. In the simplest case, the page box is congruent with the page sheet. However, there are more complex use cases (see the transfer possibilities in the Introduction) where the page box differs from the page sheet in values such as size or orientation.

Page area

The page area is a synonym for the content area of the page box. The page area acts as a container for all the boxes laid out within a given page box.

Margin box

Margin boxes act as containing boxes for header/footer content. The following margin boxes are defined and illustrated in the diagram below:

Table 1 Margin Box Definitions

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

Content-empty Page

a page surface whose page area contains no printable content other than backgrounds and/or borders. A page containing generated content or invisible content such as a zero-width space within the page area is not a content-empty page. On the other hand, a page containing only a background and/or borders and/or padding and/or margin-box content is a content-empty page.

3.2. Page types

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:

Page Orientation

The page orientation is defined by comparing the length of the edges of a page box. 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.

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.

Front Side

Media used as a stack of sheets have two sides known as the front and the back. Typically, the user agent prints on the front side of the media when using only one side of the page sheet. Media used from a roll or continuous form will print only on the front side. CSS does not provide a mechanism to deal directly with the front and back sides, rather page layouts must be designed in terms of left and right pages.

Back Side

The back side of a sheet medium is the side that cannot be seen when looking at the front side. Typically, the back side is only used when printing on both sides of the medium. Unless using special paper stock such as letterhead it does not usually matter which side is the front and which is the back.

Duplex Printing

Duplex printing uses one page box per side of a page sheet and uses both sides of the page sheet. This module provides no ability to specify whether a document is duplex printed, but the concept of left and right pages is based on the assumption that the document is duplex printed, regardless of whether it actually is.

Binding Edge treatment

The binding edge is the edge of the page box that is towards the binding if the material is bound. The binding edge often has a larger margin than the opposite edge to provide for the space used by the binding. The binding edge can be any of the four edges. However, page sheets are customarily bound so that the binding edge of page boxes with portrait orientation is vertical. This module provides no method to specify the binding edge. In duplex printing, the binding edge is on opposite sides of the page box for the left and right pages.

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. It is up to the UA to determine whether the left page or the right page of a pair of facing pages is the earlier one of the sequence. How the UA makes this determination is implementation dependent but often depends upon the predominant writing direction of the document.

Major Writing Direction

The major writing direction for the document is determined by the UA. If the UA supports the 'direction' property from CSS2 or the CSS 3 Text Module it MUST determine it using the value of that property on the root element.

Left Page

A page that will be on the left if it is part of a pair of facing pages as typically laid out. Page layouts for documents using a left-to-right major writing direction have the earlier of the facing pages on the left. Rules for the left page can be specified using the ':left' page selector.

Right Page

A page that will be on the right if it is part of a pair of facing pages as typically laid out. Page layouts for documents using a right-to-left major writing direction have the earlier of the facing pages on the right. Rules for the right page can be specified using the ':right' page selector.

First Page

The first page in a document. The first page is generally printed on the front side of a medium. Rules for the first page can be specified using the ':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.

3.3. Page size

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.

3.3.1. Page size: the 'size' property

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:

auto

The page box will be set to the size and orientation of the page sheet chosen by the UA.

landscape

Specifies that the page's content be printed in landscape orientation. The page box is the same size as the page, and the longer sides are horizontal. If a '<length>' or '<page-size>' is not specified, the size of the page sheet is chosen by the UA.

portrait

Specifies that the page's content be printed in portrait orientation. The page box is the same size as the page, and the shorter sides are horizontal. If a '<length>' or '<page-size>' is not specified, the size of the page sheet is chosen by the UA.

@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.

<length>

The page box will be set to the given absolute length. If only one length value is specified, it sets both the width and height of the page box (i.e., the box is a square). The page context has a font associated with it either by an explicit use of the 'font-family' and 'font-size' properties or from the UA's default style sheet. Therefore, values in units of 'em' and 'ex' refer to the page context's font.

@page {
  size: 8.5in 11in;/* width height */
}

<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 [PWGMSN].

A5

The page box SHOULD be set to the size of ISO A5 media: 148mm wide and 210 mm high.

A4

The page box SHOULD be set to the size of IS0 A4 media: 210 mm wide and 297 mm high.

A3

The page box SHOULD be set to the size of ISO A3 media: 297mm wide and 420mm high.

B5

The page box SHOULD be set to the size of ISO B3 media: 176mm wide by 250mm high.

B4

The page box SHOULD be set to the size of ISO B4 media: 250mm wide by 353mm high.

letter

The page box SHOULD be set to the size of North American letter media: 8.5 inches wide and 11 inches high

legal

The page box SHOULD be set to the size of North American legal: 8.5 inches wide by 14 inches high.

ledger

The page box SHOULD be set to the size of North American ledger: 11 inches wide by 17 inches high.

These media size names can be used in conjunction with 'landscape' or 'portrait' to indicate size and orientation.

@page {
  size: A4 landscape;
}

User agents SHOULD also support Media Size Self-Describing Names as defined in Section 5 of [PWGMSN].

3.3.2. Media Queries

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.

3.3.3. 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 MAY choose (in order of preference) to:

• 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 sheet.
• Scale the page box to fit the page sheet. (There is no requirement to maintain the aspect ratio of the page or of any elements on the page when scaling; however, preservation of the aspect ratio is preferred.)
• Reformat the page contents, including 'spilling' onto other page sheets.
• Clip overflowed content (least preferred).

The user agent SHOULD consult the user before performing these operations.

3.3.4. Positioning the page box on the sheet

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.

3.4. Page Selectors and the Page Context

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.

3.4.1. Page selector grammar

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 value 'auto' may not be used as a page name and MUST be treated as a syntax error.

@page { ... }
@page :left { ... }
@page :right { ... }
@page LandscapeTable { ... }
@page CompanyLetterHead:first { ... } /*  identifier and pseudo page. */
@page:first { ... };

@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 */ } }

3.4.2. Cascading in the page context

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:

• if an @page rule has a named page, f=1
• if an @page rule has a ':first' pseudo-class, g=1
• if an @page rule has a ':left' or ':right' pseudo-class, h=1

Concatenating the three numbers f-g-h gives the specificity.

        @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 */ 

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

@page :first {
  color: green;

  @top-left {
    content: "foo";
    color: blue;
  }
  @top-right {
    content: "bar";
  }
}

@page { color: red;
  @top-center {
    content: "Page " counter(page);
    }
}

@page { margin: 25mm;}
@page { font-size: 14pt;}

3.5. Page Properties

@page :left {
  margin-left: 3cm;
  margin-right: 4cm;
}

@page :right {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {
  margin-top: 10cm /* Top margin on first page 10cm */
}

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

@page {
  @top-left { content: "Header in Left Cell (top-left)" }
}

@page {
  @top-center { content: "Header in Center Cell (top-center)" }
}

@page {
  @top-right { content: "Header in Right Cell (top-right)" }
}

@page {
  @top-left { content: "Left Cell (top-left)" }
  @top-center { content: "Header in Center Cell (top-center)" }
}

@page {
  @top-center { content: "Header in Center Cell (top-center)" }
  @top-right { content: "Right Cell (top-right)" }
}

@page {
  @top-left { content: "Header in top-left with approx. "
                     "twice as many words as right cell." }
  @top-right { content: "Right cell (top-right)" }
}

body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
  margin: 10%;
  @top-center { content: "Chapter" counter(chapter) }
}

@page rotated { size: landscape }
table { page: rotated; page-break-before: right }

@page narrow { size: 9cm 18cm }
@page rotated { size: landscape }
div { page: narrow }
table { page: rotated }

<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>

@page {
  margin: 10%;
  counter-increment: page;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}

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=... />