CSS Paged Media Module Level 3

https://www.w3.org/TR/css-page-3/
Admin
CSS Paged Media Module Level 3 specifies how pages are generated and laid out to hold fragmented...
Tokens:18,079
Snippets:122
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Create page header with @top-left and @top-right margin boxes

Source: https://www.w3.org/TR/css-page-3

Establishes a page header using margin at-rules inside the page context. The @top-left box contains the title "Hamlet" and the @top-right box contains the page number preceded by "Page ". Place margin at-rules after any declarations in the page context for compatibility with legacy clients.

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

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

```

--------------------------------

### Page with top-left and top-center headers

Source: https://www.w3.org/TR/css-page-3

Defines a page with both top-left and top-center headers.

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

--------------------------------

### Page with top-center and top-right headers

Source: https://www.w3.org/TR/css-page-3

Defines a page with both top-center and top-right headers.

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

--------------------------------

### Set first page top margin with :first pseudo-class

Source: https://www.w3.org/TR/css-page-3

Sets all margins to 2cm for every page and overrides the top margin to 10cm for the first printed page using the :first pseudo-class.

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

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

```

--------------------------------

### Set page size to A4 landscape

Source: https://www.w3.org/TR/css-page-3

Sets the page size to A4 and the orientation to landscape using the <page-size> name with the landscape keyword.

```css
@page {
size: A4 landscape;
}

```

--------------------------------

### Make all pages even-numbered with counter-increment: page 2

Source: https://www.w3.org/TR/css-page-3

Makes all pages even-numbered by incrementing the page counter by 2 in the page context.

```css
@page {
  counter-increment: page 2;
}

```

--------------------------------

### Using named pages with the page property

Source: https://www.w3.org/TR/css-page-3

Uses the page property with named @page rules to give different sections different page sizes in a vertical-rl Japanese document. The .main section uses a two-column layout with a 61rem page height, while .index uses three columns with a 62rem height; the base @page rule centers the kihon hanmen with a 40rem width.

```html
<!DOCTYPE html>
<html lang="ja">
  <style>
    html   {
      writing-mode: vertical-rl;
      line-height: 1.6;
    }
    .main  {
      page: main;
      columns: 2;
      column-gap: 1rem;
    }
    .index {
      page: index;
      columns: 3;
      column-gap: 1rem;
    }
    @page {
      margin: auto;  /* center kihon hanmen on page */
      width:  40rem; /* 1.6 × 25 lines        */
    }
    @page main  { height: 61rem; } /* 2 × 30 chars + 1 × gap */
    @page index { height: 62rem; } /* 3 × 20 chars + 2 × gap */
  </style>
  <section class="main"> ... </section>
  <section class="index"> ... </section>
</html>
```

--------------------------------

### Force first page with break-before: always

Source: https://www.w3.org/TR/css-page-3

Forces the first page of an HTML document to print on a right page when the page progression is left-to-right. The UA suppresses the first empty page and the :first pseudo-class matches the first printed page.

```css
html { break-before: always }

```

--------------------------------

### Add header to blank pages with :blank pseudo-class

Source: https://www.w3.org/TR/css-page-3

Forces a page break before h1 elements and adds a header to blank pages that result from forced page breaks. The :blank pseudo-class matches content-empty pages generated by break-before or break-after with left, right, recto, or verso values.

```css
h1 { break-before: left }

@page :blank {
  @top-center { content: "This page is intentionally left blank" }
}

```

--------------------------------

### Media queries for A4 and letter page sizes

Source: https://www.w3.org/TR/css-page-3

Uses media queries to apply different page margins for A4 (21cm x 29.7cm) and letter (8.5in x 11in) page sizes. The first block sets a 3cm margin for A4 printing, and the second sets a 1in margin for letter printing.

```css
/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
  @page {
     margin: 3cm;
  }
 }
```

```css
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
  @page {
  margin: 1in;
  }
}
```

--------------------------------

### Set left and right page margins with :left and :right pseudo-classes

Source: https://www.w3.org/TR/css-page-3

Defines different margins for left and right pages in double-sided printing. The :left pseudo-class matches left pages and :right matches right pages. User agents must honor these declarations even if they do not transfer page boxes to left and right sheets.

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

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

```

--------------------------------

### Force first page with break-before: left

Source: https://www.w3.org/TR/css-page-3

Forces the first page of an HTML document to print on a left page regardless of the page progression. The UA suppresses the first empty page and the :first pseudo-class matches the first printed page.

```css
html { break-before: left }

```

--------------------------------

### Populating page-margin boxes with @page corner rules

Source: https://www.w3.org/TR/css-page-3

Creates green boxes in each page corner except the bottom-left, which is suppressed by setting content to normal. Demonstrates that a page-margin box is generated only when its computed content value is not normal.

```css
@page {
  @top-left-corner { content: " "; border: solid green; }
  @top-right-corner { content: url(foo.png); border: solid green; }
  @bottom-right-corner { content: counter(page); border: solid green; }
  @bottom-left-corner { content: normal; border: solid green; }
}
```

--------------------------------

### Set page size to 8.5in 11in

Source: https://www.w3.org/TR/css-page-3

Sets the page box width to 8.5 inches and height to 11 inches, indicating a page sheet size of 8.5"x11" with portrait orientation.

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

--------------------------------

### Set page size to auto with percentage margins

Source: https://www.w3.org/TR/css-page-3

Sets the page size to auto (the initial value) and the margin to 10% of the page size. With an A4 sheet (210mm x 297mm), the margins become 21mm and 29.7mm, and the resulting page area is 189mm by 267.3mm.

```css
@page {
size: auto;/* auto is the initial value */
margin: 10%;
}
```

--------------------------------

### Page with top-left and top-right headers

Source: https://www.w3.org/TR/css-page-3

Defines a page with top-left and top-right headers, where the left header has approximately twice as many words as the right cell.

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

--------------------------------

### Page with a centered header

Source: https://www.w3.org/TR/css-page-3

Defines a page with a centered header in the top-center page-margin box.

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

--------------------------------

### Ignore size in media query

Source: https://www.w3.org/TR/css-page-3

Shows that a size declaration inside a media query that depends on page size is ignored. The second size declaration is ignored, so the specified value of the size property remains 4in 6in.

```css
@page {
  size: 4in 6in;
}

@media (max-width: 6in) {
  @page {
    size: letter;
  }
}

```

--------------------------------

### Centered header with chapter counter

Source: https://www.w3.org/TR/css-page-3

Creates a centered header with the current chapter name using a chapter counter reset on the body and incremented on each div.chapter.

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

```

--------------------------------

### Page with only a top-left header

Source: https://www.w3.org/TR/css-page-3

Defines a page with only a top-left header. Because no contents are defined for top-center or top-right, the top-left box can extend across the center of the page.

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

--------------------------------

### Display page number in margin box with counter(page)

Source: https://www.w3.org/TR/css-page-3

Places the current page number in the middle of the outside margin of each page using the page counter in a page-margin box.

```css
@page {
  margin: 10%;

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

```
Tokens:
Raw