A web page can be easy to read on screen and frustrating to print. Navigation fills the first page, a floating panel covers the article, and a small illustration becomes separated from its explanation.
Printing creates a different reading environment. There is no scrolling, hover interaction, or working navigation menu on paper.
A useful print stylesheet therefore begins with the reader’s purpose: what information must survive when the page becomes a physical or saved document?
Identify the printable content
For an instructional article, the essential material may include the title, publication information, steps, illustrations, and references.
For an event page, location and timing may matter more than promotional cards elsewhere on the screen.
List those requirements before hiding interface elements.
A generic rule that removes every header or footer can accidentally remove the document title, author, or contact information. Target the actual interface components that do not help the printed version.
Keep the decision connected to the page’s content model.
Apply styles specifically to print
MDN documents two common approaches: a stylesheet linked with media=”print” or rules inside an @media print block. The @page rule can control aspects of printed pages such as margins and orientation.
A small illustrative starting point is:
@media print {
.site-navigation,
.share-controls {
display: none;
}
.article {
max-width: none;
color: black;
background: white;
}
}
@page {
margin: 18mm;
}These selectors and measurements are examples, not universal defaults.
Apply them to the actual page structure and review the result in the browsers your audience uses.
Manage page breaks selectively
A short figure and its caption often belong together. A multi-page article cannot sensibly be treated as one indivisible block.
MDN describes break-inside as a control for how page, column, or region breaks behave within a generated box.
A targeted rule might be:
@media print {
.article-figure {
break-inside: avoid;
}
}Use it where the grouped content can reasonably fit on a page.
Inspect long captions and large figures separately. A rule expressing a preference does not remove the physical constraints of the paper.
Preserve meaning without interaction
Review elements whose meaning depends on the screen experience.
A chart identified only by color may become difficult to interpret in grayscale. A collapsed information panel may omit material the printed reader needs. A link labeled “click here” may provide little context once detached from the browser.
For each element, decide what the printed reader should receive.
This may involve visible labels, explanatory text, or a print-specific presentation of information already available on the page.
Do not assume that removing the interface automatically produces a complete document.
Test the output as a reader
Use print preview, then inspect a saved PDF or a representative paper copy.
Check the first page, every page boundary, and the final page. Look for clipped content, blank pages, isolated captions, and headings stranded away from their sections.
Test both short and long examples of the template.
Finally, compare the result with the original printable-content list. A clean appearance is useful only if the necessary information remains complete.
Good print CSS gives the page a second, intentional presentation suited to reading beyond the browser.
Sources: Sources: MDN: Printing · MDN: break-inside
