```
Behavior:
- The element is removed from the normal document flow (it won't appear inline)
- It renders in the margin box on every page
- If a new element with the same running name appears later in the document, it replaces the previous one from that page onward
Replacing the running element lets a document change headers by chapter:
```css
.chapter-header { position: running(chapterHead); }
@page { @top-left { content: element(chapterHead); } }
```
```html
Chapter 1: Introduction
Content...
Chapter 2: Analysis
Content...
```
**Choose an approach:**
| Feature | `string-set` / `string()` | `running()` / `element()` |
|---------|--------------------------|---------------------------|
| Plain text | Yes | Yes |
| Images / logos | No | Yes |
| Styled multi-element HTML | No | Yes |
| Simpler syntax | Yes | No |
---
## Page counters
Use CSS counters to display page numbers and total page counts.
### Basic page numbers
```css
@page {
@bottom-center {
content: counter(page);
}
}
```
### Page X of Y
```css
@page {
@bottom-right {
content: "Page " counter(page) " of " counter(pages);
}
}
```
### Roman numerals and letters
```css
/* Front matter with roman numerals */
@page frontmatter {
@bottom-center {
content: counter(page, lower-roman); /* i, ii, iii, iv... */
}
}
/* Alternative formats */
content: counter(page, upper-roman); /* I, II, III, IV... */
content: counter(page, lower-alpha); /* a, b, c, d... */
content: counter(page, upper-alpha); /* A, B, C, D... */
```
### Custom counter styles
```css
/* Reset page counter for main content */
.main-content {
counter-reset: page 1;
}
/* Section-based page numbers */
@page {
@bottom-center {
content: "Section " counter(section) " - Page " counter(page);
}
}
body {
counter-reset: section;
}
.section {
counter-increment: section;
}
```
---
## Widows and orphans
Prevent single lines from appearing alone at the top or bottom of pages.
```css
p {
widows: 3; /* Minimum lines at top of new page */
orphans: 3; /* Minimum lines at bottom before break */
}
/* Stricter control for important content */
.important-paragraph {
widows: 4;
orphans: 4;
}
```
**Definitions:**
- **Widows**: Lines left alone at the top of a new page
- **Orphans**: Lines left alone at the bottom of a page before a break
---
## @media print
Use the print media query to apply styles only when generating PDFs or printing.
### Basic usage
```css
/* Screen-only styles */
@media screen {
.nav-menu {
display: flex;
}
}
/* Print-only styles */
@media print {
.nav-menu {
display: none;
}
body {
font-size: 12pt;
line-height: 1.4;
}
}
```
### Hide screen elements
```css
@media print {
/* Hide navigation and interactive elements */
nav,
.sidebar,
.social-share,
.comments,
.footer-links,
button:not(.print-include),
input,
.no-print {
display: none !important;
}
/* Remove backgrounds for cleaner print */
* {
background: transparent !important;
}
}
```
### Link handling
```css
@media print {
/* Show URLs after links */
a[href^="http"]:after {
content: " (" attr(href) ")";
font-size: 0.9em;
color: #666;
}
/* But not for internal links */
a[href^="#"]:after,
a[href^="/"]:after {
content: none;
}
}
```
---
## Print layouts
### Invoice or report
```css
@page {
size: A4;
margin: 2cm 1.5cm 3cm 1.5cm;
@top-right {
content: "Invoice #" attr(data-invoice-number);
font-size: 10pt;
}
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
font-size: 9pt;
color: #666;
}
}
.invoice-header {
break-after: avoid;
}
.line-items {
break-inside: avoid;
}
.line-items tr {
break-inside: avoid;
}
.invoice-total {
break-before: avoid;
break-inside: avoid;
}
```
### Book or long document
```css
@page {
size: 6in 9in; /* Trade paperback size */
margin: 0.75in 0.5in;
}
@page :left {
margin-left: 0.75in;
margin-right: 0.5in;
@bottom-left {
content: counter(page);
}
}
@page :right {
margin-left: 0.5in;
margin-right: 0.75in;
@bottom-right {
content: counter(page);
}
}
@page :first {
@bottom-left {
content: none; /* No page number on title page */
}
}
.chapter {
break-before: right; /* Chapters start on right pages */
}
h1 {
break-after: avoid;
}
img {
max-width: 100%;
break-inside: avoid;
}
```
### Multi-column layout
```css
.content {
columns: 2;
column-gap: 1.5em;
column-rule: 1px solid #ddd;
}
/* Prevent column breaks inside elements */
.content p {
break-inside: avoid-column;
}
.content h2 {
column-span: all; /* Headings span all columns */
break-after: avoid;
}
```
---
## Charts
The PDF renderer does not execute JavaScript. Chart.js, D3.js, Plotly.js, Highcharts, and ApexCharts therefore do not render, and `
Company Name