Re: [csswg-drafts] [css-fonts-4] font-display: optional without relayout (#4108)

The CSS Working Group just discussed `font-display`.

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> Topic: font-display<br>
&lt;astearns> github: https://github.com/w3c/csswg-drafts/issues/4108<br>
&lt;TabAtkins> https://github.com/w3c/csswg-drafts/issues/4108<br>
&lt;TabAtkins> github: https://github.com/w3c/csswg-drafts/issues/4108<br>
&lt;fantasai> TabAtkins: When I originally drafted the font-display values, the last one, optional, I intended to be as much as possible "make the user's experience smooth even if they don't get pretty fonts"<br>
&lt;fantasai> TabAtkins: Wasn't super clear in the spec, and implementers came up with answers that don't satisfy that goal<br>
&lt;fantasai> TabAtkins: Within first 100ms or less, still creates a layout jump<br>
&lt;fantasai> TabAtkins: Jake was running into the same problem<br>
&lt;fantasai> TabAtkins: wanted smooth page display without any layout jank, and wasn't getting it<br>
&lt;fantasai> TabAtkins: I believe the current text addresses it, perhaps with an extra comment<br>
&lt;fantasai> TabAtkins: Would like some discussion from y'all<br>
&lt;TabAtkins> https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-display-optional<br>
&lt;fantasai> TabAtkins: My text atm, if font can be loaded "immediately", can be used, otherwise ignore it<br>
&lt;fantasai> TabAtkins: can't be used for the rest of the page's lifetime. Refresh page, can try again<br>
&lt;fantasai> TabAtkins: Paried with some additional info<br>
&lt;fantasai> TabAtkins: MUSTNOT cause the layout of the page to jump<br>
&lt;fantasai> TabAtkins: allowed to delay initial rendering if needed to load the font<br>
&lt;fantasai> TabAtkins: specifically, we have some issues wrt how to do in Chrome, can put more detail in the spec<br>
&lt;fantasai> TabAtkins: Anyone have comments on details?<br>
&lt;fantasai> TabAtkins: If in memory cache for tab, use the font. Otherwise we go to disk, takes too long, skip it<br>
&lt;fantasai> TabAtkins: Once loaded, may ro may not be present for future navigation depending on cache state<br>
&lt;fantasai> TabAtkins: Cannot depend on font ever being there<br>
&lt;fantasai> TabAtkins: Want to make sure that all font pre-loads bring the font into the memcache<br>
&lt;fantasai> TabAtkins: track which fonts are there<br>
&lt;fantasai> TabAtkins: When preloaded font is optional, delay loading to give time to get off disk -- or extremely fastnetwork<br>
&lt;fantasai> TabAtkins: otherwise, don't delay<br>
&lt;fantasai> TabAtkins: If you don't do anything special on your page, just say font is optional<br>
&lt;fantasai> TabAtkins: almost guaranteed to not have font on first page load<br>
&lt;fantasai> TabAtkins: chance of available on future page loads, but not guaranteeed, e.g. if on device with small cache<br>
&lt;fantasai> TabAtkins: If it's a preloaded font, then very likely to be load on future navigations because we will delay rendering to load into memory cache<br>
&lt;heycam> q+<br>
&lt;fantasai> s/small cache/small memory/<br>
&lt;fantasai> TabAtkins: because preloading is a hin that something is important enough to kick of load asap<br>
&lt;fantasai> TabAtkins: That seems to satisfy the use cases for optional that we want to hit<br>
&lt;fantasai> TabAtkins: allowing pl to have completely jank-free font-optional experience<br>
&lt;fantasai> TabAtkins: Try your best to use it, but prioritize no jank<br>
&lt;myles> q+<br>
&lt;astearns> ack heycam<br>
&lt;fantasai> heycam: not sure how much is normative vs heuristics<br>
&lt;fantasai> heycam: but seems a bit weird to me that you have two different behaviors wrt disk cache<br>
&lt;fantasai> heycam: without preloaded fonts, disk cache is deemed too slow, but link rel=preload it's ok?<br>
&lt;fantasai> TabAtkins: Not so much it's too slow, but don't want to incur cost of delaying rendering unless indication that it's important to you<br>
&lt;fantasai> heycam: is this because checking whether the font is in the disk cache is also slow? is it the checking, not the loading?<br>
&lt;fantasai> TabAtkins: in our implementation, memcache check is fast enough to be synchronous, whereas disk cache is async, we kick off without loading<br>
&lt;fantasai> heycam: disk cache can be very fast when it's not too big<br>
&lt;fantasai> TabAtkins: definitely cool to keep things vague enough that UAs can adjust<br>
&lt;fantasai> TabAtkins: but want preload to cause delay<br>
&lt;fantasai> heycam: Other thing I was going to say is I'm not really a big fan of optional<br>
&lt;fremy> q?<br>
&lt;astearns> ack myles<br>
&lt;fantasai> myles: I have a lot to say so split into pieces<br>
&lt;fantasai> myles: Firstly, wnat to make sure it's clear that WebKit will never ever defer first load. So that has to be not a case. that's our philosophy<br>
&lt;fantasai> myles: Can you be super clear about which, you listed like 3 main pieces<br>
&lt;fantasai> myles: one is deleted number 100ms and replaced with words<br>
&lt;fantasai> myles: one is never cause layout jank<br>
&lt;fantasai> myles: last one was about preloading<br>
&lt;fantasai> myles: which are normative<br>
&lt;fantasai> TabAtkins: first two are normative, in the spec<br>
&lt;fantasai> TabAtkins: third one I would like to put in the spec<br>
&lt;fantasai> myles: The spec shouldn't use words mem cache and disk cache, those are impl details<br>
&lt;fantasai> myles: still not guaranteed to get the font even if preload<br>
&lt;fantasai> myles: there's nothing testable here<br>
&lt;fantasai> myles: So I think this should be evangelism, not in a spec<br>
&lt;fantasai> myles: "for our browser, you will get better results if you preload"<br>
&lt;fremy> q+<br>
&lt;fantasai> TabAtkins: Talking to internal customers who want no jank on initial load<br>
&lt;fantasai> TabAtkins: if they don't get it, and instead block loading page, that's a worse user experience<br>
&lt;fantasai> TabAtkins: so having some reasonable assurance of similar behavior among browsers would be worthwhile<br>
&lt;fantasai> TabAtkins: ultimately stochastic, cna't depend on it, but difference between 80% and 10%<br>
&lt;fantasai> myles: Are your internal customers only considering Chrome, or also other browsers?<br>
&lt;fantasai> [unminuted]<br>
&lt;fantasai> myles: Other piece I want to mention, dbaron brought up a super valuable point<br>
&lt;fantasai> myles: I think it supports what heycam said as is last sentence<br>
&lt;fantasai> dbaron: One of my concerns with this is that a lot of stuff around downloadable fonts is designed to deal with the possibility that you have a pretty large number of faces for various reasons<br>
&lt;fantasai> dbaron: You might have fonts egmented by character range, multiple weights 4-6 of them, a lot of the mechanisms around downloadable fonts were designed to load lazily<br>
&lt;fantasai> dbaron: define a library, fetch the ones you need<br>
&lt;fantasai> dbaron: so some of this pre-loading stuff...<br>
&lt;fantasai> dbaron: there are cases where you just use one font<br>
&lt;fantasai> dbaron: those cases probably bias towards symbol font hacks, and text that is all Latin<br>
&lt;fantasai> dbaron: and maybe things are more complicated in non-Latin languages, or things that use more weghts and stuff like that<br>
&lt;fantasai> dbaron: one of my big concerns about font-display is that it is per-face<br>
&lt;fantasai> dbaron: can have situation where your regular font cached and bold font isn't<br>
&lt;fantasai> dbaron: and using downloadable font permanently for regular weight and local font for bold might be worse than all of the other cases<br>
&lt;fantasai> TabAtkins: Those can still totally happen is the font load just doesn't occur<br>
&lt;fantasai> dbaron: if you have network failures can happen<br>
&lt;fantasai> myles: optional makes it more likely that it fails<br>
&lt;myles> q_<br>
&lt;myles> q+<br>
&lt;astearns> ack fremy<br>
&lt;fantasai> fremy: As an author, at this point, with current proposal for optional, I would be very unlikely to use it. Because more likely to not get your font than to get it<br>
&lt;fantasai> fremy: why bother?<br>
&lt;fantasai> fremy: Only if user keeps using your site regularly, not going to be in memory<br>
&lt;dbaron> s/other cases/other cases (including flashing, or fallback for all the fonts)/<br>
&lt;fantasai> fremy: not unless constantly in use<br>
&lt;fantasai> myles: no, it's valuable for web sites while you're navigating through mutiple pages on the site<br>
&lt;fantasai> TabAtkins: won't work on single-page app, don't use it in one<br>
&lt;AmeliaBR> q+<br>
&lt;fantasai> fremy: You're extremely unlikely to get the font, then why bother? You are going to download the font anyway.<br>
&lt;fantasai> TabAtkins: Your case is a single-page app that gets closed and reopneed every day<br>
&lt;astearns> zakim, close queue<br>
&lt;Zakim> ok, astearns, the speaker queue is closed<br>
&lt;fantasai> TabAtkins: preload signal intention is that, if it's still in your disk cache, it will likely get used the 2nd day and subsequent days, because giving it enough time fo rthat<br>
&lt;fantasai> fremy: Safari said they don't want to block rendering<br>
&lt;fantasai> myles: Internal clients care that usage gets up to 80%, but we're absolutely not going to block rendering<br>
&lt;fantasai> myles: That's not going to work in Safari<br>
&lt;fantasai> TabAtkins: assuming ppl aren't using optional, then comfortable with janky 2 frames and then stable layout<br>
&lt;fantasai> myles: I'm OK with you've shown the page with fallback font then never show the page with loaded fonts<br>
&lt;fantasai> TabAtkins: ...<br>
&lt;fantasai> TabAtkins: If it's likely that optional will never give them assurance to see font, then they'll use JS to delay rendering manually<br>
&lt;fantasai> TabAtkins: or will use one of the values that wll cause jank anyway<br>
&lt;fantasai> myles: This is an intractable problem. We can't never delay rendering and have the disk cache be able to serve tehse requests<br>
&lt;fantasai> myles: given that these customers will never get what they're aiming for, I don't think that the association with preloading makes sense<br>
&lt;fantasai> TabAtkins: Want to check understanding<br>
&lt;fantasai> TabAtkins: website authors using fallback, getting a couple frames in one font and then frames in other font, it's better than getting a few frames of nothing and thn getting the page?<br>
&lt;fremy> q+<br>
&lt;fantasai> s/thn/then/<br>
&lt;myles> q-<br>
&lt;astearns> ack AmeliaBR<br>
&lt;fantasai> AmeliaBR: I've heard a lot of confusion of what's the purpose of this value<br>
&lt;fantasai> AmeliaBR: Tab said the goal was to avoid jank<br>
&lt;fantasai> AmeliaBR: If that's the goal then maybe other smarter ways this can happen, like waiting until doing a major repaint anywan and then block in the font<br>
&lt;fantasai> AmeliaBR: catches the single-page app update situation<br>
&lt;fantasai> AmeliaBR: but I don't kno if that's the best<br>
&lt;fantasai> AmeliaBR: As a user, the idea of downloading fonts but then not using them unless I happen to close the page and re=-open it before it gets lost from the cache, that's not a great use of my data plan<br>
&lt;fantasai> TabAtkins: UA is allowed to skip downloading if it thinks that's reasonable in the circumstances, and metered data is definitely such a circumstance.<br>
&lt;fantasai> astearns: Done for today<br>
&lt;fantasai> Meeting closed.<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4108#issuecomment-577802886 using your GitHub account

Received on Thursday, 23 January 2020 18:13:06 UTC