Hidden TOC-bookmark?

msageryd

I'm having trouble getting the TOC bookmark (i.e. the element with an id={{id}} to work consistently.

If I have a container div on a page, I cannot always rely on this div to act as a TOC bookmark. I haven't dug into when it works and when it fails. It might have to do with what is rendered inside the div and if the contained elements spans more than one page, etc.

So I need a stable way to create TOC bookmarks. After some testing I have come up with the following.

<style>
  .hidden-toc-bookmark {
    height:1px; 
    width:1px; 
    display: hidden; 
    overflow: hidden;
  }
</style>

<html>
   {{{pdfAddPageItem id=id}}}
    <div id={{id}} class="hidden-toc-bookmark">TOC hidden bookmark, dummy text..</div>
</html>

These conditions needs to be met (I think):

Must be rendered (i.e. display:none won't work)
Cannot take any room in my layout (one pixel is ok)
The div needs to hide overflow in order to keep contents within the invisible pixel-sized space

I'm wondering if there is a simpler way to accomplish this

msageryd

I'll add some background as well.

I would be natural to use an h1 element as TOC bookmark. But my reports don't have a page title in the main report. Titles are rendered in a separate header report which is merged with pdf-utils. I would rather have my TOC bookmarks in the header, but I couldn't get the TOC links to work if I put the id property in the header report.

jan_blaha

We use this element to add a "hidden" element to the html that we can still parse afterwards and chrome should consider it as valid and create links to it if there are some.

<span style='position:absolute;text-transform: none;opacity: 0.01;font-size:1.1px'>{{value}}</span>

It seems you need to something like this to make the href links from TOC working.

msageryd

To clarify:

My question regards the actual link target, i.e. the div with an id-attribute in my example (not pdfAddPageItem).
My code works, I just wondered if I had overcomplicated something.

jan_blaha

Yes, I understood it after some time :).
You are not overcomplicating it because chrome really needs an element as the link target.
Your "hidden" element does the job right.