[css-font-loading] font-loading-display F2F discussion summary

During the past two days at the CSSWG F2F there were two discussions of
how to control the display of downloadable fonts while fonts are
loading. See below for the IRC log of the discussion from both days.

There were two resolutions, I've summarized these with a rough sketch of
spec text.

1. Control is an @font-face rule descriptor, not a property

2. Values are as defined below, with the exact value names to
   be worked out later:

   font-loading-display: block | swap | fallback | optional

   Value definition (with my alternate value names):

   block (show-blank)

   For text content that uses a currently loading font resource,
   initially display text transparently using some form of fallback
   font. If the font is still unavailable 3s later, display using the
   fallback font. After the font resource is loaded, display text
   using the font resource.

   swap (show-fallback)

   For text content that uses a currently loading font resource,
   immediately display text using a fallback font instead (i.e. the
   font that would be used if the font resource was unavailable).
   After the font resource is loaded, display text using the font
   resource.

   fallback (conditional)

   For text content that uses a currently loading font resource,
   immediately display text using a fallback font instead (i.e. the
   font that would be used if the font resource was unavailable).
   If the font resource is loaded within 3s from the time the load
   begins, display text using the font resource. Otherwise, leave the
   text as it is, displayed in the fallback font.

   optional (conditional local)

   For text content that uses a currently loading font resource,
   display text using font resource if it loads from cache (very
   short timeout), otherwise use the fallback font instead. The
   'optional' value allows UA to not continue loading the font
   for the next time.

Note: the 'optional' value was not sufficiently defined in the minutes,
see below.

Using a timeline to compare these values, we have:

  block:
    blank ==> load within 3000ms ==> font
    blank ==> load after 3000ms ==> fallback ==> font

  swap:
    fallback ==> font

  fallback:
    fallback ==> load within 3000ms ==> font
    fallback ==> load after 3000ms ==> fallback (no change)

  optional:
    fallback(?) ==> load within 100ms ==> font
    fallback(?) ==> load after 100ms ==> fallback (no change)

Issues:

* Is there an 'auto' value here that allows user agents to define the
  default behavior? Or the default value is...?

* The conditional display values, 'fallback' and 'optional', need a lot
  more details defined. For 'optional', during the epsilon period when
  fonts are pulled out of the cache, is blank or fallback text
  displayed? I think blank text makes more sense. Are font loads after
  the timeout aborted? Can user agents skip the load given network
  conditions (e.g. networks with known max bandwidth)? If the font loads
  can be aborted/skipped, the 'optional' value is equivalent to
  disabling the use of this font across *all* pages. This would be the
  same as authors simply not using fonts for low-bandwidth situations --
  is this really the right way for authors to express this?!?

* As defined, I think the 'optional' value is what Florian was
  advocating for but I don't think it's what some of the original Google
  folks wanted. When this value was first described to me it was
  presented as "we don't ever want to see a flash of anything" value,
  such that fonts are either available or not and there's no second
  reflow of text. I think the intended use case was for very
  perf-sensitive pages.

* The use of timeouts based on the timing of resource loads does not seem
like
  the right approach for author controlled behavior. The implicit font
  loading behavior of @font-face fonts means that they usually are
  queued up behind other resources on the page. The more resources on
  the page the longer it will be until those font loads start. I think
  an author-defined control should be based on timeouts correlated with
  the user-perceived page load time. For example, time since
  navigationStart. I think this is actually closer to the behavior that
  several CSSWG members seem to be advocating.

* I think there's a big potential for the conditional display values,
'fallback'
  and 'optional', to produce ransom note effects with common usage
  scenarios. Fonts are used as families, not simply as single faces. If
  a page uses a combination of regular, bold and italic faces, timeouts
  with some of these individual faces will produce text displaying in
  a mixture of fonts (e.g. bold text in the downloadable font, regular
  text in the fallback font).

* I really think this needs to be implemented in conjunction with some form
of
  preload hint, since the late loading behavior of fonts is a major
  reason authors are asking to control behavior during the page
  load phase. The control we're discussing here is only half the
  solution.

* Another concern I have is that I'm not sure how interoperable these values
  will be in practice. Browser implementations such as iOS Safari are
  relatively conservative about the number of times a given element is
  reflowed during the loading process. The natural process of coalescing
  reflows will have the effect of increasing the perceived timeouts
  associated with downloaded fonts. The more conservative the browser is,
the
  longer the timeout will end up being.

Comments:

While I understand the use case for the conditional values, I think
their use in practice will be problematic. That was the reason I was
advocating during the Tuesday discussion that we leave this
functionality to authors using script, at least for the initial version.
Based on the conditions that script users come up with, we can then
attempt to mimic those values in new values for font-loading-display.

I don't really see a need for the 'swap' value. I would prefer to have
the "show blank text initially" value take some sort of short/long
modifier, as Florian suggested before. The "short" modifier would be
very close to 'swap' but the flash of fallback would happen less if you
give it a small "show blank text" period. Similarly, the current
proposal eliminates the value for authors that want something closer to
current Safari behavior. I think allowing a longer timeout for font
resources that are really required is important.

Regards,

John Daggett


IRC minutes from the two font loading control discussions:

