Page break problems Options

[Brian Chandler]

I'm trying to tidy up my printed invoices (generated in html, because I don't want to do everything all over again). Sometimes these go over one page; each block of invoice information is a div, and I have managed to get the new div to move to the next page with the following:

CODE

DIV.newpage {
    margin-top: 150mm !important;
    break-before: page;
}

However, the margin-top, which is supposed to leave a 15cm margin at the top of the page, has no effect. The new page starts from precisely the top edge of the paper. So how should I go about trying to improve this? One problem is that the meaning of "margin" is not very clear: perhaps css is indeed leaving a 15cm margin, but it is above the paper; who knows. Then I notice that I have also tried using the @page thing (I have been sporadically trying to make this work reliably for >20 years now). Specifically:

CODE

@page {
    margin: 10mm;
}

This appears to have no effect. So I tried "researching", and ended up at W3schools (@page). Is this a mistake? Is there an obvious, Much Better place I should be looking?

The page is not very clear; it lists three properties, including margin, and lists browser support (or mostly not) for a bunch more properties which are not explained. All we learn is that margin is supposed to specify the page margins.

If anyone is prepared to help, I can make a public sample page, but it involves a little bit of work... tks

[Christian J]

I have no idea, unless it's a case of collapsing margins? See https://developer.mozilla.org/en-US/docs/We...rgin_collapsing (but it seems weird that margins on separate printed pages would collapse).

[coothead]

Hi there Brian Chandler,

assuming that you are using an external style sheet, then
the code should look something like this...

HTML - head section

CODE

<link rel="stylesheet" href="your-file-name.css" media="screen,print">

your-file-name.css - file

CODE

@media print {
.newpage {
    margin-top: 15em;
    break-before: page;
  }
}

coothead

[Brian Chandler]

Hi there Brian Chandler,

assuming that you are using an external style sheet, then
the code should look something like this...

HTML - head section

CODE

<link rel="stylesheet" href="your-file-name.css" media="screen,print">

your-file-name.css - file

CODE

@media print {
.newpage {
    margin-top: 15em;
    break-before: page;
  }
}

coothead

Thanks for the reply. Well, I crawled around with the inspector thingy, and mended it. It turned out I had combined the "receipt" div with the "newpage" div:

CODE

<div class="newpage receipt">

but the margin top settings in the two styles were contradictory (receipt said 0, newpage said 15mm). When I separated the newpage div as a dummy it started working.

Your suggestion only differs from what I had by adding "@media print" and by linking an external stylesheet with media="screen,print". What do these actually mean? (I am using @import.) I can see having different stylesheets for the printed version and the onscreen version, but is not the default that style apply anyway?

And I wonder about the @page thing. Has it died or something?

[Brian Chandler]

Hi there Brian Chandler,

assuming that you are using an external style sheet, then
the code should look something like this...

HTML - head section

CODE

<link rel="stylesheet" href="your-file-name.css" media="screen,print">

your-file-name.css - file

CODE

@media print {
.newpage {
    margin-top: 15em;
    break-before: page;
  }
}

coothead

Thanks for the reply. Well, I crawled around with the inspector thingy, and mended it. It turned out I had combined the "receipt" div with the "newpage" div:

CODE

<div class="newpage receipt">

but the margin top settings in the two styles were contradictory (receipt said 0, newpage said 15mm). When I separated the newpage div as a dummy it started working.

Your suggestion only differs from what I had by adding "@media print" and by linking an external stylesheet with media="screen,print". What do these actually mean? (I am using @import.) I can see having different stylesheets for the printed version and the onscreen version, but is not the default that style apply anyway?

And I wonder about the @page thing. Has it died or something?