Intent to Prototype: Deprecated and remove font-family: -webkit-pictograph

207 views
Skip to first unread message

Frédéric Wang

unread,
Aug 13, 2021, 8:23:59 AM8/13/21
to blink-dev

Contact emails

fw...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-fonts/#font-family-prop

Summary

Deprecate and remove special handling of the <family-name> "-webkit-pictograph" which selects a font from the corresponding user preference. In Chromium, the defaults are:

- Apple Color Emoji on macOS (and iOS/WebKit)

- Segoe UI Symbol on Windows

- Times New Roman on Linux

- Noto Color Emoji on ChromeOS

- This feature is not implemented on Android.

Blink component

Blink>Fonts

Motivation

- Remove non-standard property inherited from WebKit's implementation.

- Improve spec conformance and cleanup existing font-family code.

- Prepare for future implementation of font-family e.g. a replacement would be "font-family: emoji"


Initial public proposal



TAG review



TAG review status

Not applicable

Risks



Interoperability and Compatibility

This feature was implemented by Apple in 2011 before the Blink fork and is still implemented in WebKit. It has never been implemented in Firefox.

A HTTPArchive search from March 2020 provided 1903 pages out of ~5millions (i.e. 0.0003806%). I'm adding a user counter to actually measure when a -webkit-pictograph font is actually resolved to the corresponding user font setting which may give more accurate/relevant data.

One motivation is to improve interop with Firefox and spec compliance. But I'm also trying to refactor our internal font-family implementation that is inherited from WebKit time and is a bit messy right now. Original generic names like "serif" or "cursive" have web-exposed bugs ; the recently implemented "system-ui" too but behaves inconsistently ; and we have non-standard values like -webkit-pictograph. Once things are cleaned up, we can consider implementing new values like font-family: emoji, math, fangsong, ui-serif, etc without adding more problems...

... however, one can also argue that it's would be better to implement "font-family: emoji" as a replacement/alias to "font-family: -webkit-pictograph" before deprecating/removing the latter. Again, this is possible but mean we would add more web-exposed bugs / inconsistencies in the meantime.

So I'm not really sure about the best approach. Sending "Intent to Prototype" for now and waiting for feedback.

Gecko: Positive No support for -webkit-pictograph

