Page Break Notice - Everyday Interface Patterns

A static page break preview notice shows Weekly tasks, break before completed tasks, 2 pages, and Layout preview status.

Program

Page break previews should show where content will divide without generating PDFs or opening print preview.

page_break_preview_notice.html

Visuals: captured from real browser rendering

<section class="break-preview" aria-labelledby="break-preview-title"><h2 id="break-preview-title">Page break notice</h2><dl>
  <div><dt>Document</dt><dd>Weekly tasks</dd></div>
  <div><dt>Break</dt><dd>Before completed tasks</dd></div><div><dt>Pages</dt><dd>2</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Layout preview</span></dd></div></dl>
  <p class="check">Learner check: the page break is visible without making a PDF.</p>
  <p class="note">Static page break preview only; no print dialog, window.print, PDF generation, file download, print service, storage, route, API, network, script, event listener, form submit, analytics, timer, or live printing runs.</p></section>
<style>
  .break-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .break-preview dl { display: grid; gap: 8px; margin: 0; }
  .break-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .break-preview dt { color: #475569; }
  .break-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the page break notice.
The section is labelled by its visible heading.
Show document row.
The document name is exact pinned data.
Show break and pages rows.
The break position and page count are exact pinned data.
Render layout-preview status.
The status badge says this is a layout preview.
Check page break readback.
The check says the page break is visible without making a PDF.
Check page break honesty.
Document, break, pages, status, and no live printing.

step flow step(1) labels the source, step(2) shows the document, step(3) shows break and pages rows, step(4) shows layout-preview status, step(5) checks the page-break readback, and step(6) checks the honesty note.

break readback The section heading names the page break notice surface.

break rows Document, Break, Pages, and Status values are exact pinned data.

no live print layout The lesson should not imply print dialogs, window.print, PDF generation, file downloads, print services, storage, routes, APIs, networks, scripts, event listeners, form submits, analytics, timers, or live printing.