Bookmarks Documentation - DocRaptor HTML to PDF Converter

Bookmarks

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.

Bookmarks

Ready to get started? Try DocRaptor for free with unlimited test documents.