Bookmarks create the outline or table of contents (ToC) on generated PDFs. They have numeric levels that create a hierarchy. That is, a bookmark at level 2 can contain nested bookmarks at level 3. The level of a bookmark is set with the prince-bookmark-level property, which can be applied to any element via CSS. This is useful if you need to add bookmark-based navigation to different parts of your PDF, such as the chapters of a book or sections of a report. By default, heading elements get the default settings as follows:
h1 { prince-bookmark-level: 1 }
h2 { prince-bookmark-level: 2 }
h3 { prince-bookmark-level: 3 }
h4 { prince-bookmark-level: 4 }
h5 { prince-bookmark-level: 5 }
h6 { prince-bookmark-level: 6 }Given the following HTML, you would see the pictured outline/ToC in your PDF viewer of choice:
<!doctype html>
<html>
<head>
<style>
.chapter { page-break-before: always }
</style>
</head>
<body>
<div class="chapter">
<h1>Chapter 1</h1>
<h2>Chapter 1.1</h2>
<h3>Chapter 1.1.1</h3>
<h4>Chapter 1.1.1.1</h4>
<h5>Chapter 1.1.1.1.1</h5>
<h6>Chapter 1.1.1.1.1.1</h6>
</div>
<div class="chapter">
<h1>Chapter 2</h1>
</div>
</body>
</html>
The image above, respectively: Adobe Acrobat Reader, Preview.app, and Skim.app.
To see more bookmarks in action, check out our ebook example.