How to handle the page break with a top margin on the next page?

[fro]

Hi,

I'm struggling with something which appear to be simple but which is not.

Objective

I want to create a A4 document where:

1. All the elements can touch the edge of the page

@page {
  -relaxed-page-size: A4;
  size: A4;
  margin: 0;
}

2. A new "section" (aka chapter) should break to a new page

.section {
  page-break-before: always;
}

3. Each new section should have a header and a content

.section {
  .header { ... }
  .content { ... }
}

4. When a section content is to tall for the page, it should print on the next page, without the header but with a padding and the same border

.section {
  .content {
    -webkit-box-decoration-break: clone;
    border: 1mm solid green;
    padding: 3mm;
  }
}

Issue

The property -webkit-box-decoration-break: clone don't work (but should)

Expected

https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-clone

(the right part)

---

So... is there anyway to fix this -or- to achieve the page-break WITH a padding/border applied?

Thank you so much for your insights

[DanielRuf]

2 This property is only supported for inline elements

[fro]

Thank you @DanielRuf for your fast answer!

My main question is about the proper way to handle the page break with a top margin on the next page, when @page margins are set to 0.

Do you think of any way to do this?

Here's the best I can think of for now:

pug

.section
  .header
    h1 real header
  table.main
    thead
      tr
        th header only for margin
    tbody
      tr
        td
          .aside
            | aside
          .content
            each step in [1, 2, 3, 4, 5, 6, 7, 8, 9]
              p #{step} Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsididunt ut labor veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

scss

$page_width: 210mm;
$page_height: 297mm;
$header_height: 66mm;
$aside_width: 37mm;

@page {
  -relaxed-page-width: $page_width;
  -relaxed-page-height: $page_height;
  size: $page_width $page_height;
  margin: 0 0 $footer_height; // need de set this to allow template#page-footer
}

html, body {
  margin: 0;
  padding: 0;
}

.section {
  page-break-before: always;
  width: $page_width;

  .header {
    height: $header_height;
    background-color: blue;
  }

  table.main {
    width: $page_width;
    border-collapse: collapse;
  	border-spacing: 0;
    table-layout:fixed;

    thead tr th {
      width: $page_width;
      background-color: gray;
      padding-bottom: 15mm;
    }

    tbody tr td {
      width: $page_width;
      padding: 0;

      .aside {
        float: left;
        width: $aside_width;
        background-color: green;
      }

      .content {
        float: right;
        width: $page_width - $aside_width;
        background-color: yellow;
      }
    }
  }
}

output

[fro]

2 This property is only supported for inline elements

Are you sure of this? Because the documentation says: Applies to: all elements

And I can make it work with <p> elements.

[DanielRuf]

This is described / mentioned in the caniuse tables.

w3 does not cover vendor specific differences / bugs.

Not sure, I did not yet try it.

[DanielRuf]

Doesn't Chrome support it now without the vendor prefix?

[DanielRuf]

For debugging purposes the headless mode of puppeteer can be disabled and prevented that the insfance is closed to see what's happening.

[fro]

I've edited the title to reflect the real issue here.

I have tried to make it work with a table thead, but there is to many limitations.

Is there another way to do it with Relaxed?

[fro]

For those who are interested: my solution above using a thead as serious limitations when you fill tbody cell with some content. The page-break simply doesn't apply sometimes or apply but the margin is not keeped.

Well, is there any solution to have keep a margin after a page break?

[fro]

I have posted a question on stackoverflow : https://stackoverflow.com/questions/59348619/pdf-generation-or-printable-html-how-to-create-a-top-margin-after-an-auto-page

[fro]

@DanielRuf I have tried the headless puppeteer but it is not really helpful.

[DanielRuf]

I think you meant headful. We already use puppeteer.

headless: false

[fro]

Oh, yes sorry 👍

const puppeteerConfig = {
  headless: false,
  ...
}

[frankandrobot]

Any progress here? I have a similar use case:

• i have a header with full page bleed
• when I apply margins to the body, the margin does not propagate correctly on page break

Here's the full-page-bleed header:

Here's the body incorrectly applying margins on page break:

[DanielRuf]

Any progress here

As you can see there was no further progress.