Footnote markers and calls are not rendered for `float: footnote` on `::before` element

cpitclaudel commented 3 months ago

Describe the bug

When turning a ::before element into a footnote, footnote markers and calls are not displayed.

The use case it to automatically display the URL that an <a> tag points to in a footnote. For this, I use content: attr(href) in a ::before pseudo-element.

To Reproduce

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      .fn { float: footnote; }
      @page { size: 8cm 8cm; }
      a::after { float: footnote; content: attr(href); }
      ::footnote-call { content: counter(footnote); }
      ::footnote-marker { content: counter(footnote) " "; }
    </style>
  </head>
  <body>
    This works: <span class="fn">Footnote</span>,
    but not this: <a href="https://example.com/">Link</a>
  </body>
</html>

Expected behavior

Both footnotes should have a call and a marker.

Screenshots

Actual behavior: the call and the marker are missing in the second footnote.

Desktop (please complete the following information):

# Ubuntu 22.04.4 LTS
$ ./node_modules/.bin/vivliostyle -v
cli: 8.12.1
core: 2.30.1

MurakamiShinyu commented 3 months ago

The ::footnote-call and ::footnote-marker pseudo-elements cannot be used for ::before or ::after pseudo-elements. In general, a pseudo-element selector ::pseudo-element is same as *::pseudo-element which can apply to any elements, but not to other pseudo-elements. And multiple pseudo-elements, e.g., a::before::footnote-call, are not allowed.

A workaround is to use ::before and ::after pseudo-elements as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      @page { size: 8cm 8cm; }
      .fn { float: footnote; }
      .fn::footnote-call { content: counter(footnote); }
      .fn::footnote-marker { content: counter(footnote) " "; }
      a::before { float: footnote; content: counter(footnote) " " attr(href); }
      a::after { content: counter(footnote); }
    </style>
  </head>
  <body>
    This works: <span class="fn">Footnote</span>,
    but not this?: <a href="https://example.com/">Link</a>
  </body>
</html>

cpitclaudel commented 3 months ago

Thanks a lot! That's a neat workaround. I suppose the only limitation is that the footnote marker cannot be styled separately from the footnote content in that case.

vivliostyle / vivliostyle.js

Footnote markers and calls are not rendered for `float: footnote` on `::before` element #1367