HTML Support for PDF Landing Pages

Page Number References

In a document, you sometimes want to include a reference to something on a different page of the same document using its page number (like "See page 5 for more details"), without directly specifying the target page number, as it may change while the document is being worked on. Instead, it is usually better to insert a dynamic reference to the target page number, which is updated automatically.

This can be done with the target-counter function.

However, the way to actually specify this function in the document is a bit tricky. It is a CSS function, so it can only appear in a style declaration. But we want its result (the page number) to appear in the document itself. For this we can use the CSS property content, but this in turn can only be used together with either the ::before or ::after pseudo-elements. So, we cannot specify the function directly inside of the document content, but must do so indirectly, via a CSS rule.

The function itself is written like this:

target-counter(attr(href), page)

The first argument attr(href) is by itself another function, which retrieves the link from the href attribute of the associated element. The second argument is the page counter, because we are interested in the target's current page number.

The complete usage of the function in a CSS rule looks something like the following:

.my-reference::after {
	content: target-counter(attr(href), page);
}

The above style declares a CSS class named my-reference (you can substitute this with any other class name you prefer). Any element that this class applies to becomes a reference to another location in the document. For this, the page number of the reference target is appended to the element in form of the ::after pseudo element, via the content that is set to the target-counter function.

To know which reference target to use, the target-counter function looks up the href attribute of the reference element itself, i.e., the reference element specifies its reference target via its href attribute, in which the reference target must be given in the usual anchor-link format with a leading # hash. Of course, to be able to reference the target in this way, you must also decorate the target with a matching ID attribute.

For example (assuming the style declaration of above is in place):

<p id="topic1">
	Topic 1: Can now be referenced from elsewhere in the document with href="#topic1".
</p>
...
<p id="topic2">
	Topic 2: Can now be referenced from elsewhere in the document with href="#topic2".
</p>

...

<p>
	See <span href="#topic1" class="my-reference">page </span> for more information on topic 1.<br/>

	And <span href="#topic2" class="my-reference">page </span> for more information on topic 2.
</p>

The last paragraph of the example contains two page number references to the two topic paragraphs at the beginning of the example. Each topic paragraph is simply identified with a unique id attribute. And in turn, each reference consists of a <span> element that surrounds the word "page", where the <span> has two important attributes:

• The href attribute with defines the target of the reference, by specifying it in classic anchor link style with a leading # hash character.

• And the class="my-reference" attribute, which is the magic that turns the <span> into an actual reference to the href-target. It applies the my-reference CSS class to the element. And because of the declaration of this CSS class, the element's content (the word "page" with an additional trailing space) gets the target's page number appended to it (resulting in the desired "page X", with X being the page number).