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:
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?