Tues PM discussion
========================================
<fantasai> Topic: font-display-loading property
<jdaggett> original proposal:
http://tabatkins.github.io/specs/css-font-rendering/
<jdaggett> telcon discussion:
https://lists.w3.org/Archives/Public/www-style/2015Apr/0143.html
<jdaggett> font-loading-display proposal:
https://lists.w3.org/Archives/Public/www-style/2015Apr/0216.html
<fantasai> jdaggett: Back in march Tab had a proposal for what was called a
'font-rendering' control
<fantasai> jdaggett: Was to control appearance of text while font resources
were loading
<fantasai> jdaggett: Discussed in April
<fantasai> jdaggett: General consensus, we want the functionality, but
notion of timeouts we should drop
<fantasai> jdaggett: I went back and thought what we should do with it
<fantasai> jdaggett: Which I think is maybe a better way of going about this
<fantasai> jdaggett: Can we project the actual proposal?
<Bert> -> https://lists.w3.org/Archives/Public/www-style/2015Apr/0216.html
proposal
<fantasai> jdaggett: I'm proposing a new property, font-loading-display
<fantasai> jdaggett: 4 keywords
<fantasai>   font-loading-display: auto | fallback | blank-fallback | blank
<fantasai> jdaggett: Essentially these are saying what should be displayed
while font resource is downloaded
<fantasai> jdaggett: auto just means browser decides
<fantasai> jdaggett: fallback means fallback font is immediately displayed
<fantasai> jdaggett: blank-fallback is what FF and ? do
<Bert> q+ to ask if it is a property or a descriptor for @font-face.
<fantasai> jdaggett: Show invisible text, then show fallback font if timed
out
<fantasai> jdaggett: blank is what safari does, show nothing until font
loads
<fantasai> jdaggett: blank is currently not exactly Safari's behavior...
Safari takes forever
<fantasai> jdaggett: At some point, you really need to show the user text.
Can't just show a blank page
<fantasai> TabAtkins: As an alternate proposal, we had a discussion in blink
<fantasai> TabAtkins: We're fine with dropping timeouts
<fantasai> TabAtkins: and using the keywords from original proposal
* fantasai asks for link to Tab's proposal
<fantasai> jdaggett: blank isn't Safari's wait-forever, it's wait a long
time
<fantasai> Florian: I agree that his blank is less bad than Safari's
<Bert> -> http://tabatkins.github.io/specs/css-font-rendering/ Tab's
proposal
<fantasai> Florian: But agree with Tab that it's still pretty bad
<fantasai> Florian: There was a behavior that you display with the fallback
font, start the load, and keep with the fallback font until page is
reloaded, then use real font
<fantasai> (behavior above is optional keyword from Google's proposal)
<fantasai> jdaggett: The notion that during layout decide whether to
display or not based on whether a font is available or not
<fantasai> jdaggett: If font is in the cache, finite amount of time to
figure out if you have the font available
<fantasai> jdaggett: could be as much as 20ms
<fantasai> jdaggett: You're putting a big load into this keyword
* fantasai is confused
<fantasai> TabAtkins: No, we're not.
<fantasai> TabAtkins: It's about a very small UA-defined timeout. If you've
loaded within that time, great. If not, cache is cold, then keep with the
fallback font.
<fantasai> jdaggett: My point is, there will always be a flash.
<fantasai> Florian: The problem isn't with flash
<fantasai> Florian: The problem is with partway into reading the page
<fantasai> Florian: And then stuff shifts under you
<fantasai> TabAtkins: Our timeout for optional is, are we at the point
where we're putting the text on the page?
<fantasai> TabAtkins: If not there yet and loaded font, then go use font
<fantasai> TabAtkins: Otherwise render with falback font
<fantasai> dbaron: I think definition that you gave means some
implementations will never use the optional font, and that's what we don't
want
<fantasai> fantasai: I don't understand what that means
<fantasai> dbaron: Some implementations would have never loaded the font by
the time they do the paint
<fantasai> TabAtkins: They never see that font. From first paint onward, no
change in font
<fantasai> heycam: I think expectation is that first time, very good chance
it won't show, but next time load a page from that site, will see the font.
<fantasai> jdaggett: In a lot of situations, where you really want this is
mobile devices
<fantasai> jdaggett: where the connection is slowery
<fantasai> jdaggett: But those mobile devices are severely
resource-constrained
<fantasai> jdaggett: Whether something shows up in cache is a crapshoot
<fantasai> TabAtkins: That's one of the main cases
<fantasai> TabAtkins: They are the ones that are most likely to not render
the optional font
<fantasai> plinss: Better for mobile perf
<fantasai> jdaggett: font loading API gives authors the most control
<plinss> s/perf/perf</sarcasm>/
<fantasai> jdaggett: I think it makes more sense for authors to script
this, rather than having non-interop
* hober that joke is so 2014, plinss :)
<fantasai> TabAtkins: I'm ok with delaying on the optional keyword until we
have something we agree on
<fantasai> fantasai: I think 'optional' makes sense. I would probably want
that behavior.
* plinss hober, the old jokes will continue until mobile perf improves
<fantasai> dbaron: I would be OK with some definitions of optional, like
Florian's definition
<fantasai> dbaron: Florian's definition was about some small amount of
time. Not predicated on drawing text.
<fantasai> Florian: Things might flash very briefly, but won't shift under
you once you've started reading.
<fantasai> jdaggett: I think in practice, you'll find that for a certain
set of devices that happen to be at some level of cache storage
<fantasai> jdaggett: going to end up seeing on one view,not see the font,
then next view see the font, then load a bunch of stuff, not see hte font,
later then see the font
<fantasai> jdaggett: Don't think usability would be great on this
<fantasai> TabAtkins: I disagree. This is better for optional uses.
<fantasai> TabAtkins: Better to be stable on a given page than swap
sometime while you're reading.
<fantasai> jdaggett: I think the criteria for optional, there are more
parameters that you'll want to use
<fantasai> jdaggett: Think it's better to leave optional behavior to script.
<fantasai> fantasai: I don't want to require script for this. This is a
reasonable behavior that I'd want, and I don't want to script it.
<fantasai> fantasai: Wouldn't want someone reading my article to have the
text shift around 30 seconds after starting to read
<fantasai> fantasai: just to have a nicer font
<Bert> (What does "optional" mean? Aren't all fonts optional? As long as
there is at least one.)
<fantasai> jdaggett: My concern is that flipping back and forth between
pages, the font loads, and then the current layout isn't the same as the
previous layout
<fantasai> jdaggett: We should leave it to authors to script this, and then
if there's a pattern that evovlves, then we can put it into a CSS keyword
<fantasai> jdaggett: I'm unconvinced that this is something we should
specify with just a timeout on the font resource. Also want to consider
what's the state of the page? Are we rendering? etc. Will be parameters not
captured by the proposal.
<fantasai> TabAtkins: Our argument is that there's a common enough case
that we can handle now. Script can handle more complicated cases.
<fantasai> tantek: Page changing the second time you load it -- when you go
back to it. Or the case where you navigate back to it from another page
<fantasai> tantek: That's a red herring.
<fantasai> tantek: Web pages change all the time over time
<fantasai> tantek: Images, ads load over time, new buttons, whatever
<fantasai> tantek: I don't think it's that disturbing t
<fantasai> jdaggett: But if I read halfway through an article, flip to my
mail app, flip back and it rerenders
<fantasai> jdaggett: that's bad
<fantasai> fantasai: That's exactly the point we're making! [except it
changes while you're reading and not even you flipped anything]
<tantek> that's not bad, that's how the web works today
<jdaggett> the problem is the rerender now renders with a different font
which no longer lays out the same way
<jdaggett> and the position where i was reading has now been lost!!
<fantasai> dbaron: The google proposal for optional was basically was
aiming for a zero-second timeout, or something very close to it
<fantasai> dbaron: What Tantek and Elika are saying is that they'd be happy
with the 3 second time out
<fantasai> tantek: Yeah, I'm ok with both
<fantasai> dbaron: But then you fall back
<fantasai> dbaron: In some ways, that's very similar to what's there with
the blank-fallback
<fantasai> dbaron: It's already wait for 3 seconds, if it's not loaded fall
back
<fantasai> TabAtkins: No. It's don't show anything for 3 seconds, then show
the fallback font, then load the real font and render with it onces it's
loaded
<tantek> 3 seconds is too long
<Florian> tantek: +1
<fantasai> discussion of case where links were invisible for 3 seconds
while res tof page was visible, 'cuz using different font for links. Was
very confusing.
<fantasai> dbaron: I think there are 3 quesitons
<fantasai> dbaron: 1. What is the timeout after which your behavior changes
<fantasai> dbaron: 2. What do you do before you hit that time?
<fantasai> dbaron: 3. What do you if the font loads after that timeout?
<fantasai> Florian: There might be two timeouts.
<jdaggett> can't hear!!!
* heycam ok :)
<fantasai> Florian: There's potentially 2 thresholds
<fantasai> Florian: 1 where initially you might be blank or show fallback
<tantek> what's the timeout threshold for showing alt-text while waiting to
load an image?
<fantasai> Florian: Then the font comes in
<ChrisL> similar issue with "You must NEVER do this" where NEVER uses a
downloaded font and has not loaded.
* heycam cannot hear Tab at all
<fantasai> TabAtkins: My spec is exactly that model
<jdaggett> can't hear you now!!
<jdaggett> someone sitting on the mike?!?
<tantek> jdaggett: we're working on it
<jdaggett> kk
<tantek> how about now?
<dbaron> the mics all ran out of attery
<dbaron> battery
<jdaggett> good!
<jdaggett> ah
<dbaron> so we had to switch to hand mics
<dbaron> and pass them around
<jdaggett> charger?
<fantasai> TabAtkins: There are 3 periods: blank period,
swap-if-it-comes-in-otherwise-show-fallback period,
screw-it-just-stick-with-fallback
<fantasai> TabAtkins: Called the blank, swap, and fallback periods
<fantasai> TabAtkins: Keywords just set the boundaries between those three
periods to different values
<fantasai> Florian: I would like to stick with that model.
<fantasai> Florian: I would like to make the periods user-defined.
<fantasai> s/I/Having removed timeouts, I/
<jdaggett> s/user-defined/user-agent defined/
<fantasai> Florian: There are two times that you'd need user-agent defined
-- one is "almost instantaneously", and the other is "after a little while
(e.g. 3sec, but not exactly that necessarily)"
<fantasai> Florian: I don't know how it's defined right now, ...
<fantasai> TabAtkins: Right now it says "Xs or whatever UA heuristics you
want"
<fantasai> jdaggett: I think the keywords from that proposal are really
awful
<fantasai> jdaggett: Would prefer to go along the lines of what we've got
in font-loading-display property
<smfr> q+
* heycam can't hear smfr
<fantasai> plinss: Another difference is that one has a property only, and
the other is descripter and property
<dbaron> we had good table microphones, and it seems their batteries all
last until 5:15pm and then give out
<fantasai> smfr: In webkit, we don't want different font loading behavior
per element.
<fantasai> smfr: We're happy with a rule in the font descriptor, but not in
elements.
<fantasai> smfr: Don't want to have situation where font is loaded but can
only be used in some elements.
<TabAtkins> q+ ChrisL
<plinss> ack smfr
<fantasai> Rossen: I have a more general question related to the topic
<fantasai> Rossen: Strikes me a little bit surprising , dealing with
resource handling in CSS
<fantasai> Rossen: I get it that fonts are intrinsically very important for
everything else that we do
<dbaron> also, we have a hard stop in about 15 minutes for dinner, if my
memory serves
<fantasai> Rossen: But we're not doing anything like this for images or
other media loading
<fantasai> Rossen: whyare we doing this for fonts?
<fantasai> fantasai: Because for fonts you can have a fallback
<fantasai> TabAtkins: And text is more improtant than images
<fantasai> smfr: We've had requests for pseudo-class for loading state of
images (not-yet-loaded)
<fantasai> ChrisL: I agree that this make smore sense as a descriptor than
a property.
<fantasai> ChrisL: Not per-element basis
<fantasai> Florian: Generally yes, but in some cases, you may have the same
font and headlines and body, and you're OK with the headlines flickering,
but not the body flickering.
<fantasai> Florian: So both are useful. If we only have one, descriptor is
better.
<ChrisL> ok, I can go with that
<fantasai> heycam: Could get same behavior by using descriptors
<fantasai> heycam: define different @font-face rules
<fantasai> smfr: Concerned about overhad for implementations, using a
property
<fantasai> Florian: If only one, descriptors only
<fantasai> smfr: font descriptor can have more than one font, so need to
define behavior there
<fantasai> TabAtkins: The timeout is for initialy using a font name
<fantasai> TabAtkins: So if the first one fails at 1s, other one came in
within 1.5s later, then still made it within the 3s timeout
<tantek> :partial pseudo-element for proposed in 1998 for partially loaded
elements including images.
https://www.w3.org/Style/Group/1998/09/progrend-19980930
<fantasai> TabAtkins: If we consider that we already agree that we can
leave discussion of explicit timeouts to later
<tantek> (apologies for the member-only link - that was before I knew
better ;) )
<dbaron> (restaurant said they could only do a large group dinner if we
came at 6pm)
<fantasai> TabAtkins: I'm fine with leaving optional out for now, while we
discuss something that makes everybody happy
<fantasai> TabAtkins: Have two other behaviors that everyone agrees on:
* tantek dbaron how far is the restaurant?
<fantasai> TabAtkins: a) swap - start with fallback, if font loads in
reasonable amount of time, show it otherwise stay with fallback
* heycam finds in Tab's accent that "blank" and "blink" sound pretty
similar :)
<fantasai> TabAtkins: b) blank - start with blank until it loads, if hasn't
loaded by the blank timeout, use fallback
* tantek heycam good point
* fantasai is confused about stability after 30s
<fantasai> leaverou: Why would you want blank?
<fantasai> TabAtkins: Things like brand identity, better to wait to display
than to display in fallback font
<tantek> what about font-loading to render the alt text on an image that's
taking too long to load?
<fantasai> plinss: Not really ideal for body text
* glazou that’s 30 seconds or thirty years?-)
<fantasai> fantasai: What happens if font loads after 30 seconds?
<fantasai> TabAtkins: under my proposal you have an infinite swappable
period
<fantasai> TabAtkins: will always load the real font once it loads
<fantasai> heycam: Unless we make 30 seconds author-controllable, not sure
about new hardcoded timeout
<fantasai> dbaron: Nobody suggesting 30s as a timeout for anything. Just as
an example
* tantek glazou yeah seriously. ^.^
<fantasai> dbaron: of a time after every timeout discussed
<fantasai> dbaron: anyway
<fantasai> dbaron: These two behaviors you're discussing
* glazou tantek, we are all confused about stability after 30, right?-)
* tantek is still wondering about alt text
<fantasai> dbaron: They vary on two characteristics: what you do before,
and also what you do after
* tantek glazou learning rock climbing helped with stability.
<fantasai> TabAtkins: If you have a font that you really-really want to
use, want blank
<fantasai> TabAtkins: Not great for body text
<fantasai> TabAtkins: For cases where blocking behavior is intended
* glazou tantek I chose another path, divorce :-D
<fantasai> TabAtkins: Having it load after an arbitrary amount of time [...]
<jdaggett> um, *lots* of sites use fonts for body text
* tantek glazou didn't that choice, and don't envy you for having it and
doing it.
<fantasai> TabAtkins: For swapping behavior want to prioritize user
something or other .....
* tantek didn't *have
<fantasai> TabAtkins: Can we agree that these two behaviors are good
<fantasai> fantasai: No
<gregwhitworth_> dbaron: John doesn't have one that never swaps


