Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
cpitclaudel opened this issue Jul 19, 2024 · 2 comments
Open

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

cpitclaudel opened this issue Jul 19, 2024 · 2 comments
Labels
not a bug

Comments

@cpitclaudel
Copy link

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.
image

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
Copy link
Member

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
not a bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MurakamiShinyu @cpitclaudel