Menu
I'm trying to generate a print-ready HTML file and therefore started working with CSS @page and everything around it. One big problem I'm facing is that I can't manage to display page numbers using @bottom-right and all similar solutions. Do you know if there could be a general reason behind it (like it's deprecated, etc.), as I've tested even the simplest solutions like:
@page {
@bottom-right {
content: counter(page);
}
}
and still nothing seems to make the pagination or any other content appear.
730
The top-right text should be set to position: absolute; top: 0; right: 0 . The bottom-right text should be set to position: absolute; bottom: 0; right: 0 .
You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.
The @page at-rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies the page's dimensions, page orientation, and margins. The @page at-rule can be used to target all pages in a print-out, or even specific ones using its various pseudo-classes.
We can change the alignment of the text using the text-align property. We can align the text in the center, Left, Right. The text alignment can be done with CSS(Cascading Style Sheets) and HTML Attribute tag. Note: The left alignment of the text is default.
What are you using to render this? A lot of browsers don't have proper support for print CSS, so it might be better to use something specifically built for it, like weasyprint.
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
