printable report & css

[eregnier]

Hi @liZe ,
Thank you for this project (I was at your conference at pycon 2018).
I am currently starting using weasyprint and it is really easy to use.
However, I am falling in the common css print pitfalls one by one.

I have to print paginated reports. I can generate content from json + jinja2 This is really cool.
However, and I know this is a bit out of the scope of weasyprint, I wonder where I should start to manage my report display properly.
I have reports where I have styled headers and footers (need css) and they must display pagination information (page/total). I already bruteforced the web and my code editor to try many combinations of

@page {
  @top-center {
    content: 'foobar' 
  }
}

or some

.pagination::after {
  content: "Page " + counter(page);
}

And such.

I am at a point where I really wonder if it is possible to have stylized headers and footer (background color , dynamic content , bold text , no margin ...) and dynamic content that have their headers and footer accordingly.

I just wanted from you (or any other advised user) that you give me hints where to go or just stopping me soon if possible because I think you already spent a lot of time with these problematics. I love web, but I cannot really read entire css specs at the moment (child / taste / job dues dates).

Thank you for any help and/or thank you for your work.

N.B : I think if I find solution , I may write some documentation (a guide) for weasy print for such problems.

[liZe]

Hi @eregnier!

Thank you for this project (I was at your conference at pycon 2018).
I am currently starting using weasyprint and it is really easy to use.

😄

I am at a point where I really wonder if it is possible to have stylized headers and footer (background color , dynamic content , bold text , no margin ...) and dynamic content that have their headers and footer accordingly.

What you can put in page margin boxes is currently limited in CSS, and you often have to use CSS tricks to get what you want. You can study the report sample and see how to get background colors and dynamic content for example. Removing margins is possible too.

Other features (mixing regular, bold and italic text for example) are not possible in margin boxes. You may find useful tricks in #92, but you'll probably meet other limitations.

If studying the report sample and reading #92 is not enough, you can post real use cases here, we'll try to find a way or another to solve your problems.

[eregnier]

Hey @liZe,

Thank you for this first answer.

Here is what I did as sample project hoping you'll understand better my issues :

• repository : https://github.com/eregnier/wp-sample
• source https://eregnier.github.io/wp-sample/
• result : https://eregnier.github.io/wp-sample/document.pdf

My blocking points are :

• Can I display pagination in the footer properly as it is stylized or do I have to put it in the margin box with raw style (default police, size, color, position) ?

• The content of the body of the document is overlapping under the footer that is a fixed div. Is there / what is the trick to make the content go onto a new page accordingly ?

• The HTML page is the result of a Jinja2 html page computation. I have to make both pagination and page number and content flow coherent as each "page" of the document is generated from a source json document like:

{
    "pages": [
        {"title": "Page 1"},
        {"title": "Page 2"}
    ]
}

The real issue here is to repeat the header and the footer on each page with the appropriate content depending on the current json document that is iterated.

Thank you for any hint / recommendation that you may bring me for this. I am really close to use weasyprint in production and I would really love to do so.

PS: Sorry for the poor html and css content, I had to downgrade the original documents I am working on.

[eregnier]

I read again your answer @liZe,

It seems that #92 partially answers my questions.
This is bad news to have to implement hacks on a new project. Unfortunatly, I think this is not really understandable for my project.

I don't know if there is something to do such as a custom pagination (droppable plugin ?) system for weasy print that walks outside CSS standards that would make weasyprint user simpler to implement paginated content. But I think this is not the philosophy of this project as well.

At the moment, I am quite blocked by these limitations to be fully confident tu use weasyprint on our side.

If there is any chance that these problematics would evolve in the future in any way, I would enjoy use weasyprint for sure !

You may close the issue if there is no more to add about my specifics need in my usecase.

Thank you for your time, again.

[liZe]

Hello @eregnier,

Thank you, it's easier for me to understand what you want with this sample. It would be perfect with a JSON sample and the matching PDF document looking as you ideally what (made with LibreOffice or any other tool).

The features you have in your headers and footers (color, background color, bold) can easily be done with margin pages, so you won't have to fight with content under the footer (blocking points 1 and 2). I don't fully understand your third point, but I'll get it with the JSON and the PDF 😄.

[eregnier]

Thank you liZe for your help. This issue is solved on our side.