I have a PDF where the bookmarks don't follow the order of the headings in the document. In the HTML where the order is:

h1 Xpert Xpress Flu/RSV
h2 Getting Started
h3 Overview
h4 Proprietary Name
h4 Common or Usual Name

The attachments show the bookmarks and the actual body text with the heading order. In the bookmarks the h2 Getting Started is below the h3 Overview. The h3 Overview should be nested inside the h2 Getting Started.

Here is a snippet of the relevant HTML.

++++
<article class="nested0" aria-labelledby="topic_15a47ef8-55e3-4467-9d82-228de6a1efaa__title_737acca6-546d-4b9c-963c-0e7369d1f7a1">
<h1 class="title topictitle1" id="topic_15a47ef8-55e3-4467-9d82-228de6a1efaa__title_737acca6-546d-4b9c-963c-0e7369d1f7a1"><span class="reg">Xpert</span> Xpress Flu/RSV
</h1>
<!--Level 2 topic-->
<article class="topic nested1" aria-labelledby="topic_9b4eacf5-b6bb-4578-91bd-c41dc1a5e298__title_cbd78919-a070-4bd3-b55d-104c5fc51ae8" id="topic_9b4eacf5-b6bb-4578-91bd-c41dc1a5e298">
<h2 class="title topictitle2" id="topic_9b4eacf5-b6bb-4578-91bd-c41dc1a5e298__title_cbd78919-a070-4bd3-b55d-104c5fc51ae8">Getting Started</h2>
<div class="body" id="topic_9b4eacf5-b6bb-4578-91bd-c41dc1a5e298__body_35d3eda5-7d6d-48b0-b1f1-871b898ee507"></div>
<!--Level 3 topic-->
<article class="topic nested2" aria-labelledby="topic_21511757-a30d-4387-9cf6-d522df60bfa5__title_17c35958-89dd-41ad-9716-bb837813ccf4" id="topic_21511757-a30d-4387-9cf6-d522df60bfa5">
<h3 class="title topictitle3" id="topic_21511757-a30d-4387-9cf6-d522df60bfa5__title_17c35958-89dd-41ad-9716-bb837813ccf4">Overview</h3>
<div class="body" id="topic_21511757-a30d-4387-9cf6-d522df60bfa5__"></div>
<!--Level 4 topic-->
<article class="topic nested2" aria-labelledby="concept_0d002bc0-2878-45c8-9b55-6e45916b2651__title_06f07e30-47bd-47ee-aaae-6c0fc4fd3d54" id="concept_0d002bc0-2878-45c8-9b55-6e45916b2651__title_06f07e30-47bd-47ee-aaae-6c0fc4fd3d54">
<h4 class="title topictitle4" id="concept_0d002bc0-2878-45c8-9b55-6e45916b2651__title_06f07e30-47bd-47ee-aaae-6c0fc4fd3d54">Proprietary Name</h4>
<div class="body" id="concept_0d002bc0-2878-45c8-9b55-6e45916b2651__conbody_a154b532-9074-4d25-8614-bf40615298e2">

<p class="p"><span class="reg">Xpert</span> Xpress Flu/RSV
</p>

</div>
++++

I have added some CSS to set bookmark levels but this hasn't fixed the error with the order of the elements.

++++
body#main .nested1 h2.topictitle2 { -prince-bookmark-level: 2; } /* For section banner titles */

body#main article.nested2 h3.topictitle3 { -prince-bookmark-level: 3; } /* For subsection ribbon titles, which are topics */

body#main article.nested2 h4.topic-title4 { -prince-bookmark-level: 4; } /* for topic subsections */
++++

Any help is much appreciated as I am stumped!

1. body.png‎ 30.8 kB
2. bookmarks.PNG‎ 7.7 kB

I can't replicate the problem you are reporting. On my screen, using evince to show the Prince-produced PDF file, bookmarks are shown in the right order. Could you try running the attached "foo.html" through your production line and see if it works? If not, please post the resulting PDF file.

1. foo.html‎ 1.8 kB
2. foo.pdf‎ 37.1 kB
3. foo.png‎ 43.3 kB

Edited 21 Jan 2023 by howcome

Thanks for your response, howcome. Your clue helped me to track the problem down to one line in my CSS. The Overview heading has a banner image and it is absolutely positioned on the page. If I comment out the position: absolute line, the bookmarks are now in order. Here is the CSS with the absolutely positioned line commented out.

.nested1:nth-of-type(1) .topictitle2 {
background-image: url("../icons/checklist.svg"), url("../icons/page-overview-banner.svg");
opacity: 1;
width: 210mm;
height: 48mm;
background-repeat: no-repeat;
/* position: absolute; */
left: -72pt;
top: -90pt;
padding-left: 72pt;
padding-top: 80pt;
overflow: visible;
}

How can I still position this heading absolutely without causing this problem with the bookmarks?

In this forum item:

https://www.princexml.com/forum/topic/1956/header-style-float-messes-up-bookmarks?p=1#19201

There is the comment that, bookmarks are still generated based on the structural order of the elements in the document, not their visual position on the page." However this is not true in my case. The bookmarks nesting is affected by the CSS and not just the HTML structure.

I have figured out how to workaround this with a relative position instead of absolute. I think this is still a bug in Prince though if the HTML structure is supposed to be the sole determinant of the bookmarks hierarchy.

You are right that absolutely positioned elements don't generate bookmarks based on their position in the HTML structure.

This is probably something we should change.

(CSS has become way too powerful :--)

I switched to relative positioning but this is causing whitespace issues in my documents. Could you make this change now? Ensuring absolutely positioned elements generate bookmarks based on their HTML structure?

Thank you.