Typography module revamp

[dhowe]

Typography module revamp for p5.js 2.0

• [ ] Implement 2D API using only browser functions
• [ ] Test set/get for all font and context2d properties
• [ ] Test existing typography tickets against implementation
• [ ] Explore options for a new module to handle glyph-paths (for 3d and/or textToPoints)

2D API

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
textBounds()	measureText() > TextMetrics	as above	WIP	2 versions, not yet handling multiline text
p5.drawingContext	Context2d	fontKerning, fontStretch, fontVariantCaps, letterSpacing, wordSpacing, fontKerning, direction	-	as these can be set directly on the drawingContext (and then taken into account in measureText), perhaps they can be ignored
p5.Font	FontFace, FontFaceSet	Has style, weight, family, stretch, variant - need to examine other properties	-	could be a wrapper around font-face for backward compatibility
p5.Font.font	font	short-hand for the following css properties: font-family(required), font-size(required), font-stretch, font-style, font-variant, font-weight, line-height	-	to be implemented as options object in textFont()
p5.Font.textToPoints()	-			will move to module/lib

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 ?

---

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]