1

I have a page which has a bunch of divs one after the other, generated by a loop, all having the same class, and all the divs contain images and text. I need to style this page for printing. I have followed all basic principles relating to size, color, margins and the likes.

However, I don't want the boxes to split between pages when they are printed, as it happens when a box begins near the end of a page and some text is printed and the rest on the next page. I used javascript to insert a page-break div (has the style page-break-before:always) when the total height of the divs on the page exceeds 800 (assumed value).

However when I print, text size changes and the divs get longer/shorter and page breaks are misplaced.

I am doing the same thing that the answer here says. My question is what do I assume the width/height of the printed page as? Or is there a better solution?

How do I deal with this? Thanks in advance.

EDIT : I use print-specific css, fyi. Also I have specific media styles and print styles.

EDIT (attempt to visualize)

-------div 1------ 
 |                 |
 |                 |
 |                 |
  -----div 2-----
 |                 |         WRONG
 |                 |
 |                 |
  ----div 3-------
 |                 |
 |                 |
 |  auto page break|
 ----page 1 ends---- 
 |                 |
 |                 |
 |                 |
 ----div 4----------


 -------div 1------ 
 |                 |
 |                 |
 |                 |
  -----div 2-----
 |                 |         RIGHT
 |                 |
 |   script 
    generated 
     page break    |
  ----div 3-------
 |                 |
 |                 |
 |                 |
 ----page 1 ends---- 
 |                 |
 |                 |
 |                 |
 ----div 4----------
Community
  • 1
  • 1
cowboybebop
  • 2,225
  • 3
  • 21
  • 31
  • Let's get this clear, you want the page-break to occur between
    s but not inside them? But you don't want a page-break if there is enough space for another
    ?
     – Ibrahim AshShohail Aug 22 '11 at 23:08
  • Make sure that the assumed height is correct in print page. Is it really 800? More? Less? – Ibrahim AshShohail Aug 22 '11 at 23:12
  • 1
    Does this help? http://stackoverflow.com/questions/6104622/alternative-for-page-break-inside-avoid – Ibrahim AshShohail Aug 22 '11 at 23:14
  • @ibrahim, The problem is not the assumed height. I have the same font size 12 pt in both the media and print. But on screen it shows up differently and on paper it shows up differently. As a result what on screen is 800 pixels appears to be bigger on paper. – cowboybebop Aug 22 '11 at 23:16
  • @ibrahim that is what i am doing right now..But the heights get distorted between screen and print – cowboybebop Aug 22 '11 at 23:17
  • @ryan let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/2751/discussion-between-ibrahim-ashshohail-and-ryan) – Ibrahim AshShohail Aug 22 '11 at 23:21

2 Answers2

0

Make sure you are using CSS defined for print:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

If your CSS has the media attribute set to screen or something other than print or all, the printer will not see your CSS.

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • I am. That's why the difference shows up. I compute page-breaks using javascript and the print css distorts the heights. – cowboybebop Aug 22 '11 at 23:06
0

Never mind. I assumed the width as 600 and my height as 800. I haven't found the best combination but this works as well.

thanks for the help.

cowboybebop
  • 2,225
  • 3
  • 21
  • 31