0

I have a page where on button-click a popup shows (it is a div with an iframe containing content to be printed).

The problem i got now is to set the size of the popup/div so that it will have the same width/heigth relation as the printed result (it will be printed to A4 always).

Does anyone know how i calculate this size (width/heigth)?

Example: The div contains several paragraphs containing text and some images. I click the Button and the popup opens showing the downscaled printview in A4. Problem here is to be as accurate as possible to determine the width (and heigth) of the div so that it looks exactly as the printed results (linebreaks, and so on).

Thariama
  • 50,002
  • 13
  • 138
  • 166
  • @Thariama how are you scaling down the print view? – Pekka Nov 08 '10 at 13:08
  • 1
    The support browsers give you for control over printing is terrible. There's no reliable way to do what you're asking. – Pointy Nov 08 '10 at 13:15
  • @Pekka: actually i don't - it is a fixed width and heigth (div), the ratio of an A4 pages width and heigth needs to be kept with the div – Thariama Nov 08 '10 at 13:19
  • @Thariama why not set the div to 21 x 29.7 cm then? You won't get any more details about the user's printer. If you need total control, you need to generate a PDF. – Pekka Nov 08 '10 at 13:22

3 Answers3

1

Using relative measures (e.g. width: 50%) should work; alternatively, you could use physical measures (width: 12.5cm).

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • @Thariama why not? How would this have to work on a screen that usually has a width/height ratio different from a A4 sheet? Can you show a sketch of the result you need? – Pekka Nov 08 '10 at 13:04
  • @Tharlama why not? If you set the width to the correct percentage of the height (that is, the same ratio as an A4 sheet), doesn't that give you a popup with the "same width/height relation as the printed result" like you asked? – Pointy Nov 08 '10 at 13:05
  • i see the problem here is that i do not know how the printer will print the divs content (in example where the linebreaks will occur) – Thariama Nov 08 '10 at 13:08
  • @Thariama I think the only way to even get close to that is to put the contents into a `div` that is `width: 21cm; height: 29.7cm`. I don't know how the various printers' margin size will play into this (few printers can print true A4, so they usually resize or cut stuff away - you'd have to test) but it's the only way I can think of. It will look different on every screen but the content should be shown very close to how it will be printed – Pekka Nov 08 '10 at 13:10
  • Exactly, thats the problem. But there is no way to read the printer settings from javscript. To know how many pixels will fit in 21 cm would help though. – Thariama Nov 08 '10 at 13:16
  • 2
    @Thariama you can work with `cm` values in CSS. It would also be possible to find out the pixels per A4 page by setting `width: 29.7cm` and checking the pixel width using jQuery's `.width()` – Pekka Nov 08 '10 at 13:21
0

You will have to set the width of your page to a fixed amount. For the life of me I can't remember what that width is (expect about 700px wide). You can add page breaks using HTML as required also.

For instance:

.pagebreak {page-break-after: always;}

Hope that helps.

dooburt
  • 3,010
  • 10
  • 41
  • 59
  • it would help to know how many pixels an A4 page contains, but isn't this different in each browser? – Thariama Nov 08 '10 at 13:13
  • Thariama, unfortunately I can't access a piece of code that contains this previous work - please accept my apologies. I do remember a lot of unpleasant try-and-try-agains... – dooburt Nov 08 '10 at 14:31
0

Please open a pop-up window with the size 595X842 px and try print. The resultant print will nicely fit into A4 page size

Prasad Jadhav
  • 5,090
  • 16
  • 62
  • 80
Wasif Raza Mirza
  • 1