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)



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


Log in to reply
 

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