QuickieTool

How to save a web page as a PDF that is actually readable

By Muhammad Zaheer, QuickieTool6 min read

You find an article worth keeping, print it to PDF, and open the result. The first page is a navigation menu. The second is a cookie notice. The article begins somewhere on page three, one column is cut off at the right edge, and half the images are missing.

This is not the browser failing. It is doing exactly what the site told it to do, and the site was almost certainly not thinking about you when it did.

Websites have a separate print layout

A web page can carry an entirely different set of styling rules for print than for screen. Well-built sites use this to strip navigation, hide adverts, expand collapsed sections and set sensible margins, so printing produces a clean article.

Most sites do not bother. When no print rules exist, the browser prints the screen layout as it stands, which means the sidebar, the header, the sticky banner and the cookie notice all come along, laid out for a screen rather than a page.

That is why results vary so wildly between sites. It is not your settings. Some sites have done the work and some have not.

Why images go missing

Modern pages load images only as you scroll near them, which saves bandwidth for readers who never reach the bottom. If you print without scrolling through the whole article, the images further down were never fetched, and the printed page has gaps where they should be.

The fix is unglamorous and effective: scroll slowly to the bottom of the article first, wait for everything to appear, then scroll back to the top and print. You are simply making the page load itself before you capture it.

  • Navigation, sidebars and footers included: the site has no print styles
  • Missing images: content further down was never loaded before printing
  • Content cut off at the right: a fixed-width layout wider than the page
  • Cookie banner on page one: dismiss it before printing
  • Everything on one enormous page: the layout suppressed page breaks

Convert an HTML file into a clean PDF. Free, and your file is deleted immediately after processing.

Convert HTML to PDF

Getting a clean capture

  1. Dismiss the cookie banner and any newsletter popup before you start.
  2. Scroll to the very bottom of the article, then back to the top, so every image has loaded.
  3. Look for a print or reader view. Many sites and browsers offer one, and it removes the furniture for you.
  4. In the print dialog, switch off headers and footers unless you want the URL stamped on every page.
  5. Preview before saving, and change the scale if the right edge is being cut off.

Reader view deserves particular mention. It reformats the article into plain text and images with no layout at all, which is very close to ideal for archiving. If the browser offers it, it is almost always the better starting point.

Scale and paper size

Content cut off at the right edge is a width mismatch: the layout is wider than the paper. Reducing the scale to eighty or ninety percent usually resolves it, and switching to landscape helps with wide tables.

Be careful with the fit-to-width option in some dialogs. It can shrink a long article to unreadably small text in pursuit of fitting the widest element on the page, which is rarely what you want.

When printing is the wrong approach

If you want the text rather than the appearance, copying the article into a document gives a cleaner result with far less effort, and you can format it as you like.

If you want a faithful record of how a page looked at a moment in time — for a dispute, a claim, or evidence of a published price — a print to PDF is reasonable but note that it carries no proof of when it was captured. For anything consequential, use an archiving service that records the date independently, and keep the URL alongside the file.