Print Styles and Reports

Print Styles and Reports

This is an application recipe, not a built-in UIF print component. Put these styles in the report route's stylesheet or theme. Use a dedicated, permission-checked report view for sensitive clinical content.

Prepare the document

Render saved values as text, including checkbox answers such as “Yes” or “No”; do not rely on an input's visible scroll area or a textarea to print a full answer. Include an appropriate document title, record reference, issue time, units, and report status. Use synthetic data when testing.

Exclude navigation and editing controls, but retain required context, warnings, and approval/signature information. Hiding data with print CSS is not access control: unauthorized content must never be rendered into the page.

<main class="report-print">
  <h1>Assessment report</h1>
  <p>Reference: DEMO-001 · Status: Draft</p>
  <section class="report-section">
    <h2>Observations</h2>
    <p>Example saved observation text.</p>
  </section>
  <button class="uif-btn report-no-print" type="button"
          onclick="window.print()">Print report</button>
</main>

Print stylesheet

@page { size: A4; margin: 15mm; }
@media print {
  .report-no-print { display: none !important; }
  .report-print {
    color: #000;
    background: #fff;
    font: 11pt/1.4 sans-serif;
    width: auto;
    max-width: none;
  }
  .report-print .uif-card {
    color: #000;
    background: #fff;
    box-shadow: none;
    border: 1px solid #777;
  }
  .report-print .uif-table-wrap,
  .report-print .uif-table-scroll {
    overflow: visible;
    max-height: none;
  }
  .report-print table { width: 100%; border-collapse: collapse; }
  .report-print th, .report-print td {
    color: #000;
    border: 1px solid #777;
    padding: 2mm;
    overflow-wrap: anywhere;
  }
  .report-print thead { display: table-header-group; }
  .report-print th { position: static !important; }
  .report-print tr { break-inside: avoid; }
  .report-print h2 { break-after: avoid; }
  .report-print p { orphans: 3; widows: 3; }
  .report-print .report-short-block { break-inside: avoid; }
}

Apply report-no-print to the host navigation and other non-report controls too. Do not apply break-inside: avoid to an entire multipage report: oversized blocks must be allowed to split. Repeated table headers and page-break handling vary by browser. Do not rely on background printing, browser-generated page numbers, or exact page count.

Verification

Test A4 and Letter, portrait and landscape where needed, grayscale, background graphics disabled, long notes, empty values, many rows, and a row longer than one page. Check that tables are not clipped, headings stay with content, and saved answers are complete. Compare browser print preview with any separate server PDF renderer; CSS support may differ. Do not automatically expose private URLs or download tokens in printed link text.