References

Fileforge’s PDF generation API supports rich cross-referencing capabilities. This allows you to create links between different parts of your document, such as linking to a specific section or page.

Cross-linking

Similarly to HTML, Fileforge automatically parses local links in your document.

1<a href="#section-1">Go to section 1</a>
2<!-- Will be clickable in the final PDF -->
3<a href="https://google.com">Go to google.com</a>
4
5<section id="section-1">
6  <!-- The content of section 1, which can be on any page -->
7</section>

This also works in elements contained in the page shell, such as headers and footers.

1const Document = () => {
2  return <>
3    <PageBottom>
4      <a href="#cover">Go to first page</a>
5    </PageBottom>
6    <section id="cover">
7      <h1>Cover page</h1>
8    </section>
9  </>
10}

Pointers

Counters

When adding cross-references to PDFs, you may want to consider their printed page number. Fileforge provides a page counter that you can use to reference the page number.

1<style>
2a:after {
3  content: " (see page " target-counter(attr(href), page) ")";
4}
5</style>
6
7<a href="#section-1">Section 1</a>
8<!-- Will show Section 1 (see page 1) -->
9
10<section id="section-1">
11  <!-- The content of section 1, which can be on any page -->
12</section>

You can also reference custom counters, such as a section number.

1<style>
2  html {
3    counter-reset: section;
4  }
5
6  section {
7    counter-increment: section;
8  }
9
10  section::before {
11    content: "Section " counter(section) ": ";
12  }
13
14  a:after {
15    content: " (see section " target-counter(attr(href), section) ")";
16  }
17</style>
18
19<a href="#section-1">Section 1</a>
20<!-- Will show Section 1 (see section 1) -->
21
22<section id="section-1">
23  <!-- The content of section 1, which can be on any page -->
24</section>

Names

You can also use the contents of a target element to reference it. For example, you may want to display (see "Cover page") instead of (see page 1).

Target Content

Since the target content will be inlined, we recommend adding the ID to headers rather than sections or divs.

1<style>
2a:after {
3  content: " (see \"" target-content(attr(href)) "\")";
4}
5</style>
6
7<a href="#cover">Cover page</a>
8
9<section>
10  <h1 id="cover">Cover page</h1>
11  <!-- The content of the cover page -->
12</section>

Example: Table of Contents

You can combine the above functionality to build a table of contents that automatically updates with the page numbers.

1<style>
2html {
3  counter-reset: chapter;
4}
5
6h1::before {
7  content: counter(chapter) ". ";
8  counter-increment: chapter;
9}
10
11h1 {
12  counter-reset: section;
13}
14
15h2 {
16  counter-increment: section;
17}
18
19h2::before {
20  content: counter(chapter) "." counter(section) " ";
21}
22
23a::after {
24  content:  target-content(attr(href)) " " leader(".") target-counter(attr(href), page);
25}
26</style>
27
28<ul>
29  <li>
30    <a href="#chapter-1"></a>
31    <ul>
32      <li>
33        <a href="#section-1"></a>
34      </li>
35      <li>
36        <a href="#section-2"></a>
37      </li>
38    </ul>
39  </li>
40  <li>
41    <a href="#chapter-2"></a>
42  </li>
43</ul>
44
45<h1 id="chapter-1">Introduction</h1>
46
47<h2 id="section-1">This is the first section</h2>
48
49<h2 id="section-2">This is the second section</h2>
50
51<h1 id="chapter-2">Conclusion</h1>

This will yeld the following table of contents:

Table of contents