[BUG] Webkit font rendering (spacing / icon fonts)

[olee]

Context:

• Playwright Version: 1.1.1
• Operating System: Windows
• Browser: WebKit 1269

Bug description
When trying to test screenshots with webkit, I noticed that font rendering looks a bit weird and no font icons were rendered.
The icon font rendering can be easily tested by starting the playwright webkit browser (eg. AppData\Local\ms-playwright\webkit-1269\Playwright.exe) directly and navigating for example to https://material.io/resources/icons
An interesting behavior I could observe was that when I set font-kerning: normal on font icons (eg. on .material-icons), some icons appeared, some stayed hidden and some showed incorrect icons (eg. keyboard_arrow_down was rendered as keyboard icon only).

Also it seems while font-kerning: auto seems to enable it by default in other browsers, this does not seem to happen at all in the playwright webkit.

Without font-kerning: normal

With font-kerning: normal

How it should like like eg. in Chrome:

Any ideas on how to solve this?

[fujii]

WebKit bug:
201214 – [Win][Uniscribe] Material icons containing underscore or numbers aren't shown because ScriptItemize splits them apart
https://bugs.webkit.org/show_bug.cgi?id=201214

[fujii]

And, this:

201213 – [Win] Material icons font aren't shown because ligature doesn't work
https://bugs.webkit.org/show_bug.cgi?id=201213

[olee]

Can someone explain, why this this works in Safari, but not in the playground WebKit browser?
I know that Safari probably adds some stuff on top of WebKit, so is a fix for this probably part of this was well?
I tried finding some information regarding this, but could not find anything

[pavelfeldman]

I addressedit a while ago, forgot to close the bug, so it should work in playwright@next. The reason behind this is that WebKit relies upon platform-specific APIs when rendering text, accessing network, etc. That's a WebKit philosophy. Windows port uses Uniscribe for that and it was not happy about Material font trick where a 3d_rotation text was supposed to render as a single ligature glyph. Windows api was aggressively tokenizing it into digits, _ and letters, so the ligature was never coming together.

[pavelfeldman]

@olee ^^

[olee]

Ok, now I get loading font icons when starting the playwright browser manually and go to my page, but when it is launched from code, no icon fonts will render at all:

    const browser = await playwright.webkit.launch({ headless: false });
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://material.io/resources/icons');

[olee]

Yes I can confirm. When you let playwright start with the code above, the font icons are not loaded/rendered correctly.
However, if you then open the devtools in webkit and reload the page, they show up.

[arjunattam]

I'm facing a similar issue with WebKit on GitHub Actions, with Linux (build) and Windows (build). WebKit on macOS (build) is working. Link to app.

Sharing relevant screenshots from build artifacts below:

Webkit on macOS

Webkit on Windows

Webkit on Ubuntu

[JoelEinbinder]

Whats happening here is that we set our useragent to mimic Safari, and google fonts sends us a woff2 file which we cant process. But opening the inspector resets the useragent to be windows, and google fonts sends a ttf file that we can parse.

Options:

1. Add woff2 support to our windows build to match mac safari. I'm looking into how hard this will be now.
2. Stop lying in our user agent. This might break tests/sites that don't expect to see webkit for windows out in the wild.

[JoelEinbinder]

The linux issue is something more specific. I can only reproduce it in WPE, not in GTK. The font loads, appears to parse fine, and then the text does not render. The text has some metrics, but they appear to be wrong. It looks to be something specific to the 'Material Design' font, as there is a LayoutTest for woff2 that passes for playwright+WPE. WPE and GTK share the same font rendering code for the most part, so I don't know where a difference could have creeped in.

1. Add woff2 support to our windows build to match mac safari. I'm looking into how hard this will be now.
   Woff2 just changes the compression over woff1.

On GTK/WPE:
woff2 file -> libwoff -> freetype
woff file -> custom code -> freetype

On Windows:
woff2 file -> bail out
woff -> custom code -> cairo

On Mac/iOS:
woff2 file -> CoreText
woff file -> CoreText

