Type 2.0

[dhowe]

Initial PR for typography module 2.0

There are 7 new functions added to the p5 prototype that should be discussed:

• textBounds: tight bounds, now supported for all fonts, not just those with paths as in v1
• fontBounds: gives the (loose) bounds for the font, regardless of characters used
• fontWidth: gives the (loose) width of a string of given length in the font, regardless of the characters
• textProperty: allows set/get for one of about 20 font-related properties
• textProperties: allows batch set/get for one or more of about 20 font-related properties
• textToPoints: a quick/dirty version using pixel-sampling that doesn't require font paths
• textDirection: exposing this directly for wider access

Additionally textAscent and textDescent now operate differently depending on whether a specific string is passed in. If so, they return the metrics for that specific string, if not, then for the font itself (the max ascent and descent)

Issues/Questions:

• It seems that there should be a direct get/set option for CanvasRenderingContext2D.font, as it would be useful/common to grab a long css font-string and apply it directly in p5. This cannot be done using textFont without major changes, so I would argue for a new function to handle this.
• Similarly it would be useful to be able to accept a complete font-face declaration: @font-face { font-family: 'Diwani'; font-weight: 400; font-stretch: normal; src: url('https://fonts.gstatic.com/s/notonaskharabic/v17/RrQ5bpV-9Dd1b1OAGA6M9PkyDuVBePeKNaxcsss0Y7bwvc5Urqc3.ttf') format('truetype'); font-style: normal; }
• Better handling of google fonts: currently the workflow for integrating such fonts is a bit awkward, either involving finding a font, getting the correct link, opening the linked file and manually copy/pasting a path to a woff or ttf, which then ignores the supplied font-descriptors, or downloading a zip with many different files. Ideally one would simply copy/paste the embed path into loadFont... but there are many complications here, including the fact that many individual fonts would be loaded over the network.
• Would be great to have some better examples in arabic and other rtl languages for testing
• Should type functions accept and coerce non-string arguments, eg. text(1000, 20, 20) or allow FES to handle this, and what about for the non-FES case? (see #6298).
• Is there a standard way to represent rectangle objects across p5 (v1.0 bounds are defined as {x,y,w,h}) - this should prob be consistent ?

[davepagurek]

@limzykenneth we were getting an error on this saying that setAttributes doesn't exist on the graphic. I think this test was just not getting run before (the path to the font was wrong so the success callback in loadFont wasn't running, and because this test neither returns a promise nor uses a done callback, the failure wasn't getting reliably detected. this still needs to be updated I think.)

We're marking this as .todo for now but this might be something we need to add back to p5.Graphics

[davepagurek]

• It seems that there should be a direct get/set option for CanvasRenderingContext2D.font, as one would often like to grab a long css font-string and apply it directly in p5. This cannot be done using textFont without major changes, so I would argue for a new function to handle this.

Did you have some thoughts about what this API would look like?

[dhowe]

It seems that there should be a direct get/set option for CanvasRenderingContext2D.font, as one would often like to grab a long css font-string and apply it directly in p5. This cannot be done using textFont without major changes, so I would argue for a new function to handle this.

Did you have some thoughts about what this API would look like?

It could be a single function forceTextFont(str) or an option for textFont(str, {direct: true}). I haven't come up with anything good as yet in terms of names. There is a similar case with loadFont() where one could provide an entire font-face declaration (as a string or js object) - thoughts @davepagurek ?

[davepagurek]

@dhowe one other idea is to make some new objects like NativeCanvasFont or FontFace that just wrap strings, so instead of trying to differentiate between a font family name and a native canvas font declaration, we could check if family instanceof NativeCanvasFont. e.g.:

class NativeCanvasFont {
  constructor(str) {
    this.str = str;
  }
}

fn.nativeCanvasFont = (str) => new NativeCanvasFont(str)

p5.Renderer2D.prototype._applyTextProperties = function () {
  if (this.states.textFont instanceof NativeCanvasFont) {
    this.drawingContext.font = textFont.str;
  } else {
    // ... 
  }
}

// Usage:
textFont(nativeCanvasFont('bold 48px serif'))