Paged.js Quick Reference
A condensed reference for the CSS Paged Media properties implemented by Paged.js, with the values supported in current versions and brief usage notes.
This reference covers the properties used throughout this book. It is not exhaustive — the full CSS Paged Media specification is considerably larger — but it covers the properties needed for professional document production. Where a property's support in Paged.js is partial or has known limitations, these are noted.
The @page rule and its properties
| Property | Values and syntax | Notes |
|---|---|---|
| size | 5.5in 8.5in · A4 · letter · A4 landscape |
Sets page dimensions. Named sizes: A3–A6, B4–B6, letter, legal, ledger. Orientation keywords: portrait, landscape. |
| margin | 0.75in · margin-top · margin-bottom · etc. |
Standard CSS margin shorthand and longhands. All length units accepted. |
| margin-inside | 0.625in |
Gutter-side margin — left on recto, right on verso. Use instead of margin-left / margin-right for double-sided documents. |
| margin-outside | 0.875in |
Open-edge margin — right on recto, left on verso. |
| bleed | 3mm · 0.125in |
Extends the printable area beyond the trim. Use with marks. |
| marks | crop · cross · crop cross · none |
Adds crop marks and/or registration crosshairs outside the page boundary. |
@page selectors and pseudo-classes
| Selector | Targets | Example |
|---|---|---|
| @page | All pages | Default page geometry — applies to all pages not matched by a more specific rule. |
| @page :left | Verso pages (even numbers) | Different running header for left-hand pages. |
| @page :right | Recto pages (odd numbers) | Different running header for right-hand pages. |
| @page :first | First page of the document | Title page or cover — may suppress running headers. |
| @page :blank | Intentionally blank pages (inserted by break-before: right) | Suppress content on blank verso pages. Support in Paged.js is partial — test the specific version. |
| @page name | Elements with page: name |
Named page types: @page chapter-opener { … } |
| @page name:left | Verso pages of the named type | Named page combined with :left or :right pseudo-class. |
Margin boxes
| Box name | Position |
|---|---|
| @top-left-corner | Top-left corner of the page |
| @top-left | Left portion of the top margin |
| @top-center | Centre of the top margin — most used for running headers |
| @top-right | Right portion of the top margin |
| @top-right-corner | Top-right corner |
| @bottom-left | Left portion of the bottom margin — outer folio on verso |
| @bottom-center | Centre of the bottom margin — centred folio |
| @bottom-right | Right portion of the bottom margin — outer folio on recto |
| @bottom-outside | Outer-edge portion of the bottom margin — automatically left on verso, right on recto |
| @left-top · @left-middle · @left-bottom | Left margin, split into thirds vertically |
| @right-top · @right-middle · @right-bottom | Right margin, split into thirds vertically |
| @footnote | Footnote area at the foot of the content area — used with float: footnote |
String set and counters
| Property / function | Usage |
|---|---|
| string-set | string-set: chapter-title content(text) — captures an element's text content into a named string for use in margin boxes. |
| string() | content: string(chapter-title) — retrieves a captured string. Optional second argument: first, last, start (default). Use in margin box content declarations. |
| counter(page) | content: counter(page) — current page number. Counter styles: decimal (default), lower-roman, upper-roman, lower-alpha, etc. |
| counter-reset | counter-reset: page 1 on the main body element — resets the page counter to 1 at the start of the main body, enabling front-matter roman numerals. |
| ::footnote-call | Pseudo-element that generates the superscript footnote marker in the text. |
| ::footnote-marker | Pseudo-element that generates the marker at the start of the footnote in the footnote area. |
Break and flow properties
| Property | Key values | Notes |
|---|---|---|
| break-before | page · right · left · avoid · auto |
Forces or avoids a page break before the element. right ensures the new page is recto; inserts a blank verso if needed. |
| break-after | page · right · left · avoid · auto |
Forces or avoids a page break after the element. |
| break-inside | avoid · avoid-page · auto |
Prevents page (or column) breaks within the element. Use on figures, callout boxes, table rows, and blockquotes. |
| widows | 2 · 3 |
Minimum lines of a paragraph at the top of the next page. Apply to p. |
| orphans | 2 · 3 |
Minimum lines of a paragraph at the bottom of the current page. Apply to p. |
| page | name | page: chapter-opener — assigns an element to a named page type. Forces a page break at the element boundary. |
| float: footnote | — | Moves the element to the page's footnote area. Requires appropriate ::footnote-call and ::footnote-marker rules and @page { @footnote { … } }. |
Current documentation
Paged.js is under active development. For the current list of supported properties and known limitations, consult the official documentation at pagedjs.org/documentation and the Paged.js GitHub repository. The browser you use matters: Chrome and Chromium-based browsers produce the most reliable output. Test your specific document in the browser version you plan to use for production.
Recommended Typefaces
Typefaces suitable for the document types in this book, organised by category and available through Google Fonts under open licences unless otherwise noted.
The following typefaces have been selected for their reading performance, their OpenType feature coverage, their availability under open licences, and their suitability for the print output that Paged.js produces. All are available as variable fonts or with multiple weight variants. All are tested against the CSS Paged Media context.
Serif typefaces — for body text and display
Sans-serif typefaces — for UI elements, labels, and captions
Monospace typefaces — for code blocks and technical content
Pairing guidance
Successful typeface pairing rests on contrast of kind and harmony of proportion. The most reliable pairs combine a humanist or transitional serif for body text with a geometric or humanist sans-serif for labels and UI elements. Both should share a similar x-height and text colour (visual weight at body size), so that the overall texture of the page remains consistent even where the typeface changes.
Avoid pairing two serifs (EB Garamond body + Playfair Display headings) except at very different sizes, where the contrast is clear. Avoid pairing a serif with a grotesque sans-serif (like Helvetica or Arial) — the mechanical neutrality of a grotesque clashes with the humanist character of a reading-optimised serif. Geometric sans-serifs (Inter, Outfit, DM Sans) pair more naturally with humanist serifs because both share a similar underlying design philosophy.
Further Reading
Books, articles, and resources that go deeper into the subjects this book has introduced. Organised by topic; annotated to explain what each offers and who it is for.
Typography — theory and history
The most authoritative general work on typography in English. Dense with historical detail, specific in its technical guidance, and beautifully set. Not a CSS book — it is about type itself, in all media. Read it slowly and with a dictionary. Chapter 2 (Shaping the Page) and Chapter 5 (Choosing and Combining Type) are the most directly applicable to the work in this book. Webtypography.net adapts Bringhurst's principles specifically for the web.
The most accessible survey of typographic thinking currently in print. Covers letterform anatomy, type classification, spacing, and grid — with strong visual examples and exercises. Closer to a design school textbook than Bringhurst; less historical depth but more immediately actionable for someone building the foundations described in Parts One and Two of this book.
Ninety pages that trace the history of typography from the handpress through to digital type. Exceptionally well written for the length. Provides the historical context that makes the technical choices in this book legible as part of a longer tradition rather than arbitrary convention.
The most practically useful book on CSS typography for web contexts. Covers font loading, variable fonts, OpenType features, and typographic rhythm in CSS with the specificity this book sometimes defers to it on. Complements the typographic chapters of this book — where this book focuses on print output, Rutter focuses on screen; the underlying principles are the same.
Design fundamentals and layout
The foundational text on systematic grid design. Technical, precise, and occasionally austere — but the most rigorous account of why grids work and how to construct them. The diagrams showing how different column counts and module sizes produce different compositional possibilities are worth the price of the book. Directly relevant to Part Three of this book.
Tschichold's collected essays on book design, including the foundational "The Proportion of the Book" in which he documents the Van de Graaf canon and its geometric derivation. The most precise historical account of the classical margin proportions discussed in Chapter 14. The essay "On Typography" remains the best short statement of why typographic discipline matters.
The most accessible introduction to the four core design principles (Contrast, Repetition, Alignment, Proximity) that underlie the visual design guidance in Part One of this book. Before/after examples on every other page; exercises at the end of each chapter. Essential for readers who came to this book primarily through a technical interest in CSS rather than a design background.
CSS and web standards
The comprehensive reference for CSS. Covers every property in the specification with precision and clarity. Not a reading book — it is a reference. For the CSS Grid properties in Part Three and the cascade behavior described in Chapter 25, this is the most reliable authority outside the W3C specification itself.
The authoritative specification for the properties implemented by Paged.js. Technical and precise; not an introductory read. Essential for understanding the boundary between what Paged.js does and does not implement, and for understanding edge cases that the documentation and this book do not cover. The CSS Generated Content for Paged Media specification (w3.org/TR/css-gcpm-3) covers string sets, footnotes, and running headers.
A methodical approach to CSS layout patterns, with an emphasis on algorithmic, intrinsic CSS rather than fixed values. The Stack, Cluster, Sidebar, and Center layouts covered at every-layout.dev are directly applicable to the component and layout patterns in this book. Available online with interactive examples.
Editorial design and print production
A visual survey of grid-based and non-grid-based editorial design, with hundreds of documented examples. More accessible and more visually rich than Müller-Brockmann; less theoretically rigorous. The "Breaking" section — showing how effective editorial design deliberately violates the grid for compositional purposes — is directly relevant to Chapter 22 on editorial layouts.
Despite the tool-specific title, the chapters on color management, PDF specification, preflight, and preparing files for print are tool-agnostic and directly applicable to the print output workflow in Chapter 19. The treatment of color spaces, bleed, and PDF/X standards is clear and practically oriented.
Online resources
The complete HTML+CSS source for the sample book developed across Parts Two–Four of this text. Includes all seven CSS layers, the full index.html, package.json build configuration, and a detailed README. Open index.html in Chrome with Paged.js loaded for a live preview; run npm run build to generate a print-ready PDF. The CSS decisions in each file correspond directly to the chapters where they are explained: tokens (Chapter 8), layout (Chapters 13–14), typography (Chapters 9–11), page rules (Chapters 16–17), break controls (Chapter 18), and print production (Chapter 19).
The official documentation, including a cookbook of common patterns and a community forum. The GitHub repository's issue tracker is the most up-to-date source for known limitations and workarounds.
A browser-based tool that accepts any font file and produces a complete inventory of its OpenType features, variable axes, character coverage, and metadata. Essential for the work described in Chapter 10 on OpenType features — you cannot use a typeface's OpenType capabilities without first knowing what capabilities it has.
An interactive tool for generating typographic scales from a base size and a ratio. Directly applicable to the type scale work in Chapter 8. The accompanying essay "More Meaningful Typography" (available at alistapart.com) provides the rationale for proportional type scales more fully than Chapter 8 was able to do.
The most reliable and current reference for CSS Grid, Flexbox, and the associated layout properties. The interactive examples allow experimentation with grid template values directly in the browser. Used alongside the CSS Paged Media specification and this book, it answers most practical CSS questions that arise during document production.
Glossary
Typographic and CSS terms used in this book, defined precisely and cross-referenced to the chapters where they are discussed in full.
A – C
column-gap or gap. A gutter of at least 1em is required to prevent the reader's eye from accidentally continuing across to the next column.→ Chapter 15@page { marks: crop; }.→ Chapter 19D – F
::first-letter, float: left, and carefully calculated font-size and line-height values.→ Chapter 201em = the computed font-size of the element. Because em values compound when nested (a child element inherits the parent's font-size, then multiplies it), rem is generally preferred for type scale values in document CSS.→ Chapter 8content: counter(page) in a @page margin box.→ Chapter 17font-feature-settings: "kern" 1, "liga" 1, "onum" 1. The higher-level font-variant-* properties are preferred for legibility and cascade behaviour where they cover the needed feature.→ Chapter 10fr represents one fraction of the available space in the grid container after fixed-size tracks and gaps are accounted for. Used to create proportionally flexible column tracks: grid-template-columns: 2rem 1fr 6rem.→ Chapter 13G – L
font-kerning: auto or font-feature-settings: "kern" 1. Distinct from tracking.→ Chapter 9, Chapter 10line-height property; a unitless value (e.g., 1.76) is preferred as it scales proportionally with the element's font size.→ Chapter 9font-feature-settings: "liga" 1 or font-variant-ligatures: common-ligatures.→ Chapter 10font-variant-numeric: lining-nums or font-feature-settings: "lnum" 1.→ Chapter 10M – O
@page { @top-right { content: string(chapter-title); } }.→ Chapter 16, Chapter 17@page rule applied to specific elements using the page property. Allows different page geometry for different document sections — chapter openers can have a larger head margin, front matter can have roman numeral folios, back matter can have different running headers.→ Chapter 16font-variant-numeric: oldstyle-nums or font-feature-settings: "onum" 1.→ Chapter 10font-feature-settings and the font-variant-* family of properties.→ Chapter 10orphans CSS property, which specifies the minimum number of lines that must appear at the bottom of a page.→ Chapter 18P – R
@page rules.→ Chapter 17@page :right and @page :left.→ Chapter 14, Chapter 17html). Unlike em, rem does not compound through nested elements: 1rem always equals the root font size regardless of where it is used. The preferred unit for type scale custom properties in document CSS.→ Chapter 8string-set to capture titles from the content and string() to display them in @page margin boxes.→ Chapter 17S – Z
font-variant-caps: small-caps or all-small-caps.→ Chapter 10font-variant-numeric: tabular-nums or font-feature-settings: "tnum" 1.→ Chapter 10, Chapter 21letter-spacing. Tracking is appropriate for text set in all capitals or small capitals (where it is required) and for display text at large sizes. Tracking body text in mixed case is incorrect and reduces legibility. Distinct from kerning, which adjusts specific pairs.→ Chapter 9@page { size: … } declaration. Distinct from the media box (which includes the bleed) and the safe zone (which is inset from the trim).→ Chapter 19--text-base: 1.175rem; --text-lg: 1.65rem;) referenced throughout the stylesheet to ensure proportional consistency.→ Chapter 8font-weight, font-stretch, and font-variation-settings.→ Chapter 10, Chapter 11widows CSS property, which specifies the minimum number of lines that must appear at the top of a page after a page break within a paragraph.→ Chapter 18