We have a small Table Of Contents at the front of our PDF, which looks like:

Obtaining your Dragon: Page 1
Training your Dragon: Page 5

We are currently using target-counter as seen below to obtain the actual page on which the referenced sections start.

We are also using the feature where you can pass multiple HTML documents to the Prince executable, and get back a single PDF that concatenates those documents.

We now need that Table Of Contents in the first input HTML document to refer to content in subsequent input HTML documents, with the correct page number. Since target-counter is a CSS/HTML paradigm, it unsurprisingly only seems to work within the same HTML document.

Is there a way (perhaps an entirely different approach) that we can accomplish this without having to refactor all our code to generate a single HTML document that is passed into the Prince executable?

Thank you!

.crossReferenceCounter {
  content: target-counter(attr(href, url), page);
}

// During Prince rendering, the css content rule receives a valid string and replaces 'X'
export const CrossReferenceCounter = withStyles(s)(({ anchorName }) => {
  return (
    <a className={s.crossReferenceCounter} href={`#${formatID(anchorName)}`}>
      X
    </a>
  );
});

You can use target-counter() between documents, please see the linked example.

prince first.html second.html -o out.pdf

1. first.html‎ 0.2 kB
2. second.html‎ 0.0 kB

Thank you!