Weasyprint: control over content in page margins

Created on 5 Jul 2013 · 3Comments · Source: Kozea/WeasyPrint

Hi there,

I'm trying to find an example of basic headers/footers using weasyprint.

i can see that using:
@top-center {
content: 'this is in the header';
}

i can include a simple string, but i want to include full HTML.

to illustrate, i found a description of ths functionality for the 'Prince' product:
http://www.princexml.com/doc/7.1/page-headers-footers/

from what i understand the alternative is to use position: fixed and set the page to have no margins, but then i am battling to avoid overlaps of the page content with the header/footer.

am i missing something obvious here ? is there a simple example of header/footer available anywhere ?

thanks and regards

-i

Source

ivanprice

Most helpful comment

Hi Simon,

thanks very much for getting back to me.

ok so thanks to your help i have a working header now... for the benefit of the list in my css i have:

@page {
    size: a4 portrait;
    margin: 27mm 10mm 27mm 10mm;
    counter-increment: page;
    @bottom-center {
        content: '(c) XX COMPANY - Page ' counter(page);
        white-space: pre;
        color: grey;
    }

}

html {
    font-family: Helvetica;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    background-color: transparent;
    margin: 0;
    padding: 0;
    line-height: 150%;
    display: inline;
    width: auto;
    height: auto;
    white-space: normal;
}
#header-content {
    position: fixed;
    margin: -100px 0px 0px 0px ;
    width: 680px;
}
#header-left{
    padding-top: 10px;
    float:left;
    width:200px;
}
#header-right{
    float:right;
    width:300px;
    text-align: right;
}

and the html starts with:

<body>

    <div id="header-content">

        <div id="header-left">
            col1 text
        </div>
        <div id="header-right">
            <img src="logo.png">
        </div>

    </div>

i am keeping the footer in the page margin because (from what i understand) it is only there that i have access to the page counter ?

ivanprice on 5 Jul 2013

🎉2 👍2

All 3 comments

Prince has some features such as named strings and "flows" that WeasyPrint does not support.

With fixedpos, you probably want to keep page margins. The trick it to use positions outside the 0 to 100% range. For example, position: fixed; bottom: 100% makes the bottom of that element be 100% of the page’s height from the page’s bottom edge, that is at the page’s top edge. (The edges of the content area that is made smaller by page margins.) Does this help?

SimonSapin on 5 Jul 2013

Hi Simon,

thanks very much for getting back to me.

ok so thanks to your help i have a working header now... for the benefit of the list in my css i have:

@page {
    size: a4 portrait;
    margin: 27mm 10mm 27mm 10mm;
    counter-increment: page;
    @bottom-center {
        content: '(c) XX COMPANY - Page ' counter(page);
        white-space: pre;
        color: grey;
    }

}

html {
    font-family: Helvetica;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    background-color: transparent;
    margin: 0;
    padding: 0;
    line-height: 150%;
    display: inline;
    width: auto;
    height: auto;
    white-space: normal;
}
#header-content {
    position: fixed;
    margin: -100px 0px 0px 0px ;
    width: 680px;
}
#header-left{
    padding-top: 10px;
    float:left;
    width:200px;
}
#header-right{
    float:right;
    width:300px;
    text-align: right;
}

and the html starts with:

<body>

    <div id="header-content">

        <div id="header-left">
            col1 text
        </div>
        <div id="header-right">
            <img src="logo.png">
        </div>

    </div>

i am keeping the footer in the page margin because (from what i understand) it is only there that i have access to the page counter ?

ivanprice on 5 Jul 2013

🎉2 👍2

i am keeping the footer in the page margin because (from what i understand) it is only there that i have access to the page counter ?

With the current version of WeasyPrint, that is correct. Future versions may have new features.

I agree that combining techniques is the way to go. I’m closing this as you seem to have something that works for you, but feel free to comment or open a new issue.

SimonSapin on 5 Jul 2013

Was this page helpful?

0 / 5 - 0 ratings