CODEWITHSUNDEEP
htmlcssprintingmedia
Artier
Artier

Reputation: 1673

CSS @page not working for update header and footer of print html page

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 enter image description here

But When I print other @rules not work except @page( set margin correct)

enter image description here

I want to update highlighted area in printed page using below css @rule

Upvotes: 4

Views: 1973

Answers (2)

Simon Sapin
Simon Sapin

Reputation: 10190

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.

Upvotes: 2

Artier
Artier

Reputation: 1673

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 enter image description here

Upvotes: 0

Related Questions