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

@font-palette-values CSS apparently not supported #83

Open
brokenomics opened this issue May 29, 2022 · 0 comments
Open

@font-palette-values CSS apparently not supported #83

brokenomics opened this issue May 29, 2022 · 0 comments
Assignees
@jarrekk
Labels
bug

Comments

@brokenomics
Copy link

brokenomics commented May 29, 2022 •
edited
Loading

Describe the bug
@font-palette-values has been supported in Safari since v15.4 (https://caniuse.com/css-font-palette). But I'm unable to get palettes to work with imgkit.

To Reproduce
Steps to reproduce the behavior:

  1. Write the following simple script
import imgkit

options = {
    "enable-local-file-access": None
}
imgkit.from_file('index.html', 'out.jpg', options=options)
  1. Create the necessary index.html for the script to ingest
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="grays"> abcde </h1>
<h1 class="purples"> abcde </h1>
<h1 class="mint"> abcde </h1>
</body>
</html>
  1. Then, the CSS:
  @font-face {
    font-family: 'Rocher';
    src: url('./RocherColorGX.ttf');
  }
  body {
    font-family: 'Rocher';
    text-align: center;
    font-size: 50px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  h1 {
    margin: 0;
  }
  @font-palette-values --Grays {
    font-family: Rocher;
    base-palette: 9;
  }
  @font-palette-values --Purples {
    font-family: Rocher;
    base-palette: 6;
  }
  @font-palette-values --Mint {
    font-family: Rocher;
    base-palette: 7;
  }
  .grays {
    font-palette: --Grays;
  }
  .purples {
    font-palette: --Purples;
  }
  .mint {
    font-palette: --Mint;
  }
  1. Lastly, download the RocherColorGX.ttf font file from here: https://www.harbortype.com/fonts/rocher-color/ and include it in your folder so the CSS can find it.
  2. Run your script and observe the output file has the proper font, but not proper palette.

Expected behavior
See screenshot #1 below

Screenshots
If applicable, add screenshots to help explain your problem.

This is the expected result (see codepen here: https://codepen.io/cssgrid/pen/BaYKdeM)
image

This is the actual result using the above repro steps:
image

Additional context
I'm not sure why this isn't working. The font works, but the @font-color-palettes attribute doesn't. Is imgkit using the latest QT WebKit? Is QT WebKit using the latest WebKit version?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jarrekk jarrekk

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jarrekk @brokenomics