Detect Printer's Page Size in CSS or JavaScript

Question

Question Summary: I want to be able to detect a user's printer's page size so that I can send a different page layout based on printer's page size.

Example Use Case: Our users are businesses. Some user's want to print basic receipts (and so they have small printers) and some users want to print invoices (i.e. normal 8" * 11" pages). Based on the printer's page size we can recognize what format should be sent to the printer.

CSS Specification: Ideally there would be a CSS media setting for different page sizes. The CSS standards have been working on this, and in the CSS 2.1 spec it says

However, a printer should be guided by the page size value supplied by the CSS size property when choosing the media to print on.

The CSS 3 spec appears to offer a good solution.

/* style sheet for "A4" printing */
 @media print and (width: 21cm) and (height: 29.7cm) {
    @page {
       margin: 3cm;
    }
 }

 /* style sheet for "letter" printing */
 @media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }

Real World Implementation: So how is this being implemented across the major browsers. Has anyone implemented this? What browsers does it work in? What code actually works?

Additional Information: It looks like this is working in a few browsers. So does this work for page size and not just landscape / portrait.

@media print { @page {size: landscape } }

Answer 1

The following media query has been working reliably for me with receipt printers:

@media print and (max-width: 10cm) { }

On a somewhat related note: Unfortunately, this isn't working (customers have to manually set margins to none or minimal)

@page { margin: 0; }

Happy coding