Add page counter to print page CSS with @page

Question

It happens that I have an HTML page that will be printed. I wanted to add a page counter and was trying to use @page for that. But then, I noticed that @page was not working at all in Internet Explorer. It works in Chrome, though. Everything except the content property, that doesn't show.

Here's the code

@page {
        size: auto; /* auto is the current printer page size */
        margin: 10%; /* this affects the margin in the printer settings */
        @bottom-center{
            font-family: FlamaSemicond-Basic;
            font-size: 10pt;
            color: black;
            content: "Hello!";
        }

}

Hi, I was looking at this one . I have not tested it but let me know your feedback . this is a solution for the issue https://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html and this one is to fiddle and see the css key value for the counter-increment implementaiton on screen not printer https://www.w3schools.com/cssref/pr_gen_counter-increment.asp — Alan M, Dec 19 '19 at 15:51
Hello! I tried that solution. I've added the "counter-increment" in every element I saw fitting and am writing the page number on a fixed footer, but the value doesn't change from one page to another. — aRip, Dec 19 '19 at 16:24
Use different browser and see if there is a difference. Also can you post a simple running code which really helps — Alan M, Dec 19 '19 at 16:37

user801347 · Answer 1 · 2020-01-26T16:27:33.090

I have a similar issue: using Chrome 79. Here it says (I think?) that '@page' is (mostly) supported by Chrome - https://caniuse.com/#search=%40page

And this gives an example: https://drafts.csswg.org/css-page-3/
(their Example number 12 shown below).

The following style sheet establishes a page header containing the title ("Hamlet") on the left side and the page number, preceded by "Page ", on the right side:

@page { size: 8.5in 11in; margin: 10%;

@top-left { content: "Hamlet"; } @top-right { content: "Page " counter(page); } }

When I test it - Chrome obeys the page size, but doesnt show the page numbers.

Add page counter to print page CSS with @page

1 Answers1