I am combining several small XHTML documents into a single PDF with the first one being a "front matter" document, which contains a cover page and a table of contents. All the documents share a templated structure with header, footer and content sections. The same CSS is also used in each document, with an additional stylesheet for the front matter.

What I want to do is have the page numbering in the front matter in roman numerals, starting from the page following the cover page, and being reset to numbers starting from 1 on the first page of the document following the front matter (the first "real" content).

The problem is that a page counter reset only seems to work when triggered by encountering a source element with the reset rule applied, and causes that element to appear on a new page.

In my case, I want to reset the page numbering for the content following the front matter. But the content is made up of multiple documents all with the same basic structure and which may appear in any order, so any counter-reset rule applied to a content page element will affect all source documents and reset the page numbering for each document. So the obvious solution is to reset the page numbering through a rule applied to the front matter, which does have unique elements.

Ideally I should be able to use a rule like:

#frontMatter:after { counter-reset: page 1; }

but unfortunately the counter-reset doesn't seem to work when applied to pseudo elements. The only other option I could think of was to create a new div element to the end of the front matter source purely to trigger the counter-reset. This does work, but it causes a blank page to be inserted between the front matter and the first page of content.

Being able to trigger counter rules with pseudo elements would be the best solution, but using "brute force" elements would be an acceptable (if inelegant) solution - provided the forced page break can be suppressed.

Are there any other options I might have overlooked?

One more question:

The content of the headers and footers in these documents are taken from div elements which have been taken out of the normal flow and into the top and bottom margin flows. The content of these are identical, with a slightly different footer style in the front matter document. All the footers contain elements such as copyright info and an empty placeholder for the generated page number.

This is all good, except that I want to hide the page number from the front cover page, but leave the other footer elements intact. Ideally I would be able to target the page number with a page selector like this:

@page cover .pageNumber {
   display: none;
}

but this is an invalid selector, so it won't work.

The only solution I have found is to duplicate the footer content in the source document and turn it into a new flow. There are some significant limitations to this approach though:

* Otherwise identical content needs to be duplicated which is inefficient and adds complexity for maintenance.
* Element IDs can't be used inside the elements or their duplicates.
* Any other generated content needs to be defined twice.

Is there a way to achieve the same effect without duplicating content?

The counter-reset is not applying to the pseudo-element because the pseudo-element has no content and is not being included in the document. Perhaps try adding some content there, such as a single space character.

As to your second issue, I'm stumped. It seems that we need to extend the power of named flows to support more expressive header/footer definitions.