All HTML guides
Publishing7 min read
How to Make an HTML Page Print and Export Cleanly
Add print styles that preserve the document hierarchy, avoid awkward page breaks, and remove interface-only controls.
The short version
Printable HTML should feel like the same document adapted to paper, not a screenshot of the interface.
01
Decide what belongs on paper
Navigation, toolbars, floating actions, and comment composers usually do not belong in a printed document. Titles, dates, captions, source links, and status notes often do. Mark interface-only elements with a shared class instead of writing one-off selectors.
css
@media print {
.screen-only,
nav,
[data-editor-toolbar] {
display: none !important;
}
body {
color: #111;
background: #fff;
font-size: 11pt;
}
h2, h3 { break-after: avoid; }
table, figure, pre { break-inside: avoid; }
a[href]::after { content: " (" attr(href) ")"; }
}02
Control breaks without over-controlling them
Use break-inside and break-after as preferences, not guarantees. The browser still has to fit content onto physical pages. Avoid fixed-height containers and screen-sized layouts that clip when paginated.
03
Preview real output
- Check common paper sizes and margins.
- Test tables that span more than one page.
- Confirm backgrounds are not required for meaning.
- Verify links remain understandable in black and white.
- Export a PDF and inspect selectable text and page order.