Sectional page count with flying saucer and css

Question

I am using flying saucer for generating PDF report from a web HTML. My report contains multiple sections and each section may or may not occupy multiple pages in the report

My requirement is to show section page count in the Header

-----------HEADER-----------
     My Fancy Report
     First Section (Page 1)
-----------------------------
.
. First Section (conitinued)
.
-----------HEADER-----------
     My Fancy Report
     First Section (Page 2)
-----------------------------
.
. First Section (Completed)
.
 -----------HEADER-----------
     My Fancy Report
     Second Section (Page 1)
-----------------------------
.
. Second Section 
.

---

I tried using a counter like below

header { counter-increment: myCounter; }
header:after{content: ' (Page ' counter(myCounter) ')' ;}
#page{ counter-reset: myCounter; }

#page is an element which occurs on every start of new section

Doing this, I never see counter is reset with new section.

Seems like the counter-reset doesn't work with flying-saucer, that's what I read somewhere.

Can anyone let me know, what is the best way to achieve this?

Answer 1

As counter-reset doesn't work correctly with Flying-sacuer, I found a simple workaround. Hope this will help others

As mentioned in my question I have multiple running Headers (sectional headers) in my document. I create a separate counter for each of the sectional header and increment them independently.

#sectionOneHeader{ counter-increment: sectionOneCounter; }
#sectionOneHeader:after{ content: ' (Page ' counter(sectionOneCounter) ') '; }

#sectionTwoHeader{ counter-increment: sectionTwoCounter; }
#sectionTwoHeader:after{ content: ' (Page ' counter(sectionTwoCounter) ') '; }

and this worked exactly the way I wanted.