CSS @page not working for update header and footer of print html page
Question
I tried following code. The purpose of code to update header and footer inside printed page using print media in CSS
body {counter-reset: chapter;} div.chapter {counter-increment: chapter;} @page { margin: 10%; @top-center { content: "Chapter" counter(chapter) } }
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="./style.css"/ media="print"> </head> <body> <header></header> <div id="pageHeader"> <p>This is the Header shown on first page.</p> </div> <div id="pageFooter"> <p>This is the footer shown on last page.</p> </div> <section class="page"> <h1>Introduction</h1> <p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p> <p> The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: </p> <p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm: The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p> </section> </body> </html>
This following URL are the places from I tried code https://www.quackit.com/css/at-rules/css_bottom-center_at-rule.cfm https://www.w3.org/TR/css-page-3/#cascading-and-page-context
But When I print it apply margin from @page rule, but does not update content in header and footer from other define rules. I attached following picture it is showing what rules are using for change specific area of code
But When I print other @rules not work except @page( set margin correct)
I want to update highlighted area in printed page using below css @rule
- @bottom-center
- @bottom-left-corner
- @bottom-right-corner
2 answers
solution1
1 2021-05-06 20:43:22
Based on the date and URL in the page margins in the screenshot, it looks like you're using the “Print” functionality of a desktop web browser. Unfortunately none of them support CSS page-margin boxes (such as @top-center ) at the moment .
If you want to produce a PDF file or paper copy yourself, consider using a tool dedicated to print rendering such as:
- WeasyPrint (disclaimer: I've worked on this one)
- Prince
- (There are others but I don't know them as well)
If you're making a website and want to control how it's gonna be printed by other people's web browsers, I'm afraid you're out of luck.
solution2
0 ACCPTED 2021-05-06 16:42:32
my all @page css work through prince command it create pdf for me with my defined css
its mean we have to use @media print for define print css
about highlighted headers and footers in my question in print page they are not controlled through @page , @page will create pdf with all define css
We have not only prince tool, there are many others convert html to pdf through command line or gui, command like
prince path/to/book.html --style path/to/book.css --output book.pdf
The pdf it creates for me
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.