cssprintingprint-previewprint-css

Print preview squishing content

I'm trying to get print preview to print for me in the way that I want it to using the @page directive in CSS. For some reason, no matter what my page margins are set to, the content gets squished, even if the numbers are supposedly exact. Here is an example to test:

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

If you open up print preview on this page (I'm testing in chrome), you'll see that the cards are wildly off-center. Here's the thing, though - my cards are set to 2.5in by 3.5in, and the page itself is set to 8.5in by 11in. That means I should have approximately 1in of margin between the left and right, and 0.5in margin on the top and bottom, meaning logically my margins should be halved for each side. However, if I actually do that, it looks squished:

enter image description here

Here's my @page CSS:

  @media print {
    html, body, .printable, .results-pane, .embed-view {
      width: 8.5in !important;
      height: 11in !important;
    }

    @page {
      size: 8.5in 11in;
      margin-top: 0.25in;
      margin-left: 0.5in;
      margin-right: 0.5in;
      margin-bottom: 0.25in;
    }
  }

The problem exists even if I attempt to set the margins manually, and with this you can even see that my content is being squished. Here's how it looks with absolutely no margins (leaving the 1in and 0.5in margins available:

enter image description here

And here's how it looks when I set the margins myself:

enter image description here

Is there a way I can either prevent the browser from doing this squishing behavior, or use my @print query to fix this? For reference, I've tried setting the margins on the body itself, but the top/bottom margins will not persist across multiple print pages.

Solution

  • As luck would have it, this is actually a problem with the first media query:

    html, body, .printable, .results-pane, .embed-view {
  width: 8.5in !important;
  height: 11in !important;
}

    Because these are all being set to the same size, they push each other out. The resolution was to just make html the correct width/height and everything sorta fell into place from there.