10

I'll preface this question by saying I know this question has been asked before, but all the answers I can find for these appear to reference an obsolete solution that no longer works (At least in Firefox 56 [64 bit])

The obsolete method is that there used to be an automatically instantiated CSS counter named pages, so a simple bit of CSS generated from this SASS:

footer {
    position: fixed;
    bottom: 0;
    left: 20px;

    &:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
}

Used to do what I want. Now it displays "Page [x] of 0".

I have tried using this bit of CSS to recreate my own max-page counter:

@page {
    counter-increment: maxpage;
}

However this also returns 0 when used in my footer.

Is there any reasonably cross-browser friendly means of getting this functionality?

Scoots
  • 3,048
  • 2
  • 21
  • 33
  • Where are you incrementing pages? – Sub 6 Resources Oct 21 '17 at 17:45
  • If you print a page that is too large for one sheet of a4, you're gonna need an incremented counter for "page x of y" – Scoots Oct 22 '17 at 20:29
  • It might be easier to find a solution with corresponding html code. – Bartek B. Oct 23 '17 at 07:41
  • 1
    @BartekB. To be completley honest I have no issue with the how. I just want a page x of y that appears at the bottom of the page for every page, no matter how many pages that might be. – Scoots Oct 23 '17 at 12:01
  • Related issues: https://stackoverflow.com/q/34654071/1066234 and https://stackoverflow.com/q/20050939/1066234 – Avatar Aug 24 '19 at 19:41

3 Answers3

2

As of CSS3 you can specify counters in the @page rule. Here is an example:

@page { counter-increment: page }

The above rule instructs the layout engine to create a counter called "page" (it is called page by convention, it can be anything). This counter is incremented for each page. As with any counter, you can then use the current value of the counter anywhere in the document

For example with this CSS rule:

#pageNumber { content: counter(page) }

and this piece of HTML:

<span id="pageNumber"></span>

You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the @page:first rule to reset the counter for the first page to value 9.

@page { counter-increment: page }
@page:first { counter-reset: page 9 }

The combination of both rules will reset the counter for the first page to 9. Then for each page (including the first) it will increment the counter. This results in a counter value of 10 for the first page, 11 for the second and so on.

You can also use pure css

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.

spotnick
  • 25
  • 3
  • 1
    As mentioned in the question, trying to use `counter-increment` within `@page` causes the counter to return as 0 when used in Firefox 56 [64 bit]. I did humour you and included the `counter-reset` rule too, to no change. – Scoots Oct 23 '17 at 12:19
  • Near as I can determine, CSS features for paged media are primarily for systems that render for printing, rather than systems that render for the screen (browsers) or the print feature of browsers. An example of an HTML/CSS engine for printing is Prince. So, @page won't work in a browser, nor (as far as I know) was it intended to. [reference](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29) – spotnick Oct 23 '17 at 12:47
  • Hmm. Unfortunately this is for a bolt-on for a bit of browser-based reporting software. It needs to work for browser printing. Still, if I get to go back to the client and say "sorry mate, internet says no" at least I will have done my due diligence – Scoots Oct 23 '17 at 13:04
  • 2
    None of the above CSS/HTML seems to work (print with Chrome 76). Can you provide a working JSFiddle? – Avatar Aug 24 '19 at 19:39
  • 3
    These don't work in any major browsers as of now. :) – GeForce RTX 4090 Aug 30 '19 at 15:09
-1

Not using @page, but I have gotten pure CSS page numbers to work in Firefox 20:

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>

It works on most major browsers

spotnick
  • 25
  • 3
  • This steps away from the "of [y]" aspect of my question. Interestingly this also didn't seem to work in Chrome 61. – Scoots Oct 23 '17 at 13:16
  • I don't think that the of[y] portion can be done (except, with CSS3 to set layout and have a fixed number of pages, but that may not work as expected) – spotnick Oct 23 '17 at 13:26
-1

According to mozilla docs,

CSS counters let you adjust the appearance of content based on its location in a document.

So, if your css rule applies to multiple element, it will count all that elements. If you are using header and footer element which basically appear 1 time in document and multiple time in print, counter-increment won't work because in document it has only 1 appearance.

Hardik
  • 31
  • 1
  • 5