WeasyPrint
WeasyPrint copied to clipboard
Kozea
100% page height not working as expected
I am trying to replicate a print layout via CSS I've successfully created with Chrome. For each page, I want a containing div that is 100% height and width of the page, and centers its content vertically and horizontally.
The expected rendered output of the code below should be 4 pages, each with a full-page yellow block and centered text. This is what I see when viewing the HTML in Chrome. When create at PDF with weasyprint, the blocks don't stretch the full height of the page.
Is this a limitation of weasyprint, or should I be crafting my CSS differently to achieve full-page blocks?
Thanks for any guidance!
<style>
@page {
size: letter;
}
.block {
display: flex;
break-after: page;
background-color: yellow;
height: 100%;
border-bottom: 1px solid black;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="block"><p>Block 1</p></div>
<div class="block"><p>Block 2</p></div>
<div class="block"><p>Block 3</p></div>
<div class="block"><p>Block 4</p></div>
</body>
weasyprint output
Chrome output
(Chrome supresses the yellow background, but you can see the bottom border)
Hi!
Thanks for this bug report.
I don’t think that Chrome is right to do what it does here. The specification says:
[The height property with a percentage value] specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
Here, the containing block is the body box, and it’s height is not specified. So, the height of your .block box should be set to auto, and that’s what WeasyPrint does.
Fortunately, as you know the size of the page, you can just set your height using inches or pixels. You’ll have to do the math (the page height is 11in = 1056px, the page margin is 75px, the body margin is 8px, the bottom border is 1px, that should be 1056 - 2×75 - 2×8 - 1 if you keep the default margin values).
Thank you! It seems like being explicit about page height and width did the trick.
I see that it must be 96px / in based on the 1056px for the page height. Is this a constant defined somewhere? I'm only asking as I'm used to using 72px / in elsewhere.
I see that it must be 96px / in based on the 1056px for the page height. Is this a constant defined somewhere?
Yes, it’s defined in the specification (with a very interesting explanation about what pixels are in CSS).