How to use @page css on a weweb page

Ask us anything How do I?
1

Hi there,

I am fiddling around with a PDF generator API that renders a PDF from a HTML Page. I am able to split my content into two pages, and render the PDF. But margins and margin content like page numbers are not working. To test I added the following to the custom code head section of my page:

<style>
    @page {
        size: A4;
        margin: 25mm;

        @bottom-left {
            content: "My title";
        }

        @bottom-right-corner {
            content: counter(page) " of " counter(pages);
        }
    }
</style>

But this is not working. Any thoughts on this?

2

I have some additional info. I am also using pagedjs. And I added the following to my custom code head section.

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
		<style>

But it seems something is off, because properties added in @page seems not working.

3

Hi, you’re trying in the editor or in the published web app ? Custom header are not executed in the editor

4

Published app. Staging environment.

5

Do you see the css on the page or not (when inspecting the HTML with Chrome devtools)? Trying to know if this is a header load problem or a css load problem.
Is the script loading correctly?

6

I will check. Thanks.

7

Hey @FHEXL,

did you managed it using the @page rules in your project? I’am very interested in it. Thanks :wink: