We use prince-script to show cross-references with page numbers like this:

a.show-page-number::after {
  content: prince-script(pagereference, counter(page), target-counter(attr(href), page));
}

Prince.addScriptFunc("pagereference", function (currentPage, targetPage) {

    // if the target is on this page, return blank
    if (currentPage === targetPage) {
      return '';
    }

    // otherwise show a space and the page number in parentheses
    return '\u00A0' + '(' + targetPage + ')';
});

Sometimes the target page's counter style is lower-roman, but this code will always show a decimal-style number. Is there a way that I could detect the counter style for a given target page?

I want to avoid having to use a different class (other than `.show-page-number`) in the source HTML when referring to lower-roman page numbers (or for other counter styles). Sometimes our editors can't know whether a target page is lower-roman.

I haven't yet been able to get to grips with the box-tracking API to see if I can use it to find the counter style somehow. And I'm not sure that would work anyway, at least not without a two-pass approach.

We have a defined set of classes that we apply to the body element to set the lower-roman counter style. So if I could get the classList for the body element of the target page, I could infer the counter style from it.

This is tricky. The concept of CSS counters makes the counter style a parameter of where the counter is used, not the counter itself, so a given page number can be styled in different ways in different places. But when typesetting a book it is more common to think of a page having a number with a particular style and a cross-reference picking up that style, something that CSS cannot easily express.

As it happens there is actually a Prince extension to CSS for specifying the PDF page label that is displayed in the PDF viewer, for example:

@page {
    prince-pdf-page-label: counter(page, lower-roman)
}

So that really does associate a particular page number style with the page, but sadly there is no way to refer to this from the target-counter() generated content function. One possibility would be to provide a counter style which can access the page label style, although that might sit a little awkwardly with the rest of the CSS generated content mechanism.

Another possibility would be to use JavaScript to identify what type of page it is by extending your existing script function, this might be a reasonable approach if it is not too difficult to identify, for example if document content with Roman page numbers is grouped in a div? You could access this by passing in the link href and checking the DOM to see exactly where the link is pointing to.

Thanks, Mike.

We do use `prince-pdf-page-label`, too. It would be neat to be able to use that for a counter style (or vice versa, setting the `prince-pdf-page-label` to take the page's counter style), if that ever becomes possible.

For now a Javascript solution would be great, though I see from your explanation why it might be impossible.

In our case, the target of the link is in a separate HTML document. If I could query the target document then I could get the class name that we put on the body element, which we already use to set the counter style.

Is it possible to fetch and/or query another HTML document in Javascript in Prince? Is there an object with global scope, for instance, that 'sees' all the files being processed?