playwright: [BUG] Webkit font rendering (spacing / icon fonts)
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?
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 3
- Comments: 23 (9 by maintainers)
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
Bug 214174 – [WinCairo] WOFF2 font support https://bugs.webkit.org/show_bug.cgi?id=214174
For Windows support the requirements have been updated with
woff2with this release https://github.com/WebKitForWindows/WebKitRequirements/releases/tag/v2020.07.01And on WebKit I updated the WOFF2 target in anticipation of WinCairo turning on
USE_WOFF2https://bugs.webkit.org/show_bug.cgi?id=213865There will be a couple patches after that. One for a Brotli module and then one turning on
USE_WOFF2for Windows.Here you go https://bugs.webkit.org/show_bug.cgi?id=213862 just in case anyone in this issue wants to watch it.
I added the woff2 library in https://github.com/WebKitForWindows/WebKitRequirements/commit/d7ec85415ec5cd54fe09e8c1242b2680921c42d3 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__declspecand doesn’t have a.deffile. 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
FindWOFF2module 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 aFindBrotlimodule to make everything link properly before I can turn things on for Windows.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_rotationtext 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.