User Guide / Generated Content
Prince supports cross-references using generated content with two special
functions: target-counter
and target-content
.
Using target-counter
The target-counter
function can be used with the content
property to reference the value of a counter at a linked element.
CSS
a[href]::after { content: " [See page " target-counter(attr(href), page) "]" }
This will add a cross-reference after every link with the correct page number determined automatically. For example: [See page 17].
The target-counter function can specify any counter, allowing cross-references to refer to list items, chapters or sections as well as pages.
The target-counter function can also take an optional counter style, similar to the normal counter function.
CSS
a[href]::after { content: " [See chapter " target-counter(attr(href), chapter, upper-roman) "]" }
This will add a cross-reference after every link with the correct chapter number determined automatically and displayed using roman numerals. For example: [See chapter IV].
Using target-content
The target-content
function can be used with the content
property to reference the text content of a linked element.
CSS
a[href]::after { content: " [See '" target-content(attr(href)) "']" }
This will add a cross-reference after every link that includes the text of the element being linked to, such as a chapter title. For example: [See 'Introduction'].