Hi,

I'm generating a PDF from XHTML using PrinceXML and I need the PDF bookmark panel to look like this:

TABLE OF CONTENTS
  1. title 1
    1.1. title 1.1
      1.1.1. title 1.1.1
      ...
    1.2. title 1.2
    ...
    1.9. title 1.9

LIST OF TABLES
  Table 1: ...
  Table 2: ...
  ...

The problem is that <tablefigure> elements are scattered inside <concept> elements throughout the document, not grouped together at the end (and I need the bookmarks to point to the tables, not to other elements):

<map>
  <concept id="c1">
    <title>1. title 1</title>
    <concept id="c1-1">
      <title>1.1. title 1.1</title>
      <tablefigure id="t1">
        <title>Table 1: ...</title>
        <table>...</table>
      </tablefigure>
      <concept id="c1-1-1">
        <title>1.1.1. title 1.1.1</title>
        <tablefigure id="t2">
          <title>Table 2:...</title>
          <table>...</table>
        </tablefigure>
      </concept>
    </concept>
  </concept>
</map>

When I try to use CSS -prince-bookmark-level to control the hierarchy, PrinceXML nests bookmarks by DOM order and level number, so the concepts that appear after a <tablefigure> end up as children of that table's bookmark instead of siblings.

* { -prince-bookmark-level: none; }
concept > title { -prince-bookmark-level: attr(data-level); }
tablefigure { -prince-bookmark-level: 1; }
tablefigure > title { -prince-bookmark-level: 2; }

If a <tablefigure> is at bookmark level 1 and the next <concept> is also level 1 but appears after it in the DOM, it becomes a sibling when I want it to remain within the TOC tree, and the tables are completely separate under "LIST OF TABLES".

Is there a CSS-only way to achieve this structure? A few AI engines suggested the JavaScript "PDF.bookmarks" API the only option to build a bookmark tree, but I can't find any documentation about that, and I cannot get it to work either.

Thank you.