Summary: | Letter-spacing is applied before shaping in the fast text codepath | ||||||||
---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Stephen Nixon <stephen> | ||||||
Component: | Text | Assignee: | Nobody <webkit-unassigned> | ||||||
Status: | RESOLVED DUPLICATE | ||||||||
Severity: | Normal | CC: | mmaxfield, webkit-bug-importer | ||||||
Priority: | P2 | Keywords: | InRadar | ||||||
Version: | Safari Technology Preview | ||||||||
Hardware: | Unspecified | ||||||||
OS: | Unspecified | ||||||||
Attachments: |
|
Description
Stephen Nixon
2020-01-28 11:43:05 PST
Observation: Adding the CSS 'font-feature-settings' and any stylistic set makes the spacing respond as expected (even if the stylistic set doesn't affect the characters in a given piece of text). Here is a GIF demonstrating this CSS hack: https://www.dropbox.com/s/u40vn5cbxosg4f6/webkit-bug-report-css-hack_fix-206898.gif?dl=0 This leads me to believe that it might be something related to the text renderer used to render variable fonts ... perhaps a slower / more careful one should be used in text that includes rvrn substitutions? This is a total guess at what is happening and what might fix it, based on my understanding of a fix to an older problem with variable fonts in web browsers (contour overlaps were once rendered with faint hairlines – https://twitter.com/ThunderNixon/status/1009878237068001280?s=20). Created attachment 389104 [details]
Adding a font-feature-settings stylistic set will hack the spacing to work properly again
Adding a font-feature-settings stylistic set will hack the spacing to work properly again. This may be due to a different text renderer being activated by the "advanced" typographic CSS, or something similar.
I'm having trouble reproducing this bug. Do you think you could be a little more specific than "try changing axis sliders to find various glyph substitutions"? It sounds like you're interested in content like: "<div style="font: 48px 'Recursive'; letter-spacing: -10px;">abcd</div>" Is there some other style I can apply that either A) is supposed to look identical to the one above, but doesn't, or B) is supposed to look different to the one above, but actually looks the same? Sorry, I'm just struggling to find something specific to investigate. Thanks for taking a look at this, Miles! Sorry, I could have been more clear. Start with this example: <div style="font: 25vw 'Recursive'; letter-spacing: -0.2em; font-variation-settings: 'ital' 1">ooaoo</div> (also at https://codepen.io/thundernixon/pen/dyoYdaZ?editors=1100) In Chrome or Firefox, all letters are touching. In Safari, the "a" has a huge gap to the right side. This is because it keeps its same "advance width", despite other letter spaces decreases as they should. By contrast, the overall spacing of “o” changes according to letter-spacing. If you change 'ital' to 0, the “a” will change from its italic alternate to its two-story default shape. Now, its spacing will adjust properly with letter-spacing changes. At "letter-spacing: -0.2em;" all letters should touch. But, any alternates, like italic alts, that are subbed in with 'rvrn' (required variation alternates) are unaffected by letter-spacing. You can hack around this by adding a style like: font-feature-settings: 'ss17'; But obviously, this hack isn’t intentional, intuitive, or ideal. In place of “a” you could use any glyph that has an italic alt, such as “b d e g h I j k m n u v w y” (if I’m remembering italic subs in the Sans styles correctly). “o” doesn’t have an alt, so it is unaffected. I realize this is kind of deep in type details, so please let me know if I can clarify any better. Thanks again! Oh, this is because, in the fast text codepath, we apply letter-spacing before shaping, which is wrong. It just usually doesn't cause problems, so AFAIK this is the first bug filed about it. I fixed this in https://bugs.webkit.org/show_bug.cgi?id=214769. *** This bug has been marked as a duplicate of bug 214769 *** |