1605605 - `system-ui` isn't able to select language specific fonts and '.SF Arabic' isn't accessible in any way

Status: NEW

(Core :: Layout: Text and Fonts, defect, P3)

Description

[ebrahim]

Attachment: A.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

data:text/html;charset=utf8,<div style="font-family: '.Arabic UI Text'; font-size: 300%;">%D8%B3%D9%84%D8%A7%D9%85!

Actual results:

It renders with 'Geeza Pro' font in Chrome and 'Arial' font in Firefox which are both wrong, Safari renders it with the correct font and guess devtools also can confirm easily where the glyphs of the text is coming from (which should come from '.Arabic UI Text' but it doesn't). Guess this has something to do with the font name that is prefixed with dot but Safari isn't hiding the font and you shouldn't also.

Expected results:

Same result as Safari

Comment 1

[ebrahim]

Filed as https://crbug.com/1036653 also

Comment 2

[ebrahim]

@jfkthame: 10.13 as the version didn't have '.Arabic UI Text' IIRC

Comment 3

[ebrahim]

@jfkthame: won't happend in 10.13 I guess as the version didn't have '.Arabic UI Text' IIRC, or maybe not, not sure

Comment 4

[Jonathan Kew [:jfkthame]]

Font names that are prefixed with a dot on macOS are generally not supposed to be exposed to the user; they're for internal use by the OS but do not appear in application font menus, etc. So I'm inclined to think they should not be exposed to CSS.

Comment 5

[Jonathan Kew [:jfkthame]]

FWIW, there are quite a number of such "hidden" system fonts; on my 10.13 system I see the following:

.Al Bayan PUA
.Al Nile PUA
.Al Tarikh PUA
.Apple Color Emoji UI
.Apple SD Gothic NeoI
.Aqua Kana
.Arabic UI Display
.Arabic UI Text
.Arial Hebrew Desk Interface
.Baghdad PUA
.Beirut PUA
.Damascus PUA
.DecoType Naskh PUA
.Diwan Kufi PUA
.Farah PUA
.Geeza Pro Interface
.Geeza Pro PUA
.Helvetica LT MM
.Helvetica Neue DeskInterface
.Hiragino Kaku Gothic Interface
.Hiragino Sans GB Interface
.Keyboard
.KufiStandardGK PUA
.LastResort
.Lucida Grande UI
.Muna PUA
.Nadeem PUA
.Noto Nastaliq Urdu UI
.PingFang HK
.PingFang SC
.PingFang TC
.Sana PUA
.Savoye LET CC.
.SF Compact Display
.SF Compact Rounded
.SF Compact Text
.SF NS Display Condensed
.SF NS Text Condensed
.Times LT MM

These are all hidden from content/CSS (by design).

Comment 6

[Jonathan Kew [:jfkthame]]

Notice that these fonts are not mentioned at all, for example, in the list of system fonts at https://developer.apple.com/fonts/system-fonts/. This reflects the fact that they're not meant to be exposed to users by name (although some of them are "UI" variants of fonts that are exposed separately with non-dot-prefixed names).

Comment 7

[Jonathan Kew [:jfkthame]]

Huh, interesting.... it turns out that with gfx.e10s.font-list.shared enabled, we do actually use .Arabic UI Text in this example. I think that's a bug, and we should fix it before we enable that feature by default.

Comment 8

[ebrahim]

Okay, can make sense, can you make a screenshot from

data:text/html;charset=utf8,<div lang="ar" style="font-family: system-ui; font-size: 300%;">%D8%B3%D9%84%D8%A7%D9%85!

In Firefox/Safari/Chrome so I can file a bug in browsers that don't work as expected? The problem is system-ui is supposed to use '.Arabic UI Text' which works correctly in macOS UI itself for Arabic text and Safari but isn't in Firefox and Chrome IIRC so triggering the font directly was the only remained option.

Comment 9

[Jonathan Kew [:jfkthame]]

That's not expected to work in Firefox, at least, as system-ui is not yet implemented (that's bug 1226042).

Comment 10

[ebrahim]

Interestingly I can use '.Arabic UI Text' in Linux if I install it manually there, wish could know what is the supposed way to use the font in macOS just like the UI and Safari, I like to use this good looking font in a site for macOS instead Arial/Tahoma/Geeza Pro and can't find any approach for it, and use Segoe UI and Noto Sans Arabic for Windows and Linux respectively as good system-available counterparts there.

Comment 11

[Hani Yacoub, Desktop QA]

Reproducible on Mac OS X 10.15 on Firefox Nightly 73.0a1, Firefox 72.0b11 and Firefox 71.0.

Comment 12

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:lsalzman, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 13

[Jonathan Kew [:jfkthame]]

(In reply to ebrahim from comment #10)

Interestingly I can use '.Arabic UI Text' in Linux if I install it manually there, wish could know what is the supposed way to use the font in macOS just like the UI and Safari, I like to use this good looking font in a site for macOS instead Arial/Tahoma/Geeza Pro and can't find any approach for it,

In general, I don't think you can expect this to work, because Apple doesn't ship it as a user-exposed font. Just like you can't choose it for the content of a TextEdit.app document. I would argue that Safari is wrong to recognize it in font-family.

The proper way to use this font would be through system-ui, but we haven't implemented that yet. (And of course system-ui doesn't guarantee you'll continue to get the same font on future OS versions, as the system might move to a different Arabic font design.)

Comment 14

[ebrahim]

And of course system-ui doesn't guarantee you'll continue to get the same font on future OS versions, as the system might move to a different Arabic font design.

For my use it will be just OK as I wanted to have access to the best OS provided font and went for selecting it manually as Firefox and Chrome were unable to provide it and am OK to close as system-ui should be guaranteed to work at least like Safari for Arabic in macOS. Thanks :)

Comment 15

[ebrahim]

This is still an issue, the font is renamed to .SF Arabic but still can't be accessed via system-ui, since then Chrome also has fixed and now Firefox is the only browser with issue, compare

data:text/html;charset=utf8,<div lang="ar" style="font-family: system-ui; font-size: 300%;">%D8%B3%D9%84%D8%A7%D9%85!

with Safari and Chrome, only Firefox uses Geeza Pro.