6

I've got a bit of a problem with printing a html document. Apparently the browsers don't know how wide the paper is, and they make wild and inaccurate guesses!

The document is responsive, showing different layouts at different widths, and I hoped that when printing, they would take the styles for about 700 or 800 pixels, but they don't. Not all of them.

Tried to change the media queries from sizes in px to physical units (pt or cm) but that did not help.

I also ensured that the browsers were all set to use the same paper size, orientation, and margins, and that they didn't have any "scale to fit page" flags set.

Here is a fiddle: http://jsfiddle.net/MrLister/Lc5kE/show
If you resize the window a bit, you will see that it shows how wide it is. Then when you hit Print Preview, that's when it goes wrong: IE says the width of an A4 is 18..19cm, Mozilla says 20..21cm and Chrome says 14..15cm. Opera is the worst of all: it doesn't look at the paper at all, it just takes the size of the window on the screen.
And like I said, there is no difference whether you use physical units or pixels or em.

So am I doing something wrong? Am I overlooking something? Is there something I can do, short of forcing a fixed paper size (like A4) down people's throats?

Edit: after some more testing, I found that IE takes the printer margins into account, while Mozilla does not. So if you set all the margins to zero, IE and Mozilla both report 20..21cm for the width. The others are still very uncooperative though.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Take a look here, it might help: http://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages They say it's not possible! – Ilia Ross Nov 29 '13 at 09:56
  • CSS paged media support has always been spotty across browsers. While it is unfortunate, I'm not surprised this sort of thing is happening :/ – BoltClock Nov 29 '13 at 10:03
  • @IliaRostovtsev Yes, that one is about forcing the page to be A4. I can do that, but then I create problems on printers with other page sizes. Or even landscape. – Mr Lister Nov 29 '13 at 10:06
  • @BoltClock'saUnicorn But you wouldn't call it bugs? – Mr Lister Nov 29 '13 at 10:06
  • I am wondering myself if there's a good way to do this avoiding all problems/issues that comes from this... And, we all have a good tool to print, that allows to fit (text) to all paper sizes - I guess -> **pdf** (yeah, image sucks when the user need to print a huge page). Just an idea coming from nothing. Take a look to [stackoverflow.com/questions/391005/...](http://stackoverflow.com/questions/391005/convert-html-css-to-pdf-with-php) – fiskolin Nov 29 '13 at 10:10
  • If something is incomplete when it's expected to be complete, I certainly would call it a bug. – BoltClock Nov 29 '13 at 10:10
  • Would this read up help http://www.w3.org/TR/css3-page/#page-terms – GRowing Nov 30 '13 at 01:16

1 Answers1

1

The easiest way will be to use '%' instead of 'cm'.

The problem, as far as the JSFiddle example goes, is that you have not specified the changed widths of the divs inside the '@media' min-width/max-width queries. Since the widths of the given divs are fixed. the page itself is not responsive. You can understand your problem better, by resizing your browser and seeing that the overflows are shown... Thus in short your page is not responsive to fit the print page.

Also, just to fit the divs within the print page, you could use the following css code:

@media print{
 html,
 body{
  width: 100%;
 }
 body div{
  max-width: 100%;
 }
}

(Note: this code wont work on your JSFiddle example, since the styles of 'div's were specified inline.)

Still not satisfied? Use css transform to scale the page to fit the print page. When using this, don't forget to set 'transform-origin: 0% 0%;'.

For example, the largest of your divs is 31cm wide, and the margins is usually 1cm. So, within a print-page of width between 16cm and 17cm, you could scale it to 50% and manually fit the page to the print-page.

The former method is the best practice though. Gud Luck.

BlackPanther
  • 1,732
  • 1
  • 14
  • 19
  • 1
    Sorry, but how would you work a percentage into a @media query? Can you give an example? And my fiddle was an example to show that different browsers handle printed media differently (i.e. with the actual issue); it's not nearly as clear on the original pages what causes their problems. The original pages _are_ responsive. And the issue is that different browsers use different media queries when printing to the same paper. For this problem, setting body to 100% doesn't work. – Mr Lister Dec 01 '13 at 19:30