Type 2.0

[dhowe]

PR for typography module 2.0

There are a number of 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 correct version via typr.js (need to support for path sampling)
• textToPaths: returns a more complex object to allow rendering of paths
• textDirection: exposing this directly for wider access
• textWeight: specifies weight via num (100-900) or keyword, requires support in font (useful with variable fonts)
• fontAscent: gives the ascent for the font itself (the max of any glyph)
• fontDescent: gives the descent for the font itself (the max of any glyph)

Issues/Questions/Notes:

• Currently Typr only supports .ttf and .otf fonts, and doesn't provide access to variable font data. I've been talking with the dev about getting both of these included (and also getting a version up on npm, though we'd prob need to handle this)
• It would be useful to be able to accept complete font-face declarations, perhaps as JSON: @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. Ideally one would simply copy/paste the embed path into loadFont... but there are many complications here, including the fact that many individual fonts could be loaded over the network.
• Need better examples in arabic and other RTL languages for testing
• As Typr converts relative paths to absolute, our code only needs handle [M,L,C,Q,Z] path commands
• To pass a complete css-font-string directly, call textFont() with the string as first argument (which must include family and size, as per HTML5 spec for font shorthand)
• p5.Font.textToPaths() now returns an array of path commands in the format: [ ['M', x1, y1], ['Q', x1, y1, x2, y2,] ... ],