WebKit: No signal (https://lists.webkit.org/pipermail/webkit-dev/2021-August/031938.html) This has been implemented in WebKit since 2011. In general Apple is against removing features that could potentially break web compat or their platform. I asked them to see if they would be happy to add "font-family: emoji" as an alias for -webkit-pictograph, as they did for "system-ui". In general about the current font-family implementation, Myles C. Maxfield commented in the github PR to add WPT tests that he is aware of the issue and doesn't think it's desirable that these -webkit-* values are web-exposed.

Web developers: No signals "font-family: emoji" was added in the CSS fonts spec, so I guess there is interest to make this more standard. I was not able to find the github discussion, though.


Debuggability

font-family are accessible via standard CSS UI in DevTools.



Is this feature fully tested by web-platform-tests?

Yes

Flag name



Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1065468

Estimated milestones



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5171427683598336

This intent message was generated by Chrome Platform Status.
-- 
Frédéric Wang

Frédéric Wang

unread,
Aug 19, 2021, 1:36:37 AM8/19/21
to blin...@chromium.org
Le 13/08/2021 à 14:23, Frédéric Wang a écrit :


Interoperability and Compatibility

This feature was implemented by Apple in 2011 before the Blink fork and is still implemented in WebKit. It has never been implemented in Firefox.

A HTTPArchive search from March 2020 provided 1903 pages out of ~5millions (i.e. 0.0003806%). I'm adding a user counter to actually measure when a -webkit-pictograph font is actually resolved to the corresponding user font setting which may give more accurate/relevant data.

One motivation is to improve interop with Firefox and spec compliance. But I'm also trying to refactor our internal font-family implementation that is inherited from WebKit time and is a bit messy right now. Original generic names like "serif" or "cursive" have web-exposed bugs ; the recently implemented "system-ui" too but behaves inconsistently ; and we have non-standard values like -webkit-pictograph. Once things are cleaned up, we can consider implementing new values like font-family: emoji, math, fangsong, ui-serif, etc without adding more problems...

... however, one can also argue that it's would be better to implement "font-family: emoji" as a replacement/alias to "font-family: -webkit-pictograph" before deprecating/removing the latter. Again, this is possible but mean we would add more web-exposed bugs / inconsistencies in the meantime.

So I'm not really sure about the best approach. Sending "Intent to Prototype" for now and waiting for feedback.

Gecko: Positive No support for -webkit-pictograph

WebKit: No signal (https://lists.webkit.org/pipermail/webkit-dev/2021-August/031938.html) This has been implemented in WebKit since 2011. In general Apple is against removing features that could potentially break web compat or their platform. I asked them to see if they would be happy to add "font-family: emoji" as an alias for -webkit-pictograph, as they did for "system-ui". In general about the current font-family implementation, Myles C. Maxfield commented in the github PR to add WPT tests that he is aware of the issue and doesn't think it's desirable that these -webkit-* values are web-exposed.

Web developers: No signals "font-family: emoji" was added in the CSS fonts spec, so I guess there is interest to make this more standard. I was not able to find the github discussion, though.

So just to follow-up here too,

HTTPArchive result from March 2020 from Yoav were:

* -webkit-pictograph alone represented less than 0.04% of pages.
* -webkit-pictograph + -webkit-body + -webkit-standard represented less than 0.1426%

That sounded big, so I had started to prepare a use counter that would provide finer measurement (i.e. only measure when the font family setting is actually resolved for -webkit-pictograph) : https://chromium-review.googlesource.com/c/chromium/src/+/2124260

New results from August 2021 provided by Yoav and Dominik showed that together -webkit-pictograph + -webkit-body + -webkit-standard represent less than 0.004% of HTTPArchive pages so it's an order of magnitude smaller.

Reference doc: https://docs.google.com/document/d/1nYJzL-MWQrTmf9Z-KscTWuM_5n6-IVdJeEllJ3Appro

-- 
Frédéric Wang

Yoav Weiss

unread,
Aug 19, 2021, 2:44:00 AM8/19/21
to Frédéric Wang, blink-dev
I just re-ran the pictograph query and got 3231 results out of ~7.5 million pages, which puts us back in the 0.04% range.

Adding a use-counter sounds like a reasonable way to see what actual usage looks like. 

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/e6efc0e1-34a4-8546-a03e-53d69871ded5%40igalia.com.

Sonia Singla

unread,
Nov 5, 2021, 10:00:27 AM11/5/21
to blink-dev, yoav...@chromium.org, blink-dev, fw...@igalia.com
Average usage during October for font-family: webkit-pictograph was 0.00003094

Yoav Weiss

unread,
Nov 8, 2021, 1:52:28 AM11/8/21
to blink-dev, ssi...@igalia.com, yoav...@chromium.org, blink-dev, fw...@igalia.com
Link to the use counter?

Sonia Singla

unread,
Nov 8, 2021, 3:50:42 AM11/8/21
to blink-dev, Yoav Weiss, Sonia Singla, yoav...@chromium.org, blink-dev, fw...@igalia.com
Hi Yoav,


Monthly average on 1 Nov: 0.002803%

Yoav Weiss

unread,
Nov 10, 2021, 2:01:27 PM11/10/21
to blink-dev, ssi...@igalia.com, Yoav Weiss, Yoav Weiss, blink-dev, fw...@igalia.com
Removal seems reasonable with those numbers. What's the deprecation timeline you're looking for?

Daniel Bratell

unread,
Nov 10, 2021, 4:11:43 PM11/10/21
to Yoav Weiss, blink-dev, ssi...@igalia.com, Yoav Weiss, fw...@igalia.com

The 0.0028% number is low, but I wonder what the effect will be on the sites that use webkit-pictograph today. Will they get another font containing the same glyphs, or is there a risk a symbol won't show at all?

If they "just" gets a differently looking font, then the risk is even smaller.

/Daniel

Frédéric Wang

unread,
Nov 11, 2021, 4:43:58 AM11/11/21
to Daniel Bratell, Yoav Weiss, blink-dev, ssi...@igalia.com, Yoav Weiss
Le 10/11/2021 à 22:11, Daniel Bratell a écrit :

The 0.0028% number is low, but I wonder what the effect will be on the sites that use webkit-pictograph today. Will they get another font containing the same glyphs, or is there a risk a symbol won't show at all?

If they "just" gets a differently looking font, then the risk is even smaller.

/Daniel

Hi, in general when you have a character in a page, browsers will do their best to select a glyph for that characters, trying available fonts, with the choice guided by the list specified in font-family. So I believe (font expert please correct me if I'm wrong) removing a generic font family should just affect the choice, not the visibility of the symbol.

Moreover, quoting the initial message of this thread:

Le 13/08/2021 à 14:23, Frédéric Wang a écrit :

- Apple Color Emoji on macOS (and iOS/WebKit)

- Segoe UI Symbol on Windows

- Times New Roman on Linux

- Noto Color Emoji on ChromeOS

- This feature is not implemented on Android.

So first this change won't affect Android. Moreover, I suspect we have more fonts with good emoji coverage these days, compared to when this was implemented 10 years ago (I'm not sure "Times New Roman" is really helpful or the best choice on Linux for example).

Finally, as an alternative (and maybe replying to Yoav) we could in parallel implement "font-family: emoji" as a replacement (keeping the same preference on Desktop and maybe clever selection on Android) and deprecate -webkit-pictograph (remapping it to "emoji" in the meantime). This would be similar to what was done for "system-ui" here:

https://groups.google.com/a/chromium.org/g/blink-dev/c/hvN9YVvIb5c

And we could also do the same in WebKit:

https://lists.webkit.org/pipermail/webkit-dev/2021-August/031938.html

What do you think?

-- 
Frédéric Wang

Chris Harrelson

unread,
Nov 11, 2021, 11:39:39 AM11/11/21
to Frédéric Wang, Dominik Röttsches, Daniel Bratell, Yoav Weiss, blink-dev, ssi...@igalia.com, Yoav Weiss
I discussed offline with font experts (Dominik in particular) and they confirmed that removal of -webkit-pictograph would provide ok-looking fallbacks. They also agreed that it would be a good idea to implement font-family: emoji, and we're looking into finding someone to do that, but that doesn't have to block this intent.

LGTM1 to remove -webkit-pictograph now without a deprecation period.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Daniel Bratell

unread,
Nov 11, 2021, 3:00:29 PM11/11/21
to Chris Harrelson, Frédéric Wang, Dominik Röttsches, Yoav Weiss, blink-dev, ssi...@igalia.com, Yoav Weiss

LGTM2

/Daniel

Yoav Weiss

unread,
Nov 11, 2021, 3:46:59 PM11/11/21
to Daniel Bratell, Chris Harrelson, Frédéric Wang, Dominik Röttsches, blink-dev, ssi...@igalia.com
LGTM3
Reply all
Reply to author
Forward
0 new messages