15

I have a page which generates coupons. Each coupon is a div with a height varying depending on the content. I want to print as many coupons on each page as possible, but I do not want the coupons to be split out over several pages. The CSS property page-break-inside does exactly what I need. However, I need this to work for Firefox and/or Chrome. And this is not supported. Two years and one year ago the same question was asked, and there was no good alternative for this. We are a lot of CSS3/HTML5/overall browser development further... is there an alternative to get this working?

Example is here: http://jsfiddle.net/e3U66/2/

Assume that a page, when printed, measures 1000px. I want the second DIV to appear on the second page, because otherwise it is split out over the first and second. This code works in Opera, but not in FF or Chrome.

Community
  • 1
  • 1
  • Some example code in a jsfiddle would be helpful – Lime Jun 25 '11 at 20:24
  • 1
    As soon as your are talking print, if you want absolute control, you are better off generating PDFs on the fly. – Andrew Moore Jun 25 '11 at 20:41
  • @andrew-more: I do not necessarily need 'absolute control', I just want my boxes to not be printed on two different pages. –  Jun 25 '11 at 21:07
  • @plua Would the coupons be a set width? Or the does the 'content' imply the content for coupons? – Lime Jun 25 '11 at 22:01
  • @Lime: the coupons all take the 100% page width, even though they have just a few words in them (due to the format of the coupons). –  Jun 25 '11 at 22:11

4 Answers4

4

Why not, after the page is loaded with your content, use js to scroll through the content and add up the height of the divs.

Once you've reached 1000px or whatever you've determined to be the page height, then insert a blank div styled with page-break-before before the latest div.

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • If I can find some more time, I will try to work up something – Jason Gennaro Jun 25 '11 at 21:18
  • +1, manual `page-break-before`/`page-break-after` is the only thing with consistent browser support. Your challenge is to figure out where you want the breaks. You could simply break after every coupon (one coupon per page). – SpliFF Jun 28 '11 at 03:31
  • 1
    I don't find this to be a helpful answer unless you are a master in js. If you could post a working example that would be great! – gigelsmith Jun 23 '15 at 00:37
1

Below a solution made with the help of Prototype (1.7) library

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
//page height in px
//thisPageTotal is the total of pixels on the current page, in px
pageHeight = 1000;
thisPageTotal = 0;

Event.observe(window, 'load', function(){
    $$('.coupon').each(function(el){
        var layout = el.getLayout();
        thisPageTotal += parseInt(layout.get('margin-box-height'));
        if(thisPageTotal > pageHeight) {
            thisPageTotal = parseInt(layout.get('margin-box-height'));
            var pageBreak = new Element('div', {
                'class': 'pagebreak'
            });
            el.insert({before: pageBreak});
        }
        //this shows the current amount of px on the current page
        el.update(thisPageTotal);
    });
});
</script>

<style type="text/css">
div {
    border: 1px solid #000;
    margin: 30px;
}

.pagebreak {
    page-break-after: always;   
}
</style>
</head>

<body>
    <div id="div_1" class="coupon" style="height: 500px"></div>
    <div id="div_2" class="coupon" style="height: 200px"></div>
    <div id="div_3" class="coupon" style="height: 500px"></div>
    <div id="div_4" class="coupon" style="height: 200px"></div>
    <div id="div_5" class="coupon" style="height: 200px"></div>
    <div id="div_6" class="coupon" style="height: 400px"></div>
    <div id="div_7" class="coupon" style="height: 300px"></div>
    <div id="div_8" class="coupon" style="height: 400px"></div>
    <div id="div_9" class="coupon" style="height: 500px"></div>
    <div id="div_10" class="coupon" style="height: 200px"></div>
</body>
</html>

Maybe it helps

Dirk McQuickly
  • 2,099
  • 1
  • 17
  • 19
0

Honestly I would just advise creating images of the actually coupons or generating a pdf. I'm assuming you are probably generating barcodes for all the coupons already, so generating the actually images shouldn't be to hard using php (or whatever the code choice might be).

Here is some info on php image creation, but SO would probably be a better source for examples.

http://php.net/manual/en/function.imagecreate.php

Then you could just list the images.

<img src>
<img src>
<img src>
...

There's no sense it recreating the wheel.

Lime
  • 13,400
  • 11
  • 56
  • 88
-2

set float left for these div and set width as 100%. i wont tryed it ., it's may work.

Rajasekar Gunasekaran
  • 1,799
  • 3
  • 24
  • 40