Print preview squishing content

Question

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:

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:

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

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.

@ihemant360 why would that do anything? The print media hides the title bar. — Seiyria, Jun 27 '16 at 03:09
@ihemant360 What I'm saying is that your margin left suggestion doesn't appear to make any sense. Why `.m-b-0`? Why 100px? Do you have a screenshot of this actually having an effect on the print preview of the page? — Seiyria, Jun 27 '16 at 12:54
so you need print page (which is your cards) to be center in that page ... Or fit in that page ...?? — , Jun 27 '16 at 14:06
@ihemant360 The solution you're attempting to provide is not a generic solution, and will not working in many (if any) cases. It doesn't seem like you understand the problem at hand, unfortunately. What I'm trying to do is make print preview not squish my content, and adding a hardcoded offset to a seemingly random element will not fix that. It seems to be a browser problem. — Seiyria, Jun 27 '16 at 14:45
that wasn't my final solution. Ok check this screenshot at : https://www.dropbox.com/s/1ozpz56ayqcssn7/Screenshot%202016-06-27%2020.05.17.png?dl=0 if want this kind of view, i can help. some css need to change. if not. i'm out — , Jun 27 '16 at 14:54
@ihemant360 Sadly what you have there is not correct. If you read my post, there should be exactly 0.5inch margin on the left and right, and a 0.25inch margin on the top/bottom. What you have there is excessively large. Sorry, thanks for trying though! — Seiyria, Jun 27 '16 at 14:57
I haven't used @ page but does it need to be inside the @ media print? As I expect it will only have effect when printing anyway "The @page CSS at-rule is used to modify some CSS properties when printing a document" https://developer.mozilla.org/en-US/docs/Web/CSS/@page — Carol McKay, Jul 04 '16 at 09:14
@CarolMcKay No, but it was convenient to put it in there since that entire element is generated dynamically. There didn't seem to be much of a difference where it was. — Seiyria, Jul 04 '16 at 12:24

score 0 · Accepted Answer · answered Jan 24 '17 at 19:48

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.

Print preview squishing content

1 Answers1