Usage

Start with these tokens when customizing print output:

--page-width, --page-height, and --page-margin-* for page size and margins

--page-top-*-content and --page-bottom-*-content for running headers/footers

--page-margin-font-family and --page-margin-font-size for margin box typography

--page-border-* tokens for header/footer rules

--page1-* overrides to customize the first page

Margin box content can reference injected metadata variables like --document-title, --document-authors, and --document-date.

Tokens

Page Size and Margins

Token	Description	Default Value
`--page-width`	Page width	`210mm`
`--page-height`	Page height	`297mm`
`--page-margin-vertical`	Vertical margins (top/bottom)	`1.5cm`
`--page-margin-horizontal`	Horizontal margins (left/right)	`2cm`
`--page-margin-top`	Top margin	`var(--page-margin-vertical)`
`--page-margin-right`	Right margin	`var(--page-margin-horizontal)`
`--page-margin-bottom`	Bottom margin	`var(--page-margin-vertical)`
`--page-margin-left`	Left margin	`var(--page-margin-horizontal)`
`--page-content-height`	Computed content height (read by JS)	`calc(var(--page-height) - var(--page-margin-top) - var(--page-margin-bottom) - var(--page-padding-top) - var(--page-padding-bottom))`
`--page-content-width`	Computed content width (read by JS)	`calc(var(--page-width) - var(--page-margin-left) - var(--page-margin-right))`

Page Padding

Padding controls the gap between the main content and the margin boxes.

Token	Description	Default Value
`--page-padding`	Base padding above/below content	`0.5cm`
`--page-padding-top`	Top padding override	`var(--page-padding)`
`--page-padding-bottom`	Bottom padding override	`var(--page-padding)`

Margin Box Styling

Token	Description	Default Value
`--page-margin-font-family`	Font family for margin boxes	`var(--font-family-sans)`
`--page-margin-font-size`	Font size for margin boxes	`8pt`
`--page-margin-line-height`	Line height for margin boxes	`var(--line-height-tight)`
`--page-margin-color`	Text color for margin boxes	`var(--text-color-secondary)`
`--page-margin-padding`	Padding inside margin boxes	`0`

Margin Box Content

Token	Description	Default Value
`--page-top-left-content`	Top-left content	`none`
`--page-top-center-content`	Top-center content	`none`
`--page-top-right-content`	Top-right content	`none`
`--page-bottom-left-content`	Bottom-left content	`none`
`--page-bottom-center-content`	Bottom-center content	`none`
`--page-bottom-right-content`	Bottom-right content	`none`

First Page Content

Token	Description	Default Value
`--page1-top-left-content`	First page top-left content	`var(--page-top-left-content)`
`--page1-top-center-content`	First page top-center content	`var(--page-top-center-content)`
`--page1-top-right-content`	First page top-right content	`var(--page-top-right-content)`
`--page1-bottom-left-content`	First page bottom-left content	`var(--page-bottom-left-content)`
`--page1-bottom-center-content`	First page bottom-center content	`var(--page-bottom-center-content)`
`--page1-bottom-right-content`	First page bottom-right content	`var(--page-bottom-right-content)`

Margin Box Borders

Level 1: Global Border Tokens

Token	Description	Default Value
`--page-border-style`	Border style for all margins	`solid`
`--page-border-color`	Border color for all margins	`var(--border-color-default)`
`--page-border-narrow`	Border width for center boxes	`initial`
`--page-border-wide`	Border width for left/center/right boxes	`initial`
`--page-border-full`	Border width including corner boxes	`initial`

Level 2: Horizontal Borders

Token	Description	Default Value
`--page-horizontal-border-style`	Border style for top/bottom	`var(--page-border-style)`
`--page-horizontal-border-color`	Border color for top/bottom	`var(--page-border-color)`
`--page-horizontal-border-narrow`	Narrow border for top/bottom	`var(--page-border-narrow)`
`--page-horizontal-border-wide`	Wide border for top/bottom	`var(--page-border-wide)`
`--page-horizontal-border-full`	Full border for top/bottom	`var(--page-border-full)`

Level 3: Specific Top/Bottom Borders

