W3C home > Mailing lists > Public > www-style@w3.org > May 2015

[CSSWG] Minutes New York F2F 2015-05-19 Part III: font-display-loading property

From: Dael Jackson <daelcss@gmail.com>
Date: Fri, 29 May 2015 21:24:22 -0400
Message-ID: <CADhPm3sfj-ET4F0v6K3mnsE1vOpYbzviLHJn2YxPJtQ+Z3dxkw@mail.gmail.com>
To: www-style@w3.org
font-display-loading property

  - jdaggett brought his proposal for a new property to give authors
      controls over font-loading that takes four keywords. It is
      font-loading-display: auto | fallback | blank-fallback | blank
  - There was a lot of concern about creating user confusion with a
      delayed font load causing text to flash once the font is
  - The potential to have text re-layout with a new font while a
      user was reading if they happened to click away briefly and
      therefore causing the user to lose their place also caused
  - Ultimately, the meeting ran out of time and discussion will be
      continued on Wednesday.


  Scribe: fantasai

font-display-loading property

  <jdaggett> original proposal:
  <jdaggett> telcon discussion:
  <jdaggett> font-loading-display proposal:
  jdaggett: Back in March TabAtkins had a proposal for what was
            called a 'font-rendering' control.
  jdaggett: It was to control appearance of text while font
            resources were loading.
  jdaggett: Discussed it in April.
  jdaggett: General consensus, we want the functionality, but notion
            of timeouts we should drop.
  jdaggett: I went back and thought what we should do with it,
  jdaggett: Which I think is maybe a better way of going about this.

  jdaggett: I'm proposing a new property, font-loading-display
  jdaggett: 4 keywords font-loading-display:
            auto | fallback | blank-fallback | blank
  jdaggett: Essentially these are saying what should be displayed
            while font resource is downloaded.
  jdaggett: Auto just means browser decides.
  jdaggett: fallback means fallback font is immediately displayed.
  jdaggett: blank-fallback is what Firefox and Chrome do,
  jdaggett: show invisible text, then show fallback font if timed
  jdaggett: blank is what Safari does, show nothing until font loads.
  jdaggett: blank is currently not exactly Safari's behavior...
            Safari takes forever.
  jdaggett: At some point, you really need to show the user text.
            Can't just show a blank page.

  TabAtkins: As an alternate proposal, we had a discussion in blink,
  TabAtkins: We're fine with dropping timeouts,
  TabAtkins: and using the keywords from original proposal.
  jdaggett: blank isn't Safari's wait-forever, it's wait a long time.
  Florian: I agree that his blank is less bad than Safari's,
  Florian: But agree with Tab that it's still pretty bad.

  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.
  (behavior above is optional keyword from Google's proposal)
  jdaggett: The notion that during layout decide whether to display
            or not based on whether a font is available or not.
  jdaggett: If font is in the cache, finite amount of time to figure
            out if you have the font available.
  jdaggett: It could be as much as 20ms.
  jdaggett: You're putting a big load into this keyword.
  TabAtkins: No, we're not.
  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.
  jdaggett: My point is, there will always be a flash.
  Florian: The problem isn't with flash.
  Florian: The problem is with partway into reading the page,
  Florian: And then stuff shifts under you.
  TabAtkins: Our timeout for optional is, are we at the point where
             we're putting the text on the page?
  TabAtkins: If not there yet and loaded font, then go use font,
  TabAtkins: Otherwise render with fallback font.

  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: I don't understand what that means.
  dbaron: Some implementations would have never loaded the font by
          the time they do the initial paint.
  TabAtkins: They never see that font. From first paint onward, no
             change in font.
  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.
  jdaggett: In a lot of situations, where you really want this is
            mobile devices,
  jdaggett: where the connection is slower.
  jdaggett: But those mobile devices are severely resource-
  jdaggett: Whether something shows up in cache is a crapshoot.
  TabAtkins: That's one of the main cases.
  TabAtkins: They are the ones that are most likely to not render
             the optional font.
  plinss: Better for mobile perf</sarcasm>

  jdaggett: Font loading API gives authors the most control.
  jdaggett: I think it makes more sense for authors to script this,
            rather than having non-interop.
  TabAtkins: I'm ok with delaying on the optional keyword until we
             have something we agree on.
  fantasai: I think 'optional' makes sense. I would probably want
            that behavior.
  dbaron: I would be OK with some definitions of optional, like
          Florian's definition.
  dbaron: Florian's definition was about some small amount of time.
          Not predicated on drawing text.
  Florian: Things might flash very briefly, but won't shift under
           you once you've started reading.

  jdaggett: I think in practice, you'll find that for a certain set
            of devices that happen to be at some level of cache
  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 the font, later then see the font.
  jdaggett: Don't think usability would be great on this.
  TabAtkins: I disagree. This is better for optional uses.
  TabAtkins: Better to be stable on a given page than swap sometime
             while you're reading.
  jdaggett: I think the criteria for optional, there are more
            parameters that you'll want to use.
  jdaggett: Think it's better to leave optional behavior to script.

  <Bert> (What does "optional" mean? Aren't all fonts optional? As
         long as there is at least one.)

  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: Wouldn't want someone reading my article to have the
            text shift around 30 seconds after starting to read,
  fantasai: just to have a nicer font.
  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.
  jdaggett: We should leave it to authors to script this, and then
            if there's a pattern that evolves, then we can put it
            into a CSS keyword.
  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. There will be parameters not captured by the
  TabAtkins: Our argument is that there's a common enough case that
             we can handle now. Script can handle more complicated

  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,
  tantek: That's a red herring.
  tantek: Web pages change all the time over time.
  tantek: Images, ads load over time, new buttons, whatever.
  tantek: I don't think it's that disturbing.
  jdaggett: But if I read halfway through an article, flip to my
            mail app, flip back and it rerenders,
  jdaggett: that's bad.
  fantasai: That's exactly the point we're making! Except it
            changes while you're reading and you didn't even flip
  <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!!

  dbaron: The Google proposal for optional was basically was aiming
          for a zero-second timeout, or something very close to it.
  dbaron: What Tantek and fantasai are saying is that they'd be
          happy with the 3 second time out.
  tantek: Yeah, I'm ok with both.
  dbaron: But then you fall back.
  dbaron: In some ways, that's very similar to what's there with the
  dbaron: It's already wait for 3 seconds, if it's not loaded fall
  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

  [discussion of case where links were invisible for 3 seconds while
      rest of page was visible, 'cuz using different font for links.
      Was very confusing to minute-taker.]

  dbaron: I think there are 3 questions
  dbaron: 1. What is the timeout after which your behavior changes?
  dbaron: 2. What do you do before you hit that time?
  dbaron: 3. What do you if the font loads after that timeout?
  Florian: There might be two timeouts.
  <jdaggett> can't hear!!!
  Florian: There's potentially 2 thresholds
  Florian: 1 where initially you might be blank or show fallback
  Florian: Then the font comes in
  TabAtkins: My spec is exactly that model
  * heycam cannot hear Tab at all

  [fiddling with microphones]

  <tantek> What's the timeout threshold for showing alt-text while
           waiting to load an image?
  <ChrisL> similar issue with "You must NEVER do this" where NEVER
           uses a downloaded font and has not loaded.
  <dbaron> we had good table microphones, and it seems their
           batteries all last until 5:15pm and then give out

  [handheld microphones work]

  TabAtkins: There are 3 periods: blank period, swap-if-it-comes-in-
             otherwise-show-fallback period, screw-it-just-stick-with
  TabAtkins: Called the blank, swap, and fallback periods.
  TabAtkins: Keywords just set the boundaries between those three
             periods to different values.
  Florian: I would like to stick with that model.
  Florian: Having removed timeouts, I would like to make the periods
           user-agent defined.
  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
  Florian: I don't know how it's defined right now, ...
  TabAtkins: Right now it says "Xs or whatever UA heuristics you
  jdaggett: I think the keywords from that proposal are really awful.
  jdaggett: Would prefer to go along the lines of what we've got in
            font-loading-display property.

  plinss: Another difference is that one has a property only, and
          the other is descriptor and property.
  smfr: In webkit, we don't want different font loading behavior per
  smfr: We're happy with a rule in the font descriptor, but not in
  smfr: Don't want to have situation where font is loaded but can
        only be used in some elements.

  Rossen: I have a more general question related to the topic.
  Rossen: Strikes me a little bit surprising , dealing with resource
          handling in CSS.
  Rossen: I get it that fonts are intrinsically very important for
          everything else that we do,
  Rossen: But we're not doing anything like this for images or other
          media loading.
  Rossen: Why are we doing this for fonts?
  fantasai: Because for fonts you can have a fallback.
  TabAtkins: And text is more important than images.
  smfr: We've had requests for pseudo-class for loading state of
        images (not-yet-loaded).
  ChrisL: I agree that this makes more sense as a descriptor than a
  ChrisL: Not per-element basis.
  Florian: Generally yes, but in some cases, you may have the same
           font in headlines and body, and you're OK with the
           headlines flickering, but not the body flickering.
  Florian: So both are useful. If we only have one, descriptor is
  <ChrisL> ok, I can go with that

  <tantek> :partial pseudo-element for proposed in 1998 for
           partially loaded elements including images.
  <tantek> (apologies for the member-only link - that was before I
           knew better ;) )

  heycam: Could get same behavior by using descriptors?
  heycam: Define different @font-face rules.
  smfr: Concerned about overhead for implementations, using a
  Florian: If only one, descriptors only.
  smfr: Font descriptor can have more than one font, so need to
        define behavior there.

  TabAtkins: The timeout is for initially using a font name.
  TabAtkins: So if the first one fails at 1s, other one came in
             within 1.5s later, then still made it within the 3s
  TabAtkins: If we consider that we already agree that we can leave
             discussion of explicit timeouts to later.
  TabAtkins: I'm fine with leaving optional out for now, while we
             discuss something that makes everybody happy.
  TabAtkins: Have two other behaviors that everyone agrees on:
  TabAtkins: a) swap - start with fallback, if font loads in
             reasonable amount of time, show it otherwise stay with
  TabAtkins: b) blank - start with blank until it loads, if hasn't
             loaded by the blank timeout, use fallback

  leaverou: Why would you want blank?
  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?
  plinss: Not really ideal for body text.

  * fantasai is confused about stability after 30s
  fantasai: What happens if font loads after 30 seconds?
  TabAtkins: Under my proposal you have an infinite swappable period.
  TabAtkins: It will always load the real font once it loads.
  heycam: Unless we make 30 seconds author-controllable, not sure
          about new hardcoded timeout.
  dbaron: Nobody suggesting 30s as a timeout for anything. Just as
          an example of a time after every timeout discussed.

  * tantek is still wondering about alt text

  dbaron: Anyway.
  dbaron: These two behaviors you're discussing.
  dbaron: They vary on two characteristics: what you do before, and
          also what you do after.
  TabAtkins: If you have a font that you really-really want to use,
             want blank.
  TabAtkins: Not great for body text.
  TabAtkins: For cases where blocking behavior is intended.
  TabAtkins: Having it load after an arbitrary amount of time [...]
  <jdaggett> um, *lots* of sites use fonts for body text

  TabAtkins: For swapping behavior want to prioritize user something
             or other .....
  TabAtkins: Can we agree that these two behaviors are good?
  fantasai: No.

  * fantasai takes a break to try to figure out what this all means

  [un-minuted comments from jdaggett]

  Scribe: gregwhitworth
  dbaron: John doesn't have one that never swaps

Meeting adjourned.
Received on Saturday, 30 May 2015 01:24:50 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:54 UTC