Forum How do I...?

Which pdf-tag-type(s) so custom footnotes match Prince auto-generated ones wrt PDF accessibility?

natevw
For various reasons, we've had to eschew some of Prince's "built-in" footnote functionality and generate some of our own elements:

<span class="pdf-footnote"
  data-counter="{{ counter_label }}"
  tabindex="0"
>
  <span class="pdf-footnote-marker">{{ counter_label }}</span>
  <span class="pdf-footnote-body">{{ content }}</span>
</span>



Styled primarily via:

.pdf-footnote {
  float: footnote;
  footnote-style-position: inside;
}

.pdf-footnote::footnote-call {
  content: attr(data-counter);
  .footnote-super();
}

.pdf-footnote::footnote-marker {
  display: none;    // Prince's pseudoelement is more trouble than it's worth!
}


plus a variety of tricks/workarounds to get our own `.pdf-footnote-marker` and `.pdf-footnote-body` stuff looking consistently right at the bottom of each page.

We also have certain footnotes which don't get their content `float: footnote` but rather get a copy generated at the bottom of a block element:

<{{ h_tag }} class="sr-only">Footnotes</{{ h_tag }}>
<div class="pdf-footnotes">
  {% for n in notes %}
    <p class="pdf-block-note">
      <span class="pdf-footnote-marker">{{ n.counter_label }}</span>
      <span class="pdf-footnote-body">{{ n.content }}</span>
    </p>
  {% endfor %}
</div>



My question is: what `-prince-pdf-tag-type` [update: fixed syntax] information do I need to apply to the element(s) of these manually generated .pdf-footnote-marker and .pdf-block-note elements so that they match the normally Prince-generated ones in terms of PDF accessibility?

I found https://www.princexml.com/forum/topic/4454/accessibility-in-footnotes but it's unclear if that's still the approach Prince takes, and whether I can actually set all the cross-reference metadata via CSS?

Edited by natevw

wangp
You would use the tag types Reference, Note, and Lbl like this:
<style>
.ref { prince-pdf-tag-type: Reference; }
.note { prince-pdf-tag-type: Note; }
.lbl { prince-pdf-tag-type: Lbl; }
</style>

<h1>Test</h1>
<p>
  Here is a reference:
  <span class="ref"><span class="lbl">1</span></span>
</p>

<h2>Footnotes</h2>
<p class="note">
  <span class="lbl">1</span> <span class="">Footnote body</span>
</p>


However, Reference and Note tag types are not yet supported in any released version of Prince.

(Also note that the property is either `prince-pdf-tag-type` or `-prince-pdf-tag-type`. A property beginning with two dashes is a custom property, aka CSS variable.)