0

so I am trying to create a PDF with weasyprint using html template

My current setup is to make sure that if there is multiple pages, I have footer appear in every pages. Now, the problem is, my css setup makes the body text way closer to the footer, I want to increase the margin between the body text and the footer. For example, instead of this:

123456789012345.....
Footer Description.   page 1

Instead, I want it separate body and footer like this, I don't to change the footer region, so I want to make sure the break between page 1 goes earlier

123456789012345.....


Footer Description.   page 1

I try to adjust the @page margin (change 15mm to 25mm), but then it also raise the footer and the footer will overlap. Is there anyway to fix this? here is my css style

@page {
        size: A4;
        margin: 15mm 20mm;
        }
    .common-style {
        color: black;
        font-family: "Calibri, sans-serif";
    }
    .footer {
        position:fixed;
        width:100%;
        right:2;
        bottom:0; /* stick to bottom */
        margin-bottom   : -5mm;
        height          : 10mm;
        text-align      : left;
        font-size       : 10px;
    }

Thank you
Norman Kuo
  • 143
  • 7

1 Answers1

0

You could try using the ::before pseudo-element and add some
elements above your element... I don't know if this would be "best practice" but it could work.

Actually sorry... so... you don't add
elements within the ::before psuedo-class (at least I'm sure you can do that)...

So does setting 'margin-top', or 'padding-top' on the .footer not achieve what you want.

You actually can create line breaks in CSS generated content it seems... consider using:

.footer::before {
content: 'content: '\a \a';
white-space: pre;
}

The above should give you two line breaks... see this thread for more info.

Add line break to ::after or ::before pseudo-element content

Chris Andrew
  • 91
  • 6