Bug 180073 – All text should enable tracking, not just system-ui

• Component: Text
• Status: NEW

[zhouqi]

Created attachment 327744 [details]
real case

"font-family: system-ui" will cause chinese word spacing becomes larger, and the "font-weight:bold" effect becomes strange.

here is a demo：https://codepen.io/zhouqicf/full/ZaMNNo

here is the code:

<code>font-family:system-ui, -apple-system, Helvetica Neue, Helvetica, sans-serif;font-weight:bold;</code>

add "PingFang SC" can fix the issue: 

<code>font-family:PingFang SC, system-ui, -apple-system, Helvetica Neue, Helvetica, sans-serif;font-weight:bold;</code>

[Myles C. Maxfield]

Can you provide a link (or a .webarchive file) of the real case?

It looks like the Chinese characters (这是一个 and 的测试) are drawn the same. Is this bug report about the English text or the Chinese text in the codepen?

[Myles C. Maxfield]

In the first line of your example, the English text is being rendered with San Francisco (which is the correct "system-ui" font).

In the second line of your example, the English text is being rendered with Ping Fang, which supports English characters.

[zhouqi]

(In reply to Myles C. Maxfield from comment #2)
> In the first line of your example, the English text is being rendered with
> San Francisco (which is the correct "system-ui" font).
> 
> In the second line of your example, the English text is being rendered with
> Ping Fang, which supports English characters.


look at the demo's screen shoot which is running on iPhoneX (iOS 11): https://img.alicdn.com/tfs/TB1jk47fILJ8KJjy0FnXXcFDpXa-1125-2436.png

The Chinese is rendered with Ping Fang both, but you can see the "word spacing", "font weight" and even "color" is not same.

[Myles C. Maxfield]

We enable advanced text tracking with system-ui, but don't enable it for other fonts (like PingFang). This is because of performance. The color of all the text in the screen shot you provided is pure black (#000000) - I verified this by opening the screenshot in Photoshop. The weight of the Chinese characters is the same between the two lines, and the weight of the English text is different between the two lines because different fonts are being used to render the English text on the two lines.

[zhouqi]

(In reply to Myles C. Maxfield from comment #1)
> Can you provide a link (or a .webarchive file) of the real case?
> 
> It looks like the Chinese characters (这是一个 and 的测试) are drawn the same. Is
> this bug report about the English text or the Chinese text in the codepen?

Sorry we had fixed this issue by add "PingFang SC" yesterday, but this page can reproduce this issue: https://chaoshi.m.tmall.com/industry-market.htm?pos=4&cateId=4 . Please visit it in two days, because we will fixed it.

And here is the screen shoot:

with system-ui: https://img.alicdn.com/tfs/TB16y00fH_I8KJjy1XaXXbsxpXa-1125-2436.png

without system-ui: https://img.alicdn.com/tfs/TB1vO40fH_I8KJjy1XaXXbsxpXa-1125-2436.png

You can see the different of word spacing is very obvious.

[zhouqi]

(In reply to Myles C. Maxfield from comment #4)
> We enable advanced text tracking with system-ui, but don't enable it for
> other fonts (like PingFang). This is because of performance. The color of
> all the text in the screen shot you provided is pure black (#000000) - I
> verified this by opening the screenshot in Photoshop. The weight of the
> Chinese characters is the same between the two lines, and the weight of the
> English text is different between the two lines because different fonts are
> being used to render the English text on the two lines.

Sorry, the difference of color and font-weight my sensory judgment. 

So how about the word spacing? This is the biggest problem.

In addition, if the system-ui is for english only, what is your suggestion? In environments other than English, we should use other fonts for English display? I think this will cause the English display different in native app between web page.

[Myles C. Maxfield]

(In reply to zhouqi from comment #6)
> (In reply to Myles C. Maxfield from comment #4)
> > We enable advanced text tracking with system-ui, but don't enable it for
> > other fonts (like PingFang). This is because of performance. The color of
> > all the text in the screen shot you provided is pure black (#000000) - I
> > verified this by opening the screenshot in Photoshop. The weight of the
> > Chinese characters is the same between the two lines, and the weight of the
> > English text is different between the two lines because different fonts are
> > being used to render the English text on the two lines.
> 
> Sorry, the difference of color and font-weight my sensory judgment. 
> 
> So how about the word spacing? This is the biggest problem.
> 
> In addition, if the system-ui is for english only, what is your suggestion?
> In environments other than English, we should use other fonts for English
> display? I think this will cause the English display different in native app
> between web page.

When WebKit sees "system-ui", WebKit substitutes it for a list of constituent fonts, one for each language. One of these constituent fonts is San Francisco, and one is Ping Fang. All of these constituent fonts get advanced tracking turned on.

So, when you say "font-family: system-ui, PingFang SC", WebKit interprets this as "font-family: San Francisco with advanced tracking, (some other fonts with advanced tracking), PingFang with advanced tracking, (more fonts with advanced tracking), PingFang SC". You can see how "system-ui" gets expanded to a list of system fonts with advanced tracking, but anything else in the original font-family list remains untouched.

Similarly, when you say "font-family: PingFang SC, system-ui", WebKit interprets this as "font-family: PingFang SC, San Francisco with advanced tracking, (some other fonts with advanced tracking), PingFang with advanced tracking, (more fonts with advanced tracking)".

This is how multiple languages work with system-ui.

In the first example, Chinese text would be rendered with PingFang with advanced tracking, and English text would be rendered with San Francisco with advanced tracking. However, in the second example, Chinese text would be rendered with PingFang SC (without advanced tracking) and English text would also be rendered with PingFang SC (because PingFang SC supports English and appears earlier in the fallback list). This is causing the difference in tracking and visual weight.

The solution is probably to enable advanced tracking for all fonts, not just the constituent fonts in system-ui. It wouldn't change the visual weight you described, but it would make the tracking the same between the two examples.

[Myles C. Maxfield]

(In reply to Myles C. Maxfield from comment #7)
> (In reply to zhouqi from comment #6)
> > (In reply to Myles C. Maxfield from comment #4)
> > > We enable advanced text tracking with system-ui, but don't enable it for
> > > other fonts (like PingFang). This is because of performance. The color of
> > > all the text in the screen shot you provided is pure black (#000000) - I
> > > verified this by opening the screenshot in Photoshop. The weight of the
> > > Chinese characters is the same between the two lines, and the weight of the
> > > English text is different between the two lines because different fonts are
> > > being used to render the English text on the two lines.
> > 
> > Sorry, the difference of color and font-weight my sensory judgment. 
> > 
> > So how about the word spacing? This is the biggest problem.
> > 
> > In addition, if the system-ui is for english only, what is your suggestion?
> > In environments other than English, we should use other fonts for English
> > display? I think this will cause the English display different in native app
> > between web page.
> 
> When WebKit sees "system-ui", WebKit substitutes it for a list of
> constituent fonts, one for each language. One of these constituent fonts is
> San Francisco, and one is Ping Fang. All of these constituent fonts get
> advanced tracking turned on.
> 
> So, when you say "font-family: system-ui, PingFang SC", WebKit interprets
> this as "font-family: San Francisco with advanced tracking, (some other
> fonts with advanced tracking), PingFang with advanced tracking, (more fonts
> with advanced tracking), PingFang SC". You can see how "system-ui" gets
> expanded to a list of system fonts with advanced tracking, but anything else
> in the original font-family list remains untouched.
> 
> Similarly, when you say "font-family: PingFang SC, system-ui", WebKit
> interprets this as "font-family: PingFang SC, San Francisco with advanced
> tracking, (some other fonts with advanced tracking), PingFang with advanced
> tracking, (more fonts with advanced tracking)".
> 
> This is how multiple languages work with system-ui.
> 
> In the first example, Chinese text would be rendered with PingFang with
> advanced tracking, and English text would be rendered with San Francisco
> with advanced tracking. However, in the second example, Chinese text would
> be rendered with PingFang SC (without advanced tracking) and English text
> would also be rendered with PingFang SC (because PingFang SC supports
> English and appears earlier in the fallback list). This is causing the
> difference in tracking and visual weight.
> 
> The solution is probably to enable advanced tracking for all fonts, not just
> the constituent fonts in system-ui. It wouldn't change the visual weight you
> described, but it would make the tracking the same between the two examples.

I've retitled the issue to reflect this.

[zhouqi]

Thanks for your explanation. But I think you did not understand my core question.

I understand that the two font-family value will cause the English to appear in different fonts. But why the Chinese's word spacing is different? They are all rendered in PingFang SC.

I verified this by opening the screenshot in Sketch, the font-weight and word spacing is totally different.

https://img.alicdn.com/tfs/TB1MNd1fNrI8KJjy0FpXXb5hVXa-1494-1640.png

[Myles C. Maxfield]

The PingFang font inside system-ui, and "PingFang SC", are different fonts with different word spacing.

[zhouqi]

Sorry, i ignored the "advanced tracking" in your replies.

"The solution is probably to enable advanced tracking for all fonts, not just the constituent fonts in system-ui. It wouldn't change the visual weight you described, but it would make the tracking the same between the two examples."

So this solution will cause the word spacing be larger, even i write "font-family: PingFang SC, sans-serif" ?