print page count with total number of pages using css
Did you try this:
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
Print page numbers on pages when printing html
As @page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
And the HTML code is:
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
This way you can customize your page number by editing parametrs to #pageFooter. My example:
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
This trick worked for me fine. Hope it will help you.
How to use CSS counter increment for dynamic page numbers
So I was never able to get this to work for my case. I know other cases may work with above answers, but I could not get the Front-End alone to generate the dynamic page numbers.
I used help from my back-end, which is PHP in my case and used a plugin called wkhtmltopdf.
This solved my issue, https://stackoverflow.com/a/13496899/6000966.
I was able to remove the logic from the front-end and place it on the back-end and let it handle the dynamic page numbers.
I would advise if the HTML pages are using dynamic data from the back-end, something like this is the way to go.
Static pages on the other hand should work with the above answers.
Show page number on printing in CSS
As of 12/3/2015, the margin boxes like @bottom-center don't appear to
be supported by the major browsers, as shown here. If you search for
"@bottom-center" you'll see a whole lot of red "not supported" boxes.
When you search the web it sounds like they should work but in reality
they're not supported yet. Some elements of paged media work great,
like page-break-after, but not the margin boxes. Source
However, there seems to be a solutions that works in Firefox.
Browser Support for CSS Page Numbers
This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!
Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.
You can set your starting number to whatever, the default is 0.
Example:
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
... in theory. In real world only PrinceXML supports this.
Related Topics
Blinking Loading Text in R Shiny
CSS - Position Absolute & Document Flow
What Is a Parse Error and How to Fix It
How to Include Caption for Gallery Using Magnific Popup
Symfony2, Loading CSS Files Without Cache
How to Make CSS Max Width in IE6 and 7
How to Remove Fade from Gradient in CSS
Flex Direction: Row-Reverse in React-Native
Rotating 90 Degrees in CSS in IE8 and Lower
Create a Button with Right Triangle/Pointer
CSS Selector for Multiple Different Class Name Combinations
Internet Explorer 11 Rgba Refuses to Work
CSS 3 Animation "Transform: Scale" on Column Element Doesn't Work on Chrome
Cutting a Triangle Out of Div, But Have It Horizontally Centered