search

vivliostyle / vivliostyle-cli

⚒ Supercharge command-line publication workflow.
https://docs.vivliostyle.org/#/vivliostyle-cli
GNU Affero General Public License v3.0
156 stars 22 forks source link

Linked Footnotes #472

Open anghenfil opened 6 months ago

anghenfil commented 6 months ago

Hey,

is it possible to link from the footnote call to the footnote marker (and vice versa)? I couldn't find something in the w3 spec, but is there any hack (maybe with the vivliostyle js support?) to make it possible?

Best anghenfil

spring-raining commented 5 months ago

Hi @anghenfil, sorry I have missed this post.

::footnote-call and ::footnote-marker are pseudo-elements, and as far as I know, there is no way to add links to pseudo-elements with only CSS changes. One solution that is a bit redundant but works is to place an anchor link to display footnote calls or footnote markers. This way you would be able to apply the desired style.

<span class="footnote" id="footnote-1">
  <a class="footnote-marker" href="#footnote-call-2"></a>
  Footnote text 1
</span>
<a class="footnote-call" href="#footnote-1" id="footnote-call-1"></a>

<span class="footnote" id="footnote-2">
  <a class="footnote-marker" href="#footnote-call-2"></a>
  Footnote text 2
</span>
<a class="footnote-call" href="#footnote-2" id="footnote-call-2"></a>

<style>
:root {
  counter-reset: footnote;
}
.footnote {
  counter-increment: footnote;
  float: footnote;
}
.footnote-marker::before,
.footnote-call::before {
  content: counter(footnote);
}
</style>

@MurakamiShinyu Please tell us if you have any other ideas!