5

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 } }
Community
  • 1
  • 1
SemanticZen
  • 1,141
  • 14
  • 21
  • 2
    I think this is just CSS, nothing to do with javascript. – RobG Aug 01 '13 at 03:25
  • Right, it looks like the best way to do this is probably CSS but I don't care if the solution uses CSS and/or JavaScript – SemanticZen Aug 01 '13 at 03:27
  • As an aside, I wouldn't use things like `width:21cm` for A4, since the width of an A4 page is _approximately_ 21 cm, not _exactly_ 21 cm! (The difference is less than a pixel, but still...) – Mr Lister Aug 01 '13 at 08:04
  • @Mr Lister: a4 is exactly 21 cm wide. The ISO216 standard says: rounding down to whole mm. This was done to make sure that you can get 2 a4 pieces of paper from one a3 piece. – Wilbert Sep 16 '13 at 13:04
  • @Wilbert You could always get 2 A4's out of an A3 without the dimensions defined in whole millimeters. – Mr Lister Sep 16 '13 at 13:13
  • @Mr Lister: True, it is not the reason for rounding, but for rounding down. – Wilbert Sep 16 '13 at 17:28
  • Regarding cross-browser support. This is key and it doesn't sound like anyone has addressed it yet. SO - To my current knowledge - You cannot do that with CSS alone if you're covering older browsers that don't support media queries, such as IE8. However, there are probably tricks/other ways around it. – gogogadgetinternet Nov 08 '13 at 18:43
  • SemanticZen - this has been answered already here (2nd answer): http://stackoverflow.com/questions/5769493/ie8-support-for-css-media-query – gogogadgetinternet Nov 08 '13 at 19:18
  • I tried everything to target different print sizes (A4, 4x6, etc) but nothing seemed to work for me. Would love a solution for this. – steve Dec 08 '15 at 00:43

1 Answers1

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

Ian Gregory
  • 5,770
  • 1
  • 29
  • 42
SemanticZen
  • 1,141
  • 14
  • 21
  • This is working in some cases. It seems like I can differentiate A5 and A4, but not A4 and Letter. Does this works consistently for you? – Erik Engi Jul 10 '18 at 13:48
  • Hi Erik, we are using this to distinguish between A4 and Letter. My guess is that you have some other CSS that overrides it (perhaps that uses a min-width that A4 is too narrow to see?) – SemanticZen Jul 10 '18 at 16:45
  • Hi, thank you for your feedback! Well it works in a really weird way. I have spent almost a day testing different combinations. This is what I have ended up with: media print and (max-width: 12.782cm) { page { margin: 2.245cm 2.245cm; } } media print and (min-width: /*12.859*/12.782cm) { page { margin: 1.27cm /*2.54*/2.245cm; } } 12.782cm makes no sense to me. This works however as you can [see on my website](https://oengi.com/resume). I am able to set different margins for A4 and different for Letter. – Erik Engi Jul 11 '18 at 21:49
  • It works, but if I have a longer page and if I set the top and bottom margin big (let's say 10cm) for one of the formats then it looks like the different margins for different sizes are affecting each other as if they were entangled in a weird way. So certain part is cut off and I only have 1 page when I should have like 2, or 3. I could create a new questions providing more details and screenshots. However non of the breakpoint values make sense (your's with 10cm, and mine with 12.782cm). A4 is 21cm wide and Letter is 21.59cm. Am I missing something or is this a Google Chrome related bug? – Erik Engi Jul 11 '18 at 21:57
  • Good question, I've found a few instances where printers do not work exactly as expected. Most of our customers use Star Micronics and Epson receipt printers, but this seems to work as well with the cheaper receipt printers. If your target is not receipt printers it very well could treat margins differently – SemanticZen Jul 19 '18 at 23:16