Typography module revamp

[dhowe]

Typography module revamp for p5.js 2.0

* Help-needed: examples of use-cases to test against

• Implement 2D API using only browser functions
• Test existing typography tickets against implementation
• Visual regression tests (against v1 for existing, v2 for all)
• Unit tests (against v1 for existing, v2 for all)
• New function/functionality documentation

2D API

• check/fix all visual tests in p5.js/test/manual-test-examples/type/
• implement hidden getComputedStyle to support arbitrary font strings
• implement p5.Font as wrapper for FontFace
• Explore options (typr.js or canvas) for textToPoints()
• test set/get for context2d.font.* properties
• test set/get for context2d.* properties
• test set/get for canvas.style.* properties
• handle push/pop of text rendering state (Renderer.states vs context2d)
• document new functions attached to p5 (eg fontBounds) and p5.Font

p5 function	browser	related	implemented	notes
text()	fillText(), strokeText()		x
textAlign()	textAlign, textBaseline		x
textAscent()	measureText() > TextMetrics	metrics: {   actualBoundingBoxAscent,   actualBoundingBoxDescent,   actualBoundingBoxLeft,   actualBoundingBoxRight,   alphabeticBaseline,   emHeightAscent,   emHeightDescent,   fontBoundingBoxAscent,   fontBoundingBoxDescent,   hangingBaseline,   ideographicBaseline,   width }	x	2 versions
textDescent()	measureText() -> TextMetrics	as above	x	2 versions
textLeading()	manual		x
textSize()	font		x
textWidth()	measureText() > TextMetrics	as above	x	2 versions
textWrap()	manual		x
loadFont()	FontFace.load()	support transparent loading of ttf/otf/woff/woff2 fonts	x	name as optional extra param
textFont()	font		x	currently supporting only px
textBounds()	measureText() > TextMetrics	as above	x
p5.drawingContext	Context2d	fontKerning, fontStretch, fontVariantCaps, letterSpacing, wordSpacing, fontKerning, direction	x	these can be set directly on the drawingContext (and then taken into account in measureText), or set via textProp(s)
p5.Font	FontFace, FontFaceSet	Has style, weight, family, stretch, variant - need to examine other properties	x	a wrapper around font-face for backward compatibility
p5.Font.font	font	FontFace delegate, short-hand for the following css properties: font-family(required), font-size(required), font-stretch, font-style, font-variant, font-weight, line-height	x
p5.Font.textToPoints()			x	implemented via hidden canvas

Issues

• There will be differences between the various bounds for text, depending on whether we are using the actual string, or generic measurements for the font. This applies to textAscent(), textDescent(), textWidth() and textBounds(), and also for rendering text in user-specified bounding boxes. It is likely that we will want to support both measurements. An option for textAscent/textDescent is to return different measurement depending on whether the user passes in a specific string or not. A different option, which works better for textWidth/textBounds, would be to include a 2nd set of functions in the API, something like fontWidth() and fontBounds(), which return the more generic measurements.
• Support non-pixel font metrics (em, etc). Conversion between units is not straightforward - the best way to do this is to use one or more hidden DOM elements. Once we have these we may want to use them for other properties and text measurement for the sake of consistency.
• Should textBounds (and fontBounds()) take rectMode into account ?
• Variable-fonts: appears there is no cross-browser way to support these on the canvas (correct me if I'm wrong)
• New functions: p5.textBounds, p5.fontBounds, p5.fontWidth, p5.textToPoints, p5.textProp, p5.textProps

---

Notes on the css font property spec###

The ‘font’ property is, except as described below, a shorthand property for setting ‘font-style’, ‘font-variant’, ‘font-weight’, ‘font-stretch’, ‘font-size’, ‘line-height’, ‘font-family’ at the same place in the stylesheet. Values for the ‘font-variant’ property may also be included but only those supported in CSS 2.1 -> [normal | small-caps]

All subproperties of the ‘font’ property are first reset to their initial values, including those listed above plus ‘font-size-adjust’, ‘font-kerning’, all subproperties of ‘font-variant’, and ‘font-feature-settings’, but not ‘font-synthesis’. Then, those properties that are given explicit values in the ‘font’ shorthand are set to those values. For a definition of allowed and initial values, see the previously defined properties. For reasons of backwards compatibility, it is not possible to set ‘font-size-adjust’ to anything other than its initial value using the ‘font’ shorthand property; instead, use the individual property.

---

Other options considered (for historical purposes)

1. Extract minimal opentype.js or typr.js, maintain split rendering, update the current API according to tickets
2. Use some other 3rd party option for glyph paths (see below)
3. Write our own font parser

Some of the tradeoffs here, and more info here

List of external font-parsing libs:

• typr.js [js]
• fontkit [js]
• fonteditor-core [js]
• pango/freetype [c]