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-call displayed incorrectly for some fonts #1876

Closed
MWedl opened this issue May 11, 2023 · 1 comment · Fixed by #1887
Closed

Footnote-call displayed incorrectly for some fonts #1876

MWedl opened this issue May 11, 2023 · 1 comment · Fixed by #1887
Labels
bug Existing features not working as expected
Milestone
60.0

Comments

@MWedl
Copy link
Contributor

MWedl commented May 11, 2023

For some fonts footnote calls are displayed the same as regular text and not as superscript. The problem is that some fonts don't support font-variant-position: super, which is used in the default weasyprint CSS to style footnote calls. I have tested only a few fonts, but in general font-variant-position: super seems work well variable fonts it seems to work correctly, but not for static fonts. sup element, however, are displayed as expected for all fonts.

I think weasyprint should use the same styling rules for footnote calls as for <sup> such that they are displayed correctly for all fonts.

This is also recommended in CSS Fonts Module Level 4 (https://drafts.csswg.org/css-fonts/#font-variant-position-prop):

Because of these limitations, font-variant-position is not recommended for use in user agent stylesheets.

Screenshot_20230511_093746

<html>
<head>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&family=Tinos&display=swap');
    .font-tinos {
        font-family: "Tinos";
    }
    .font-noto {
        font-family: "Noto Sans";
    }
    .footnote {
      float: footnote;
    }
  </style>
</head>
<body>
  <div class="font-tinos">
    <p>footnote<span class="footnote">footnote</span></p>
    <p>font-variant-position: super<span style="font-variant-position: super">1</span></p>
    <p>sup<sup>1</sup></p>
  </div>
  <div class="font-noto">
    <p>footnote<span class="footnote">footnote</span></p>
    <p>font-variant-position: super<span style="font-variant-position: super">2</span></p>
    <p>sup<sup>2</sup></p>
  </div>
</body>
</html>
@liZe
Copy link
Member

liZe commented May 23, 2023

That’s right.

Would you like to open a pull request to fix that? Here’s the user-agent stylesheet, using sup’s attributes in :footnote-call should work.

@liZe liZe added the bug Existing features not working as expected label May 23, 2023
@MWedl MWedl mentioned this issue May 24, 2023
Merged
@liZe liZe added this to the 60.0 milestone May 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
60.0
Development

Successfully merging a pull request may close this issue.

Fix footnote-call displayed incorrectly for some fonts MWedl/WeasyPrint
2 participants
@liZe @MWedl