CODEWITHSUNDEEP
javascripthtmlcsscss-paged-media
anghenfil
anghenfil

Reputation: 101

Is it possible to link the footnote-marker back to the footnote-call for Paged Media?

I want to link the footnote mark with the footnote and vice verca at the bottom of my page.

I am using the CSS Paged Media Module with vivliostyle-cli to create a PDF based on HTML + CSS. I'm creating footnotes like this:

        page {
            counter-reset: footnote 0;
        }
         
        @page {
            @footnote {
                float: bottom;
            }
        }
         
        span.footnote { 
            float: footnote; 
        }
         
        .footnote::footnote-call {
            content: counter(footnote, decimal) " ";
            vertical-align: super;
            font-size: 0.8em;
        }
         
        .footnote::footnote-marker {
            content: counter(footnote, decimal);
            font-size: 14pt;
            display: inline-block;
            width: 2em;
            text-align: right;
        }

<html>
    <head>
      <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    
    <body>
         <p>Example Text.<a href="#test"><span class="footnote"><span id="test">Footnote Text.</span></span></p>
    </body>
</html>

Result:

PDF with linked footnote

The w3 draft doesn't seem to support linked footnotes (yet), but this way I managed to link from the footnote-call in the text to the footnote-marker. But how can I link back?

Upvotes: 2

Views: 115

Answers (1)

Hobbes
Hobbes

Reputation: 2145

You should be able to link back by inserting a link into the footnote HTML, and linking that back to the section.

  • add an ID to the paragraph that contains the link
  • and add a link to the footnote text that uses the same ID.

Something like this:

<p id="123">Example Text.<a href="#test"><span class="footnote"><span id="test">Footnote Text.<a href="#123">linkback</a></span></span></p>

Upvotes: 0

Related Questions