Menu
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
469
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:
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.
100
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
