Page Breaks & CSS Paged Media

PDF Creator uses WeasyPrint, which has first-class support for the CSS Paged Media specification. This covers page size, margins, headers, footers, and fine-grained page break control — all via standard CSS.

Page Size & Margins

@page {
  size: A4 portrait;
  margin: 20mm 15mm;
}

/* Landscape */
@page landscape {
  size: A4 landscape;
  margin: 15mm 20mm;
}

Supported size values: A4, A3, A5, letter, legal, or explicit dimensions like 210mm 297mm.

Page Breaks

Force a break before or after an element

.chapter {
  break-before: page;   /* always start on a new page */
}

.section-end {
  break-after: page;
}

Prevent breaking inside an element

.keep-together {
  break-inside: avoid;  /* never split across pages */
}

table {
  break-inside: avoid;
}

Keep headings with their content

h1, h2, h3 {
  break-after: avoid;   /* don't leave a heading alone at the bottom */
}

Orphans & Widows

p {
  orphans: 3;   /* min lines at bottom of page */
  widows: 3;    /* min lines at top of page */
}

Named Pages

Assign different @page rules to different sections:

@page cover {
  margin: 0;
  background: #1a1a2e;
}

@page content {
  size: A4;
  margin: 25mm 20mm;
}

.cover-section {
  page: cover;
  break-after: page;
}

.content-section {
  page: content;
}

Running Headers & Footers

Use position: running() to pin elements to every page:

@page {
  margin-top: 30mm;
  margin-bottom: 25mm;

  @top-center {
    content: element(header);
  }

  @bottom-right {
    content: counter(page) " / " counter(pages);
  }
}

.page-header {
  position: running(header);
  font-size: 9pt;
  color: #888;
  border-bottom: 1px solid #eee;
  padding-bottom: 4mm;
}

Place the element once in HTML — it appears on every page:

<div class="page-header">Confidential — Systaro Internal</div>
<div class="content-section">
  <h1>Report</h1>
  ...
</div>

Page Counters

@page {
  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 8pt;
  }
}

Reset counter on named pages:

@page chapter {
  counter-reset: page 1;
}

Complete Example

<!DOCTYPE html>
<html>
<head>
<style>
  @page {
    size: A4;
    margin: 25mm 20mm 20mm;

    @top-left {
      content: "Systaro — Confidential";
      font-size: 8pt;
      color: #aaa;
    }

    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-size: 8pt;
    }
  }

  @page cover {
    margin: 0;
    @top-left { content: none; }
    @bottom-right { content: none; }
  }

  .cover {
    page: cover;
    break-after: page;
    height: 297mm;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
    color: white;
  }

  h1 { break-after: avoid; }
  h2 { break-after: avoid; }

  .section { break-before: page; }

  table { break-inside: avoid; }

  p { orphans: 3; widows: 3; }
</style>
</head>
<body>
  <div class="cover">
    <h1>Annual Report 2026</h1>
  </div>

  <div class="section">
    <h1>Executive Summary</h1>
    <p>...</p>
  </div>

  <div class="section">
    <h1>Financial Overview</h1>
    <table>...</table>
  </div>
</body>
</html>