Wed PM discussion
========================================
<fantasai> Topic: font-loading-whatever
<fantasai> TabAtkins: Basic idea is that font, once you request it, goes
through two period
<fantasai> TabAtkins: One is the "blank" period from 0s, which is when you
don't show anything
<fantasai> TabAtkins: Then the "swap period", which is when you show the
font if it's loaded
<fantasai> TabAtkins: And lastly the "screw it" period, which is when you
no longer try to show the font, even if it's loaded
<fantasai> TabAtkins: Question was, do you relayout at the end of the blank
period?
<fantasai> TabAtkins: Yes
<fantasai> fantasai: No
<fantasai> fantasai: You lay out the blank page with the fallback font
metrics. If the real font hasn't loaded yet, the swap period is also using
the fallback font, so no layout change (just visiblity of the font change).
<fantasai> fantasai: Relayout happens when the real font gets used.
<fantasai> ChrisL: What's the value of having the blank period
<fantasai> ?
<fantasai> TabAtkins: 2 use cases. One is not good, but ppl do anyway
<fantasai> TabAtkins: Using icon fonts. Good icon fonts are ligatures, no
problem with fallback font. But bad icon fonts, using pictures for
arbitrary letters, those ones shouldn't show anything
<fantasai> TabAtkins: because otherwise show random letters
<fantasai> TabAtkins: The ther use case is where the particular font is
important, and it's better to show nothing for a little bit, rather than
showing anything
<fantasai> ChrisL: That second case is very rare. SVG had ppl arguing that
way, and 10 years later isn't not significant.
<fantasai> Florian: I think it's the default because of icon fonts
<BradK> Like with a Klingon font?
<fantasai> iank: There's also a case where you know it's going to load in a
reasonable amount of time, so you don't want to show anything in the
meantime
<fantasai> plinss: wrt icon fonts, that's the case of you never want to
fall back ever
<fantasai> TabAtkins: Not sure about that
<BradK> "isn't not significant"?
<fantasai> ChrisL: Why not have a 'none' generic font family? You can put
font-family: Icon Font, none;
<fantasai> TabAtkins: I kinda disagree because if the icon never shows up,
at least there's a visible something that you can learn means "log out" or
whatever
<fantasai> ChrisL: Couldn't you learn about a magic blank space?
<fantasai> TabAtkins: If you limit the blank phase for a small amount of
time, the user is assessing the page, but hasn't begun really interacting
with it yet
<fantasai> iank: This is what we did  in ?, just showing the basic
structure even before we show the content has a huge user benefit
<fantasai> iank: Facebook does this, for example
<fantasai> TabAtkins: You get a much better perceived load time
<fantasai> TabAtkins: Keywords in question
<fantasai> TabAtkins: Under my proposal we have block , swap, optional
<fantasai> TabAtkins: block sets the thresholds at 3s and infinity -- you
really want that font
<fantasai> TabAtkins: after 3s show fallback rather than blank, but always
swap in font once it loads
<fantasai> TabAtkins: swap sets the thresholds at 0s and 3s -- you show the
fallback font immediately, and don't swap the real font if it shows up
after 3s
<fantasai> TabAtkins: Assume user has started interacting with page, so it
shouldn't relayout
<fantasai> TabAtkins: optional sets the thresholds at 0s and epsilon
<fantasai> TabAtkins: Basically only show the real font if it's locally
available (or loaded lightning fast)
<fantasai> TabAtkins: John's proposal had some other keywords
<fantasai> TabAtkins: fallback sets the thresholds at 0s and infinity --
use the fallback, swap in the real font at any point in time
<fantasai> ChrisL: Why epsilon?
<fantasai> TabAtkins: Because you'll immediately fall into "screw it" and
never show the font. It still takes *some* amount of time to check the cache
<fantasai> TabAtkins: optional is "Nice font if you have it, not a big deal
if it doesn't show"
<fantasai> TabAtkins: ? mentioned that you could simply not download the
font
<fantasai> TabAtkins: mobile's are most likely to fail epsilon
<fantasai> TabAtkins: continually
<fantasai> TabAtkins: So never show the font
<fantasai> TabAtkins: So might be useful to have it mean "loading the font
is optional"
<fantasai> plinss: For "screw it" phase, might want to also say "abort the
download"
<fantasai> TabAtkins adds a column for the four values titled "download",
with checkmarks on blank, swap, fallback, and abort/cancel for optional"
<fantasai> ChrisL: So, which of those should you use in the case where you
have a font for a language which you expect the fallback font not to have
any glyphs?
<fantasai> TabAtkins: I think you'd use 'block'.
<fantasai> TabAtkins: Unicode "can't find the glyph" blocks aren't
particularly useful, so showing blank is fine, possibly better
<fantasai> TabAtkins: And then you're treating it as a required font
<fantasai> TabAtkins: So these are block = "super-needed", fallback =
"pretty needed", swap = "kinda needed", optional = "meh"
<fantasai> ChrisL: Essential, important, preferable, and meh
<fantasai> leaverou: I think we have consensus on "meh"
<fantasai> Florian: We have two more rows on this table. Not necessarily
desirable, but discussed
<fantasai> Florian: Safari had an infinite blank period
<fantasai> Florian: safari sets thresholds at infinity, infinity, yes
download
<fantasai> Florian: John had another bad proposal which was
<fantasai> s/bad/slightly less bad proposal/
<fantasai> Florian: Which had very long but not infinite timeout on blank
<fantasai> TabAtkins: jdaggett's 'blank' keyword is my 'block' keyword
<fantasai> TabAtkins completes the table with jdaggett's variant of
safari's behavior
<fantasai> block: 3s | infinity | yes
<fantasai> fallback: 0s | infinity | yes
<fantasai> swap: 0s | 3s | yes
<fantasai> optional: 0s | epsilons | abort
<fantasai> -----
<fantasai> Apple: infinite | lol | yes
<fantasai> really-blank: ~60s | infinite | yes
<fantasai> fantasai: I think swap should be called 'fallback'
<fantasai> fantasai: For fallback, if we want to keep it, that should be
called 'swap', because you can swap forever
<fantasai> Florian: 'optional' is a good name
<fantasai> TabAtkins: Our proposed name... we proposed font-display
<fantasai> TabAtkins: That seems to go along with Chris's names
<fantasai> Florian: jdaggett had font-display-loading (or
font-loading-display)
<fantasai> TabAtkins: auto is whatever default you feel like
<fantasai> fantasai: Could just put your preference in the UA stylesheet
<fantasai> TabAtkins: auto allows more sophisticated heuristics
<fantasai> fantasai: ok, that's fair
<fantasai> fantasai: So, swap and fallback should swap names
<fantasai> fantasai: I think 'block' is not a great name
<fantasai> discussion that ChrisL's naming captures use cases beter
<fantasai> fantasai points out that understanding what the values do is
valuable
<fantasai> Florian: We should definitely have swap & fallback in the first
level
<andrey-bbg> I like fallback
<fantasai> Florian: block I guess we need, too
<fantasai> Florian: optional could defer
<fantasai> ChrisL: Don't see the benefit
<fantasai> leaverou: Are we only going to have keywords, not timeouts?
<fantasai> leaverou: What about other countries?
<fantasai> TabAtkins: 3s is just "a reasonable time"
<fantasai> Florian: If you're making a mobile browser for crappy networks,
you can set it to 10
<fantasai> leaverou: But if you're shipping for desktop browsers, will ship
the same hard-coded default everywhere
<fantasai> [discussion of setting this as a UA pref]
<fantasai> plinss: I have a fundamental moral objection to this entire
thing  because it's taking what is fundamentally a user preference and
putting it in the hands of the author
<fantasai> plinss: I'm cool as long as the UA is allowed to ignore the
author's rules on behalf of the user
<fantasai> plinss: Want to make sure it's clear in the spec that this is a
hint
<fantasai> TabAtkins: font-hinting! :D
<fantasai> plinss: Even if we give authors the actual timeouts, the UA
could decide to multiply all timeouts by 10
<fantasai> TabAtkins: I kinda prefer the intentional keywords (ChrisL's
list)
<fantasai> TabAtkins: Rather than the behaviorial ones
<fantasai> TabAtkins: And e.g. not block, not treat as mandatory
<fantasai> TabAtkins: Hierarchy of levels allows you to do some amount of
discrimination
<fantasai> Florian: Make everything should
<fantasai> TabAtkins: Would rather be must, with exception for exceptional
network conditions
<fantasai> Florian: And you can limit the scope of the exception
<fantasai> fantasai: I think we should have a note about networks speeds
and the timeout
<fantasai> Discussion of ChrisL's keywords
<fantasai> should avoid 'important' because of !important
<fantasai> ChrisL's keywords = essential, important, preferable, optional
<fantasai> Florian: Wrt property vs descriptor
<fantasai> Florian: smfr didn't want a property
<fantasai> Florian: Only having a descriptor does not limit the use cases.
If needed you can create two different fonts via @font-face, use as you
want.
<fantasai> RESOLVED: font-loading control is only an @font-face descriptor,
not a property
<fantasai> ChrisL: Swapping out font in some elements not in others is
really weird
<fantasai> fantasai: Possible but annoying via descriptor
<fantasai> plinss: There are use cases for it
<fantasai> plinss: E.g. navigation you want to never be blank, but other
parts allow to be blank for awhile
<fantasai> fantasai: We're missing smfr, who might be arguing for blank
<Bert> (Some people name their fonts by their function, such as "body
font", "button font", etc, so it's easy to have different policies for
each, even if they are actually the same font face.)
<fantasai> fantasai: but Safari could do that via auto
<fantasai> Florian: This isn't something we want authors to opt into
<fantasai> Florian: So, do we want to resolve on the first four values,
modulo bikeshedding?
<fantasai> fantasai: yeah, block is not a great name
* glazou Bikeshedibus Unum ?
* dauwhe text-align: center !meh;
<fantasai> fantasai: I kinda prefer the functional names to the importance
ones
<fantasai> fantasai: I would want to know if you are going to swap the font
at any point in the future vs. within a timeout
<fantasai> tantek: UA could do anything
<fantasai> ?: Only for exceptional cases
<fantasai> Florian: Timeout varies, but behavior unlikely to
* heycam waves hello; what's the call in details again?
* glazou reminds dauwhe that the CSS mascot is a sheep so that would be «
center ! beh »
<plinss> heycam  +1-212-617-1960 for New York, +44-20-7330-7700 for London,
+81-3-3201-7040 for Tokyo. PIN 295109
<tantek> s/tantek/???
<tantek> s/tantek:/TabAtkins:
<heycam> plinss, is there a new pin for today?
<TabAtkins> should be same?
* plinss should be the same
<heycam> I got told that that pin was for yesterday, and couldn't get in
* ChrisL ah but here it is still yesterday
* heycam :)
<TabAtkins> we're working on this
<heycam> cheers
<ChrisL> rrsagent, this meeting spans midnight
<RRSAgent> ok, ChrisL; I will not start a new log at midnight
<fantasai> Proposed resolution: have 4 values for
font-loading-display-whatever: block-essential | fallback-important |
swap-preferable | optional
<fantasai> Waiting for jdaggett and heycame to dial in and catch up before
resolving
<jdaggett> explanation of values?
* fantasai RRSAgent pointer
<jdaggett> block-essential == sort of like safari now?
<fantasai> no
<fantasai> :)
* fantasai looks up logs
<plinss> csswg_logbot, pointer?
<CSSWG_LogBot> http://log.csswg.org/irc.w3.org/css/2015-05-20/#e556910
* fantasai made a table in the minutes
* fantasai just got to find it
* ChrisL heycam, john - the operator appears to be non responsive
<fantasai> jdaggett: http://log.csswg.org/irc.w3.org/css/2015-05-20/#e556805
* heycam :(
* heycam ChrisL is this the operator at the end of that NY phone number? I
spoke to her just before
<fantasai> That's the table, the columns are
<fantasai> name of value
<fantasai> Timeout for showing fallback instead of blank
<fantasai> Timeout for no longer accepting the real font as a swap-in
<fantasai> Whether or not to complete the download
<fantasai> (if the download has timed out)
<fantasai> Note proposed resolution there is pre-bikeshedding (in case that
wasn't obvious from the ridiculous)
<plinss> new conference PIN: 205187
* heycam tries
<Florian> John: in terms of your proposal, we're taking blank-fallback and
fallback, rejecting blank, and adding optional and swap from Tab's proposal
<Florian> John: and want to bikeshed everything
* Ms2ger suggests blink-fallback
<fantasai> TabAtkins: Every keyword controls how long you blank for, how
long you swap for, and then you're stuck in permanent fallback
<fantasai> TabAtkins: block-essential does 3s blank, and swaps in until
infinity
<fantasai> TabAtkins: swap-important does fallback immediately, swaps until
infinity~
<fantasai> TabAtkins: fallback-preferable does fallback immediately, swaps
only up to 3s
<fantasai> TabAtkins: optional falls back immediately, swaps if it shows up
fast, and could be ditched if it doesn't load quickly
<fantasai> jdaggett expresses concerns wrt epsilon
<fantasai> TabAtkins: You give it enough time to at least load from cache
<fantasai> TabAtkins: But if you're in an exceptionally slow network, or
otherwise resource-constrianed, you can say "screw it" and not load the font
<fantasai> TabAtkins: This sets up 4 preference levels for how important
the font is to the page
<fantasai> TabAtkins: from "you need to display this font, otherwise
everything is terrible" down to "it'd be nice, but it's okay if not"
<fantasai> jdaggett: optional will always display the fallback
<fantasai> TabAtkins: No, it has an effect. If the font has not yet loaded,
optional is basically guaranteed to show the fallback
<fantasai> TabAtkins: If the font has downloaded and is in the cache, then
you'll use it successfully
<fantasai> TabAtkins: On devices too slow to load from cache in a
reasonable amount of time, it won't be used
<fantasai> jdaggett: Ppl who are demanding optional are asking for a ????
<fantasai> s/????/no-reflow solution/
<jdaggett> the people who are asking for optional are looking for a "no
reflow" use of fonts
<fantasai> TabAtkins: That's very nearly what you get. The only exception
is if you start trying to render text, but the font comes in, then you
rerender
<jdaggett> i.e. either the font is *immediately* available or it's not
<dbaron> Yeah, if the people who want 'optional' actually want "no reflow",
then they're not going to get it with this definition.
<fantasai> yeah
<dbaron> Is that the main use case?
<fantasai> jdaggett: dbaron's point is my question
<fantasai> jdaggett: [...]
* fantasai needs to move closer to speaker
<fantasai> dbaron: Do ppl who want optional because they want no reflow,
because want to avoid perf cost of reflow?
<fantasai> several ppl say no
<fantasai> Florian: No, I want it for.. It's a font, if you have it, would
be nice
<fantasai> Florian: In my mind epsilon is ~ 100ms
<fantasai> Florian: I'm not looking for entirely no reflow at all
<fantasai> Florian: looking for, if there is a reflow, it should happen so
early in the page that the user hasn't started reading
<fantasai> Florian: Which is not what would happen with swap
<fantasai> Florian: After 3 seconds or so, user might hhave started
reading, then text moves around
<fantasai> Florian: If font is sufficiently unimportant, as soon as user
has started reading I no longer want to disturb the content
<fantasai> Florian: 100ms or so, nobody has got far with reading. But if
you have the font available, I'd prefer that
<fantasai> Florian: If you reflow a little bit, I won't mind.
<fantasai> TabAtkins: You probably won't notice the reflow during that
portion of the load time
<fantasai> plinss: If the UA has eye-tracking, can even tell whether the
user is reading or not :)
<fantasai> jdaggett: What Florian's describing... I'm not really sure
<fantasai> jdaggett: if it helps what Google ppl are looking for
<fantasai> jdaggett: I think they're looking for no flash ever
<fantasai> TabAtkins: I don't think that's what they were looking for, but
if it would help I can ask them about it when I get back to work
<fantasai> q+
* Zakim sees fantasai on the speaker queue
<fantasai> jdaggett: Discussion with google ppl would be nice if not in
various google forums
* fantasai unsure
<fantasai> TabAtkins: it generally was, mostly in github for original
proposal
<dbaron> fantasai: interesting thing that was discussed for optional was,
with limited network, just not even bother trying to load the font
<jdaggett> it would help if the discussion by google people was in public
forums like www-style and not within github issues for example
<dbaron> Florian: also low memory
<dbaron> fantasai: and bandwidth constraint
<fantasai> heycam: ...
<fantasai> heycam: in terms of bandwidth constraint
<fantasai> heycam: Aren't you going to do the same kind of loading?
<fantasai> heycam: I'm not sure how optional helps with bandwidth
constrained situations
<fantasai> heycam: Aren't you just going to do the same loading?
<fantasai> fantasai: We had discussed making 'optional' make the loading
optional entirely
<fantasai> fantasai: So a device that knew it was constrained could opt to
not download the font
<fantasai> jdaggett: I'm not sure if optional is being imagined in this
context
<fantasai> jdaggett: On a certain device you have an idea of your max
bandwidth
<fantasai> jdaggett: You can guess whether going to make it within a
certain timeout value
<fantasai> jdaggett: There's sort of a multiple-page ...
<fantasai> jdaggett: How are you imaginign the font ever gets down to the
UA unless you've got something that says "here's when a load happens"?
<fantasai> jdaggett: This gets into resource hints
<fantasai> TabAtkins: When the font is marked optional?
<fantasai> jdaggett: If it's marked optional, how is it ever getting
downloaded?
<fantasai> jdaggett: UA knows it can't download within the timeout, so
wouldn't bother downloading
<fantasai> jdaggett: Would need some language, something like a resource
hint
<fantasai> TabAtkins: Yes
<fantasai> TabAtkins: Point is, optional is the least necessary font
<fantasai> TabAtkins: If UA determines that it will never be able to pull
down reasonably, fine
<fantasai> TabAtkins: If doesn't have it yet, but bandwidth is fine, then
could continue downloading even though not using it
<fantasai> jdaggett: Then need a normative definition of whether loading
follows through
<fantasai> jdaggett: or treated as something that can be ignored
<fantasai> fantasai: He wants the last column in the table normatively
<fantasai> TabAtkins: Yes, that would be in the normative definition
<fantasai> (last column is whether to download or not)
<fantasai> jdaggett: Need to say whether fetch continually or fetch never
happens
<fantasai> TabAtkins: It might continue or might never happen, depending on
UA
<fantasai> plinss: I'm questioning how this interacts with service workers
<fantasai> jdaggett: If different UAs are making different decisions
<fantasai> jdaggett: optional will be either never use this font or use in
a blue moon
<fantasai> TabAtkins: Yes
<fantasai> TabAtkins: If font was important, you'd use a higher-preference
keyword
<fantasai> TabAtkins: You can just use sans-serif, it's fine
<fantasai> fantasai: Might want continue through and download the font a
separate switch from the timeout?
<fantasai> TabAtkins: If the font is at all important, so continue
downloading
<fantasai> plinss: ... service workers could abort the load, or fetch for
next time.
<fantasai> TabAtkins: Would have to talk to other engineers, but this might
have useful conceptual overlap with client hints
<fantasai> TabAtkins: Could say that optional request is tagged with a
particular client hin
<fantasai> *hint
<fantasai> plinss: In general, we want to try to explain these behaviors in
terms of other api
<fantasai> fantasai: I suppose might want a user pref to choose not to
download preferable or optional fonts, but download essential ones
* jdaggett other than tab it basically sounds like all others in the room
are talking through a cup
<fantasai> jdaggett: Don't think I can follow the description
<fantasai> TabAtkins: Proposal is just your proposal, minus blank, plus my
swap and optional keywords values
<fantasai> plinss: John, we were very close to accepting this proposal with
strong consensus in the room. Held off because wanted to give you a chance
to object
<fantasai> plinss: Suggest, if it's okay with jdaggett, that we resolve to
accept this and you can suggest improvements
<fantasai> s/this/this, let Tab write it up as spec prose,
<fantasai> s/improvements/improvements, and we will revisit/
<Florian> +1 to plinss
<fantasai> jdaggett: I don't know what the proposal is, can't hear anything
to what Tab says
* ChrisL https://pbs.twimg.com/media/CFejzOTWoAA9mMT.jpg:large
<fantasai> jdaggett: I'm fine with Tab writing it up, resolving to move
forward can't tell one way or another
<BradK> What about a descriptor that says what the average character width
and extent is, so that reflow will be minimal when the font does load?
<fantasai> RESOLVED: accept font-display-thing-whatever-loading properyt
with four values to be renamed later: block | swap | fallback | optional
<fantasai> block shows blank, swaps in fallback at 3s, swaps in real font
whenever it loads
<fantasai> swap shows fallback, swaps in real font whenever it loads
<ChrisL> bradk, we tried that with css2 (not 2.1) and dropped in for css3
<fantasai> fallback shows fallback, swaps in real font if it loads before 3s
* Florian stop!
<jdaggett> ouch
<ChrisL> bradk - see
http://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#synthesizing
<fantasai> optional shows real font if it loads from cache (very short
timeout), otherwise shows fallback
<fantasai> optional allows UA to not continue loading the font for the next
time