The very recent version of FreeType (2.10.0) supports Woff2 out of the box, and should also support windows. Moving windows to use FreeType instead of cairo, and bumping the freetype, could get woff2 support. Another option would be to port libwoff or an equivalent to windows and keep sending the fonts to cairo.

[JoelEinbinder]

Minimal html file:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Material Font Test</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
        rel="stylesheet">
</head>
<body>
    <i class="material-icons">face</i>
</body>
</html>

[philn]

For WPE you would need to set this env var: WEBKIT_FORCE_COMPLEX_TEXT=1. It is not enabled by default in WPE yet. We will need to assess the performance impact of unconditionally enabling this support.

[donny-dont]

I added the woff2 library in WebKitForWindows/WebKitRequirements@d7ec854 and will package up a release with it once I verify a local build with the updated libraries.

Unfortunately woff2 doesn't build out of the box as a .dll. The library itself doesn't use __declspec and doesn't have a .def file. The GitHub repo https://github.com/google/woff2 doesn't look like it responds to PRs so if we wanted to we'd have to patch it locally to make shared libraries.

The FindWOFF2 module needs to be expanded to find the common library. I'll start putting together a patch for that. The module can be modernized anyways. But unfortunately I'll also have to make a FindBrotli module to make everything link properly before I can turn things on for Windows.

[donny-dont]

Oh also with regards to WOFF2 on GTK/WPE the FreeType library got support for loading WOFF2 directly in version 2.10.2. Check the release notes at https://sourceforge.net/projects/freetype/files/freetype2/2.10.2/ for more information.

@philn not sure if that's something Igalia plans to migrate to and remove the libwoff2 bits. If you all don't get to it first I was thinking about taking a stab at using Freetype to load WOFF2 if the version supports it.

[philn]

@donny-dont I don't know what the plan is about freetype/woff2. Can you open a bugzilla ticket about this? I suppose it makes sense to migrate indeed, keeping backward compatibility for a while.

[donny-dont]

Here you go https://bugs.webkit.org/show_bug.cgi?id=213862 just in case anyone in this issue wants to watch it.

[donny-dont]

For Windows support the requirements have been updated with woff2 with this release https://github.com/WebKitForWindows/WebKitRequirements/releases/tag/v2020.07.01

And on WebKit I updated the WOFF2 target in anticipation of WinCairo turning on USE_WOFF2 https://bugs.webkit.org/show_bug.cgi?id=213865

There will be a couple patches after that. One for a Brotli module and then one turning on USE_WOFF2 for Windows.

[fujii]

Bug 214174 – [WinCairo] WOFF2 font support
https://bugs.webkit.org/show_bug.cgi?id=214174

[pavelfeldman]

We picked the changes above in the recent roll 08b0dc6. It should now be fixed.

[arjunattam]

I can confirm this works with latest playwright@next. Check artifacts on this Actions run.

[subodhpareek18]

I have an issue with rendering fonts on webkit on windows as well. Not sure if it's related to this issue, but thought it was better to chime in here than create a new issue.

Chromium

Firefox

Chromium - Mobile / Pixel 5

Webkit

Webkit - iPad 7

Webkit - iPhone 11

Webkit - iPhone 7

To my surprise iPhone 7 is rendering the fonts correctly, but no other webkit device is. When I open the webpage on actual physical devices I have access to like various iPhones, iPads and Macs. The fonts load just fine. Wondering what am I missing in my setup. Not only is the font not loading at all, the font weights are not being respected anywhere for the default system font.

My setup involves loading a Google Webfont on my Next.js app. Here is the main _app.js component

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;800&display=swap"
          rel="stylesheet"
        />
      </Head>
      <GlobalStyles />
      <Component {...pageProps} />
    </>
  );
}

And here is the bit in the global styles dealing with the font-family

body, h1, h2, h3, h4, h5, h6, p, ol, ul, button, input, select, textarea {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

[mxschmitt]

@subodhpareek18 I would recommend opening a new issue, otherwise its hard to track and triage.

[subodhpareek18]

@mxschmitt okay will do that