Controlling Page Breaks & Fragmentation

Technical Deep Dive & Specifications

1. Modern CSS Fragmentation vs. Legacy page-break-*

The W3C replaced the legacy CSS 2.1 page-break-* properties with the generalized CSS Fragmentation Module Level 3. Modern break-* properties control fragmentation across physical pages, multi-column columns, and multi-region regions.

[!IMPORTANT] To support 100% of PDF generators and legacy browser rendering engines, senior engineers write dual-declaration fallbacks:

.keep-together {
  /* Legacy fallback */
  page-break-inside: avoid;
  /* Modern standard */
  break-inside: avoid;
}

2. Fragmentation Value Matrix & Semantics

• auto: The default. Breaks are inserted if natural document flow overflows the page boundary.
• avoid / avoid-page: Prohibits breaks. If the entire element cannot fit in the remaining space of the current page, the entire element is moved to the top of the next page.
• page / always: Unconditionally forces a break, pushing the target to the start of a fresh page.
• left / verso: Forces 1 or 2 page breaks so that the element starts on an even/left page.
• right / recto: Forces 1 or 2 page breaks so that the element starts on an odd/right page (standard for book chapter openings).

3. Repeating Table Headers (<thead>) Across Pages

One of the most powerful features of browser print engines is the automatic repetition of table headers when a data table spans multiple physical sheets:

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  /* Instructs print engine to repeat header on every new page fragment */
  display: table-header-group;
}

tfoot {
  /* Repeats footer summary at bottom of every page fragment */
  display: table-footer-group;
}

tbody tr {
  /* Prevents a single row's text from being split horizontally */
  break-inside: avoid;
  page-break-inside: avoid;
}

PAGE 1                                  PAGE 2 (Continued Table)
+-----------------------------------+   +-----------------------------------+
| TABLE TITLE                       |   | TABLE (Continued)                 |
| +-----------+----------+--------+ |   | +-----------+----------+--------+ |
| | Item Name | Quantity | Price  | |   | | Item Name | Quantity | Price  | | <- Repeated THEAD!
| +-----------+----------+--------+ |   | +-----------+----------+--------+ |
| | Server A  | 4        | $4,000 | |   | | Server D  | 12       | $9,600 | |
| | Server B  | 8        | $6,400 | |   | | Server E  | 1        | $1,200 | |
| | Server C  | 2        | $1,800 | |   | +-----------+----------+--------+ |
+-----------------------------------+   +-----------------------------------+

💻 Interactive Code Playground

Below is a complete, runnable HTML document demonstrating multi-page section breaks, atomic cards protected from fragmentation, and multi-page repeating table headers.

Starter Code

Line-by-Line Code Breakdown

• Lines 28–31 (.chapter-break): Combines break-before: page; and page-break-before: always; to unconditionally force Section 2 onto a new physical sheet.
• Lines 34–37 (.avoid-slice): Applies break-inside: avoid; to cards and signature blocks, ensuring that if an element cannot fit at the bottom of the current sheet, the layout engine shifts the entire block to the next page.
• Lines 40–42 (thead { display: table-header-group; }): Ensures that if the equipment ledger table spans across multiple pages, the browser automatically clones the header row at the top of every subsequent page fragment.
• Lines 48–51 (tr { break-inside: avoid; }): Prevents individual table rows from having their text sliced horizontally between page margins.

Expected Browser Render Output

• On Screen: A continuous scrolling document containing Section 1, Section 2, a styled data table, and a signature block.
• In Print Preview (Cmd/Ctrl + P):
  • Page 1 contains Section 1 and the SLA card.
  • Page 2 begins cleanly with Section 2, the ledger table (with full headers), and the intact signature box resting comfortably without horizontal tears.