Skip to content
Hypermedia Components

Print

Business pages get printed: the order detail for the courier, the search result for the meeting, the ticket for the audit binder. hc.print.css is an opt-in stylesheet that makes the default print output respectable without any per-page work.

<link rel="stylesheet" href="https://unpkg.com/@hypermedia-components/core/dist/hc.print.css">

or, bundling:

@import '@hypermedia-components/core/css/print';

Everything lives inside @media print in the last cascade layer — nothing changes on screen, and on paper the rules win over component styling by layer order alone.

The doctrine

Section titled “The doctrine”
  • Paper shows the record, not the app. Interactive chrome hides: shell navigation and header, toolbars, menubars, buttons and button groups, pagination, toasts, drawers, tooltips, hovercards, the command palette, skeletons, spinners, htmx indicators, and closed dialogs.
  • Data survives intact. Scroll areas un-clip, sticky datagrid headers go static, truncated cells un-ellipsize and wrap, <thead> repeats across pages, and rows, cards, fields, alerts, accordion items, and timeline items refuse to split across a page break.
  • Ink is honest. Shadows drop, the page prints light regardless of the active data-theme, tables get black hairlines, and status containers (cards, alerts, badges, chips) keep a thin border so meaning survives grayscale.

What it deliberately does not do

Section titled “What it deliberately does not do”
  • State attributes stay authoritative: [hidden] content, closed <details>, closed dialogs, and inactive tab panels do not print — print shows what the user saw, not what the server knows. Render a dedicated print view server-side when the paper needs more than the screen showed.
  • No URL expansion after links — business documents read better without inline hrefs.
  • No page headers/footers — those belong to @page margin boxes and the app’s own print view.

Triggering print

Section titled “Triggering print”

Ctrl/Cmd+P always works, but the order detail wants a visible Print button. HTML has no declarative print, and onclick="window.print()" is inline script — dead under a strict Content-Security-Policy. Put data-hc-print on the button and installPrint() calls window.print() for it:

<button class="hc-button" type="button" data-hc-print>
  <span class="hc-icon" aria-hidden="true">⎙</span> Print
</button>

The button itself never reaches paper: this stylesheet hides .hc-button on print. Without JavaScript it does nothing and the keyboard shortcut remains — the honest degradation. Whole-page only: a page that should print differently from the screen is a print view the server renders (see above), not a client-side excerpt.

Section titled “Related”
  • Themes — the screen-side data-theme axis this file overrides on paper.
  • Datagrid — the component that benefits most.