# Prepare an HTML report for both phone reading and printing

Canonical: https://githtml.com/guides/print-friendly-html-reading-artifact
Published: 2026-09-26
Publisher: WaveTech LLC / gitHtml

Keep the screen document as the primary reading artifact, then add print-specific CSS for margins, colors, and unnecessary navigation. Review the actual print preview separately. A mobile-friendly page does not automatically paginate well, and a print layout should not force fixed paper dimensions onto the screen version.

## Keep content shared, presentation separate

Maintaining two independently edited reports invites contradictory dates, numbers, and conclusions. Prefer one semantic HTML body with a print stylesheet that changes presentation. The phone version can remain fluid, while printing removes large navigation blocks and adjusts spacing. Both versions should retain the same warnings, source notes, and evidence.

Be cautious about hiding elements based only on their visual role. A callout may look like a decorative panel but contain an essential limitation. An interactive chart may be unnecessary in print, yet its underlying values still matter. Make the static text or table complete before deciding which embellishments to omit from the paper output.

## Plan for page boundaries

Printed pages introduce constraints that continuous scrolling does not. A heading can become stranded at the bottom, a table may span several pages, and a large diagram can be clipped or reduced excessively. Use page-break controls sparingly and inspect the result with representative long content. Applying keep-together rules to every section can create large blank areas.

Do not assume background colors will be reproduced exactly. Use visible labels and borders where distinctions matter, and preserve sufficient contrast if the document is printed in grayscale. External link destinations may be useful on paper, but printing every long tracking URL can overwhelm the layout. Consider a concise source list with recognizable titles.

## Review the output path explicitly

Print behavior depends on the browser and export path. The following CSS is a starting point, not a guarantee that every renderer will paginate identically. Test the actual environment you intend to use and identify any limitations when sharing the result. Do not promise a print control inside gitHtml unless the available app interface actually provides it.

1. Inspect a print preview containing the longest table and code sample.
2. Check whether collapsed appendices are included by the chosen renderer.
3. Confirm that warnings remain visible without background colors.
4. Keep a revision identifier in the content so paper and screen copies can be compared.

````css
@media print {
  body { max-width: none; color: #000; background: #fff; }
  nav { display: none; }
  h2, h3 { break-after: avoid; }
  figure { break-inside: avoid; }
  pre { white-space: pre-wrap; }
}
````

## Sources and further reading

- [MDN: printing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Printing)

## Related guides

- [Read a repository HTML document comfortably on iPhone](https://githtml.com/guides/read-repository-html-on-iphone)
- [Build a single-file HTML document that travels well](https://githtml.com/guides/portable-single-file-html-document)
- [Set a mobile viewport for an HTML report](https://githtml.com/guides/mobile-viewport-for-html-reports)
- [Add useful section navigation to a long HTML document](https://githtml.com/guides/table-of-contents-for-long-html)

Editorial approach: https://githtml.com/guides/about