It all started with a StackOverflow question. It seemed so simple: “hey browser, here are my page margins, can you respect that please?” to which it responded:
The whole reason this question came about is because anything and everything regarding printing seems to be poorly documented. For example, the @page directive and everything it can contain seems to vary per browser. Nevermind that, how they implement any of it varies wildly.
For those that don’t want to click through, here’s the offending 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;
}
}Every card (rectangle) is 2.5in by 3.5in (standard poker size), so logically we should be able to have a perfect page by having 3 of them across (with 1 inch of margin left to spread across both sides) as well as 3 vertically (with 0.5 inch to spread across top and bottom), assuming we’re using standard letter page size (which we are).
If you want to inspect the full CSS of the page, here is the page in question.
Lets take a look at print preview (or PDF result) for the aforementioned CSS (or the PDF print results) in Chrome, Firefox, and Edge (Safari doesn’t support ES6 Proxy, so we’ll have to skip over that one).
For real, WTF? The sizing gets closer (but is still off) if we change the margins to remove the right and bottom ones:
And here’s what it looks like if we allocate the full margins on the top and left:
It looks a little bit closer, but still, why would it make any sense to do it that way? At least it doesn’t seem to squish the content, but the results are still off. Fine, fine, enough ragging on Chrome. The next two are even more fun. Lets start with Firefox:
Again, WTF? How does it even decide this is a good idea? How does it manage to fit 4 in a row when that should theoretically overflow the page? This was a dud of an idea.
Last but not least, Edge:
The spacing looks like it would on Chrome, but… wait, what’s that? It doesn’t seem to respect `page-break-after: always` (which it supposedly should).
This is the sad state of printing on the web. If you want to do anything right, you just can’t, at least not in the cases I’ve tested. I’d be happy to be proven wrong on that, though. I’d be even happier if all the browsers could print consistently, and all respected the same set of rules.
