16

My app generates printed reports by creating an invisible iframe and then printing it. My latest in a depressingly long list of problems I'm trying to solve is optimizing the CSS for different printed page sizes. IE9 seems to work a bit (but has other issues, like ignoring @page { margin:... }), but no luck at all on FF or Chrome.

My code looks like this:

@media print and (width: 210mm) and (height: 297mm) {
   ... stuff for A4 size ...
}

@media print and (width: 8.5in) and (height: 11in) {
   ... stuff for US letter size ...
}

Neither of these rules is being matched, ever, in Chrome or FF. I also tried device-width and device-height, and those didn't work either (they seemed to be reporting the absolute maximum sizes of the printer, rather than the page size). I can't figure out what value "width" and "height" are returning, is there a way to tell?

Is there a reliable way to detect printed page size using media queries? I'm pretty close to concluding that there is simply no way to control printing in any consistent way across browsers, and throwing in the towel on this.

neilw
  • 475
  • 6
  • 15
  • I wonder if it's having issues with an exact width/height. Have you tried changing it to something like `max-width` or `min-height`? – redbmk Jan 21 '15 at 19:21
  • Just tried it, no go. Consider: ` here is some body text ` Here, the CSS is triggered as I resize the window, but once I go to print nothing triggers anymore (tested in Chrome). – neilw Jan 22 '15 at 20:35
  • Many years later..... I'm having this issue too. I'm generating pages with SVG technical diagrams and I'd like to change the layoutbased on the paper size selected. In my case, I need to check for 11x17, 18x24 and 24x36 paper sizes to adjust the size (scale) of the diagrams as well as resizing stroke-widths and text heights appropriately. Does anybody have any idea how to do this? – TampaCraig Apr 25 '18 at 17:25
  • [this `paper-css` github project](https://github.com/cognitom/paper-css) seems to have looked deeply into such issues. – Frank N Jan 15 '19 at 09:15
  • Have you tried any page directives like ? Instead of trying to do breakpoints? Letter is 8.5x11 inch. There are other options: A5, A5 landscape A4, A4 landscape A3, A3 landscape letter, letter landscape legal, legal landscape – Tom Jan 17 '19 at 16:40
  • How about using % for the width property? Have you targeted for each browser and then included the media queries? – fauverism Jan 20 '19 at 11:46
  • Possible duplicate of [CSS to set A4 paper size](https://stackoverflow.com/questions/16649943/css-to-set-a4-paper-size) – TVBZ Mar 21 '19 at 21:48

1 Answers1

1

Just try this code May be this can fixed your problem.

<page size="A4"></page>

Css

@page {
  size: A4;
  margin: 0;
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 12px;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 210mm;
  height: 297mm; 
}

@media print {
  body {
    margin: 0;
    box-shadow: 0;
    background: rgb(204,204,204); 
  }
}
codeuix
  • 1,366
  • 1
  • 12
  • 18
  • The above code should work. For A4 landscape the CSS would be: `page[size="A4"][layout="landscape"] { width: 29.7cm; height: 21cm; }` – Michael Gearon Jun 22 '19 at 07:10