CSS media queries for print paper size

Question

Paper isn\'t the same shape the world over. I have a document that I want to print differently when it\'s printed on A4 versus US Letter. Some elements should be hidden or shown

Answer 1

Browser support for print specific media queries is varied and there doesn't seem to be any good resources for it. It's really not possible to do this cross-browser, in some browsers the support is not there at all. Safari for example, seems to use the size of the browser rather than the page for it's media queries.

You can get it working in Chrome and Firefox. I knocked up a very rough demo using the size ratio to show what is possible with a bit of work. Currently tested and working on current versions of Chrome and Firefox on macOS. You should get a message at the start of the page with the printed page size (only when printed).

http://gsgd.co.uk/sandbox/print-test.html

The main trick is using vw units to check for height, hence using the aspect ratio you can target specific paper sizes:

@media print and (min-height:160vw) and (max-height: 170vw) { /* legal-size styling */ .standard.container::before { content: "LEGAL"; } }
@media print and (min-height:135vw) and (max-height: 145vw) { /* A4 styling */ .standard.container::before { content: "A4"; } }
@media print and (min-height:125vw) and (max-height: 135vw)  { /* letter-size styling */ .standard.container::before { content: "LETTER"; } }

Unfortunately it seems like Chrome's page sizes for printing don't match the output page size so I guesstimated some styles that match for Chrome.

@media print and (min-height:120vw) and (max-height: 150vw) { /* legal-size styling */ .chrome.container::before { content: "LEGAL"; } }
@media print and (min-height:100vw) and (max-height: 120vw) { /* A4 styling */ .chrome.container::before { content: "A4"; } }
@media print and (min-height:80vw) and (max-height: 100vw)  { /* letter-size styling */ .chrome.container::before { content: "LETTER"; } }

With an incredibly rudimentary browser detector script

if(navigator.userAgent.match(/chrome/i)) {
    document.querySelector('.container').className = 'chrome container'
}

An idea to get something to work for Safari would be to manually resizing the window, but that would likely be a ton of work and require the user to select print size up front.

All that said you might get better mileage fixing up your layout to respond better to different widths.