Overview

This addon provides a feature which takes effect for printing: forcing a page break at a certain point in the page. The feature consists of the following:
  • An small image that can be inserted at the position a page-break is desired
  • CSS which
    • Hides the small image for regular readers
    • Inserts the page break for printing only
Forcing a page break is especially useful before a large graphic, or a large table. It is also useful on an "all-in-one" page which includes a list of pages for easy printing en masse -- on such a page you can force a page break before each included page.

Update 2011-05-07: Well this works in FF 3.6, and used to work in IE (I think), but not in IE 8. There's some discussion of this "upgrade" here: http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/fe523ec6-2f01-41df-a31d-9ba93f21787b/ It's possible that slightly more devious CSS could persuade IE to obey. Since page-break is only useful for printing, I'm not going to worry about this too much.

Details

  • Save an image to use as the cue image for this feature. Here is a possible image: cue_sample_pagebreak.gif
  • Rename it as "cue_pagebreak.gif"
  • Add CSS to your site custom CSS, as follows:
/*------------------------*/
/* addon Pagebreak  GW  */
/*------------------------*/
 
/*------------
Hide image, except in editor
Don't use display: none, because that negates page break
-------------*/
div.contentBox .wiki img[src*="cue_pagebreak"]
{
  width:  0px;
  height: 0px;
  padding: 0px;
  margin:  0px;
}
 
/*--- hide br after image ---*/
div.contentBox .wiki img[src*="cue_pagebreak"]+br {  display: none; }
 
/*--- Force page-break before image ---*/
@media print {
div.contentBox .wiki img[src*="cue_pagebreak"]
{
  page-break-before: always;
}

Applying a page-break in the editor

Simply insert the image at the location where the page break is needed (screen cap image of editor):
img_pagebreak_ineditor01.gif
Screenshot of editor, showing page breaks

Below are the actual sections of text pictured above. The image is invisible, but if you select your browser's Print Preview, you should see page breaks before each of those two sections.

cue_pagebreak.gifExample section following page-break

Blah blah blah.

cue_pagebreak.gifAnother section following a page break

Blah blah blah.