Cross References

For printed material, a cross reference cannot just be a simple link (although PDF renderers support them for on-screen display). It should also display the page number of the target. In CSS you can do this by using the target-counter function.

For example, to get:

For details see [Installation on page 34].

from:

<p> For details see <a href="#installation">Installation</a>.</p>

you can use a static content that is shown after the text from the link, consisting of a fixed string " on page " and the number of the page of the element referred by the @href attribute:

a:after {
  content: " on page " target-counter(attr(href), page);
}

The target-counter function may be used together with the leader function to create table of contents. See: Creating a Table of Contents (TOC).

The processor supports both target-counter and target-counters functions, on page or other counters associated to your document elements. For example, you can use the target-counter to fetch the number of the chapter that contains the target:

<div class="chapter" id="intro">
... For details see the chapter: <a href="#install" class="number"/>.
</div>
<div class="chapter" id="install">
...
</div>

The text should render like:

For details see the chapter 2.

you can use the CSS:

:root {
  counter-reset: chapter;
}
div.chapter{
  counter-increment: chapter;
}
a.number {
  content: target-counter(attr(href), chapter, decimal);
  oxy-link: attr(href);
}

Usually, when linking to resources outside the documentation, normal web links are used.

There are two aspects to take in consideration when styling them:

• When printed on paper, show the entire URL so that the user can see it and type it in a browser.
• When displayed in a PDF reader, mark it as a link so that the user can click on it.

For example:

<p>This is a link to the <a href='http://www.w3.org/'>W3C</a> website. </p>

To fulfill both conditions, you can add text after the "W3C" text, with the entire value of the @href attribute, and use the link or -oxy-link property to mark the generated content as being a link:

a:after {
  content: "(" attr(href) ")";
  link: attr(href);
}