Token	Description	Default Value
`--page-top-border-style`	Border style for top margins	`var(--page-horizontal-border-style)`
`--page-top-border-color`	Border color for top margins	`var(--page-horizontal-border-color)`
`--page-top-border-narrow`	Narrow border for top margins	`var(--page-horizontal-border-narrow)`
`--page-top-border-wide`	Wide border for top margins	`var(--page-horizontal-border-wide)`
`--page-top-border-full`	Full border for top margins	`var(--page-horizontal-border-full)`
`--page-bottom-border-style`	Border style for bottom margins	`var(--page-horizontal-border-style)`
`--page-bottom-border-color`	Border color for bottom margins	`var(--page-horizontal-border-color)`
`--page-bottom-border-narrow`	Narrow border for bottom margins	`var(--page-horizontal-border-narrow)`
`--page-bottom-border-wide`	Wide border for bottom margins	`var(--page-horizontal-border-wide)`
`--page-bottom-border-full`	Full border for bottom margins	`var(--page-horizontal-border-full)`

First Page Border Tokens

First-page border tokens mirror the regular hierarchy:

Level 1: --page1-border-*

Level 2: --page1-horizontal-border-*

Level 3: --page1-top-border-* and --page1-bottom-border-*

Page Layout Tokens

Token	Description	Default Value
`--page-display`	Page container display	`flex`
`--page-flex-direction`	Page container direction	`column`
`--page-section-gap`	Gap between page sections	`0`
`--page-justify-content`	Vertical alignment of content	`flex-start`
`--page-align-items`	Horizontal alignment of content	`stretch`

Available Content Variables

Stencila injects metadata variables into the document <head> that can be used in margin box content:

Variable Name	Description	Example
`--document-title`	Main document title	"Climate Change Impacts"
`--document-authors`	Document authors	"Smith, J. & Jones, M."
`--document-doi`	Digital Object Identifier	"10.1234/example.5678"
`--document-date`	Publication or modification date	"2025-09-27"

Examples

Basic Page Numbers

:root {
  --page-bottom-right-content: counter(page);
}

Academic Article Headers

:root {
  --page-top-left-content: var(--document-authors);
  --page-top-right-content: var(--document-title);
  --page-bottom-left-content: "DOI: " var(--document-doi);
  --page-bottom-right-content: "Page " counter(page);

  --page-border-wide: 1px;
}

Border Span Examples

Narrow Border (Center Only)

:root {
  --page-border-narrow: 1px;
  --page-top-center-content: var(--document-title);
  --page-bottom-center-content: counter(page);
}

Full Border (Including Corners)

:root {
  --page-border-full: 1px;
  --page-top-center-content: var(--document-title);
  --page-bottom-center-content: counter(page);
}

First Page Different

:root {
  /* Regular page margins */
  --page-top-left-content: var(--document-authors);
  --page-top-right-content: var(--document-title);
  --page-bottom-right-content: counter(page);

  /* Override just the first page */
  --page1-top-left-content: none;
  --page1-top-right-content: none;
  --page1-bottom-right-content: none;

  /* Remove first-page borders */
  --page1-border-wide: initial;
}

Different Left/Right Pages

@media print {
  @page :left {
    @top-left {
      content: counter(page);
      font-family: var(--page-margin-font-family);
      font-size: var(--page-margin-font-size);
    }

    @top-right {
      content: string(article-title);
      font-family: var(--page-margin-font-family);
      font-size: var(--page-margin-font-size);
      font-style: italic;
    }
  }

  @page :right {
    @top-left {
      content: string(section-title);
      font-family: var(--page-margin-font-family);
      font-size: var(--page-margin-font-size);
      font-style: italic;
    }

    @top-right {
      content: counter(page);
      font-family: var(--page-margin-font-family);
      font-size: var(--page-margin-font-size);
    }
  }
}

Tips

Margin boxes: Margin content tokens default to none, so set only the boxes you want (--page-top-*-content, --page-bottom-*-content).

Page size: Use --page-width and --page-height to switch between formats like A4 and Letter.

First page overrides: Use --page1-* tokens to change the title page without custom selectors.

Borders: Use the base --page-border-* tokens for global rules, then override per-box only when needed.