Different margins on different pages



  • 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.



  • 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.



  • 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)


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.