Different margins on different pages

msageryd

I need some pages without margins.

If I set chrome-pdf margins to zero I get into trouble when content flows to a new page on which I need a top margin.

Attempt 1

My first stab on this was to set chrome-pdf margins to zero and manually put margins on my elements. This worked well until a table flowed to a new page on which I wanted a top margin. I tried to enclose the table in a div with margins, but this didn't work.

Is there any way of adding top/bottom margins when non-forced page breaks occurs?

Attempt 2

Then i found the CSS @page keyword. This should enable me to alter a page in whatever way I need, but I can only get it to work half the way.

Spec: https://www.w3.org/TR/css-page-3/#intro
The interesting part: https://www.w3.org/TR/css-page-3/#using-named-pages

I think the below code should work, but it doesn't.

Does jsReport add any extra magic to the chrome-pdf recipe, making this a non-working concept?
Can I disable this "magic" if I want to rule my own margin logic?
Or did I miss something? (html and CSS is completely new to me since last week)

recipe: chrome-pdf
margin settings in recipe: 0

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8">
    <style>
        * {
            box-sizing: border-box;
        }
        html, body {
            margin: 0px;
            padding: 0px;
        }

        @page { margin: 50px; }
        @page no-margin { margin: 0px; }
        .no-margin { page: no-margin; }
    </style>
</head>
    <body>
        <section>
            Page no: 1<br>
            Page-class: none
            Should have 50px margin
        </section>

        <div style="page-break-before: always;"/>

        <section class="no-margin">
            Page no: 2<br>
            Page-class: no-margin
            Should have 0px margin
        </section>
    </body>
</html>

The margins in the rendered pdf is 50px, which proves that the first @page directive works as it should. But the named page selector does not work.

The specificity of @page without other selector keywords is (0,0,0), so it should be overridden by @page a-page-name if I understand this cascading stuff correctly.

jan_blaha

Is there any way of adding top/bottom margins when non-forced page breaks occur?

You mean that page breaks splits the table and you want a top margin to the second part of the table.
I think thead tag should be repeated and maybe you can put a margin on it. However, I haven't tested it.
Nothing else comes to my head now,

Does jsReport add any extra magic to the chrome-pdf recipe, making this a non-working concept?

There is no magic. jsreport in the end just asks chrome to convert html to pdf.

The specificity of @page without other selector keywords is (0,0,0), so it should be overridden by @page a-page-name

I am afraid that the @page css3 selector isn't fully implemented in the chrome. So the spec for printing pages and counters isn't yet covered there. That is why we implemented pdf-utils to allow you to merge pdfs together and achieve more complex things.

msageryd

No, it's mainly the side margins I need to alter. I solved it with pdf-utils instead.

About thead: Yes it gets repeated and it's good to use on long tables. I don't know about the margin, though.

Do you know where I can get more information on what's supported in Chrome?
I tried: https://caniuse.com/#feat=css-paged-media

I should probably search for something else, because the search result seem to be fully supported in Chrome since a very long time (Except the size property, but I didn't use this in my code)

jan_blaha

Do you know where I can get more information on what's supported in Chrome

I don't see a good page with such information. I think the chrome doesn't support much from the level 3 paged media spec where are also named pages defined.
It supports just some basic margins and widths which you can set through our properties anyway.