[css3-fonts] changing loadFont method

After discussing things a bit with Jonas Sicking, I'm thinking of
altering the way some of the FontLoader methods work.  The 'loadFont'
method currently initiates font loads and the 'notifyWhenFontsReady'
method sets up a callback that fires when all font loads are done.

I think it would make sense to change 'loadFont' to take a pair of
callbacks that fire after the loads complete or an error occurs.  User
agents would maintain a list of callbacks, one for each time
'loadFont' was called.  When all fonts associated with a given
callback complete loading (or have already completed due to previous
implicit or explicit loading), the callback is called. This is
slightly more work for implementations but it simplifies the API I
think.

Proposed change - remove existing loadFont method and replace with:

  dictionary LoadFontParameters {
    DOMString font;
    DOMString text = " ";
    FontsReadyCallback onsuccess;
    FontsReadyCallback onerror;
  };

  // check and start load if appropriate
  // and fire callback when all loads complete
  void loadFont(LoadFontParameters params);

  // return whether all fonts in the fontlist are loaded
  boolean checkFont(DOMString font, optional DOMString text = " ");

Having a callback associated with a specific fontlist allows script to
run after the fonts needed for a given purpose on a page finish
loading, without waiting for all pending font loads to complete.

The 'loadFont' method would be especially handy for script that
explicitly needs to use a given font, when drawing with a canvas
element for example. For cases where script just needs to run after
all fonts on the page have loaded, without needing to know the
specific set of fonts and styles in question, the
'notifyWhenFontsReady' would be a simpler method to use.

Examples:

Dynamic UI layout after a given font loaded:

  document.fontloader.loadFont({font: "16px UIFont", onsuccess: layoutUI, onerror: handleError});

Load a set of bold fonts, then draw in a canvas:

  document.fontloader.loadFont({font: "16px bold fontA, fontB", onsuccess: drawStuff, onerror: handleError});

Check to see if fonts are loaded and draw immediately if they are:

  var drawfont = "16px MyFont";
  if (document.fontloader.checkFont(drawfont)) {
    drawStuff();
  } else {
    document.fontloader.loadFont({font: drawfont, onsuccess: drawStuff, onerror: handleError});
  }

Regards,

John Daggett

Received on Thursday, 27 December 2012 02:36:11 UTC