CODEWITHSUNDEEP
htmlcssprinting
Loda Kuza
Loda Kuza

Reputation: 113

Is it possible to add page numbers using CSS3/2 in Chrome while printing?

I believe I tested all the solutions available on StackOverflow but none of them is working in the Chrome (72). I followed specification on W3C but everything seems to work only in a FireFox.

I just want a simple thing - add the page number using counter-increment into the printed document. I tried HTML4 and HTML5 without any results.

Is there ANY solution?

Chrome version: 72.0.3626.81 (Official Build) (64-bit)

Solution working fine in FireFox:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}

</style>
<body>


<div id="content">
<div id="pageFooter">Page </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..A LOT MORE STUFF TO FILL THE PAGES </p>
</div>

</body>
</html>

Another solution (@page is not supported in HTML5):

@page {
    @bottom-right {
        content: counter(page) " of " counter(pages);
    }
}

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. – James Toomey Dec 3 '15 at 20:40

Similar threads (old, no resolution for Chrome):

  1. Browser Support for CSS Page Numbers
  2. Page numbers with CSS/HTML
  3. Print page numbers on pages when printing html

The issue with Chromium (counter not incremented on every page): https://bugs.chromium.org/p/chromium/issues/detail?id=774830

Some of the browsers are behaving the same:

Chrome, Edge: Page: 1 Page: 1

Firefox: Page: 1 Page: 2

Safari: Page: 1 (once, near the top of the second page)

Upvotes: 11

Views: 4694

Answers (3)

Kevin Guto
Kevin Guto

Reputation: 1083

No, it's not yet possible with Chrome, Chromium & Edge but this resource (PagedJs) will easily do the magic for you.

Upvotes: 0

Inna
Inna

Reputation: 1

for total pages

<script>
    count = Math.round(document.body.clientHeight / 3508);
    for (var i = 1; i <= count; ++i) { 
      document.body.innerHTML+= '<footer style="margin-top: ' + (297*i -10) + 'mm">' + i + '/' + count + '</footer>';
    }
</script>

Upvotes: 0

Taurus
Taurus

Reputation: 125

i searched many days the whole internet for a solution, but i could not find one. One night, an idea passed my brain and these is the result (ugly, hacky, still much more to improve, but very easy and working): :-)

<html>

<head>
    <style>
        @page {margin: 0; size: A4}

        footer {
            position: absolute; 
            margin-left: 190mm; 
        }
    </style>
</head>

<body>

    <script>
        for (var i = 1; i <= 3; ++i) { 
          document.body.innerHTML+= '<footer style="margin-top: ' + (297*i -10) + 'mm">' + i + '</footer>';
        }
    </script>

    Content

</body>
</html>

Next Todo for a good solution:

  • At the moment, you have to know how many pages are available. (max. pages = to range of for-loop, my example 3 pages total)

My ideas (but i am not getting it working):

1) Get computed height of all pages > change for-loop to while-loop > while actual footer margin-top <= computed height

but i am not able to get the real height, here are my examples:

<script>
alert(window.getComputedStyle(document.body, null).getPropertyValue("height"));
</script>

source Chrome getComputedStyle without solution

2) Create 999 page-numbers and kill overflow after body-end. But i didn't found a solution to kill absolut elements after relative elements.

So lets solve that task together and we have a final solution.

PS: At the moment, i don't have enough points to comment. So i cannot discuss, but i will update my answer, if there are new solutions.

Upvotes: 3

Related Questions