Print Preview Patterns

Receipt Preview

A static print-ready receipt preview shows Order #1042, July 8, 2026 date, $38.50 total, and Print preview only status.

Program

Receipt previews should show the printable information before any print dialog or export action runs.

printable_receipt_preview.html
Visuals: captured from real browser rendering
<section class="receipt-preview" aria-labelledby="receipt-preview-title"><h2 id="receipt-preview-title">Receipt preview</h2><dl>
  <div><dt>Order</dt><dd>Order #1042</dd></div>
  <div><dt>Date</dt><dd>July 8, 2026</dd></div><div><dt>Total</dt><dd>$38.50</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Print preview only</span></dd></div></dl>
  <p class="check">Learner check: the receipt is visible before any print action starts.</p>
  <p class="note">Static receipt 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>
  .receipt-preview { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .receipt-preview dl { display: grid; gap: 8px; margin: 0; }
  .receipt-preview dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .receipt-preview dt { color: #475569; }
  .receipt-preview dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

  1. Label the receipt preview.

    The section is labelled by its visible heading.
    The section is labelled by its visible heading.

  2. Show order row.

    The order is exact pinned data.
    The order is exact pinned data.

  3. Show date and total rows.

    The date and total are exact pinned data.
    The date and total are exact pinned data.

  4. Render print-preview status.

    The status badge says this is print preview only.
    The status badge says this is print preview only.

  5. Check receipt readback.

    The check says the receipt is visible before any print action starts.
    The check says the receipt is visible before any print action starts.

  6. Check receipt honesty.

    Order, date, total, status, and no live printing.
    Order, date, total, status, and no live printing.
step flow step(1) labels the source, step(2) shows the order, step(3) shows date and total rows, step(4) shows print-preview-only status, step(5) checks the receipt readback, and step(6) checks the honesty note.
receipt readback The section heading names the receipt preview surface.
receipt rows Order, Date, Total, and Status values are exact pinned data.
no live printing 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.