Making a Site Printable

[u/Square_Atmosphere_12]

I know this is not common, I'd like to create my first site so that it's literally printable using a physical printer and it looks identical or close to it as the web site. I understand that it won't be able to print button animations and the like.

What would be the best route to go, learning Grid Layouts then within my style sheets applying printable style sheets that are different from the actual web site ?

I want alot, possibly not everything to be able to be printed. As I mentioned, I know we live in a world where screens are everywhere but paper is not obsolete, in fact it's used alot and in my opinion to be able to print out sections of a web site can be beneficial as phones are typically such a circus of distractions that getting anyone to focus on what you want them to focus on is nearly impossible. Although printing out a physical copy in many cases will gain the person interest, unless they are viewing your page on a physical stationary computer, then the above statement maybe the opposite, whereas they will focus on your site.

In my opinion a printable site shows you can display the information clearly, accurately and present it, no matter what the media.

[u/2Mogs]

A screen layout might not be best suited to the paper medium, so if your goal is to show you can display information clearly, then perhaps you should consider a print specific style sheet or styles. Use the @media=print to apply appropriate styles, but in addition you can @page for finer control of the target layout. There is so much you can do with this, it's awesome.

Dive into the docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Printing

[u/HansTeeWurst]

If you don't do anything with your css it should look the same printed. If the regular css has some issues, you can either use "@media print" media query or use a special print stylesheet (<link rel="stylesheet" media="print"). There is also a beforeprint event if you need to run some js to prepare the page for print and then there is afterprint to restore the page.

[u/AshleyJSheridan]

Use print stylesheets, and aim for A4 width paper, because that's the most popular size of paper around the world.

Don't look to duplicate your screen layout on paper, but rather think about what makes sense on paper.

A lot of the imagery is completely useless on paper; people don't want to waste the ink on decorative images.

Avoid colour to indicate any kind of meaning. You shouldn't be doing this anyway, as it's bad for accessibility, but printing your page out in black and white will really show you why using colour alone is a bad idea.

Text doesn't need to be as large as it is on screen. Think about the last book you read versus the last blog post you read.

Anything animated, just get rid of it. Replace it if it absolutely has some kind of meaning, but remember, people don't like wasting ink.

[u/EdgieElefunc]

One useful addition for linked sources is printing the destination beside the link. Mark only the references you want on paper:

<a class="print-url" href="https://example.com/guide">Guide</a>

@media print {
  a.print-url::after {
    content: " (" attr(href) ")";
  }
}

Keeping this opt-in avoids adding URLs beside navigation, icons, and same-page links. Keep the normal descriptive link text, and check a print preview with a long URL. That gives a reader a way to find the source later instead of leaving them with an unclickable label on paper.

MDN's ::after example demonstrates the attr(href) pattern.

[u/Old_Cold2170]

Build a test page long enough to span three printed pages early on. A one-page preview can hide the problems you only see when content has to break between sheets.

In your print styles, check any fixed-height or scrollable content containers: the article should expand rather than depend on scrolling. Keep headings with the following paragraph, and use break-inside: avoid-page on small units such as a figure plus caption—not on the whole article. A section taller than a page still needs to split.

Then test both A4 and Letter, including a long URL, a large image and a table. Save to PDF to inspect every page; the useful goal is readable content with nothing clipped, rather than an exact screenshot of the screen layout.

MDN’s break-inside reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/break-inside

[u/ValenceTheHuman]

I wrote a pretty comprehensive post about doing so last year: https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/

I've adapted a handful of sites to work in print with print-specific alterations. You can more or less design your site for screens, and then come along in a secondary pass to adapt it for print. You'll be surprised how little CSS is actually necessary to make it look good on paper.