Extension of font parameters to accomodate variable fonts for various uses eg. text / textWidth / textToPoints

[karenanndonnachie]

How would this new feature help increase access to p5.js?

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Feature enhancement details:

In-built variable font support. This issue was unfortunately not fully addressed in the closed feature requests #4790 & #4511 , and actually would be a great feature extend text/typography design opportunities in p5js. The previous issue was closed with a nod to textToPoints, but the use of a variable font differs from textToPoints, although it certainly leverages the same principles (ie. the points embedded within the glyphs in .otf font files).
For example, textToPoints is fab for applying an effect, or animation, to a font, and the opportunities are endless, but it is really tricky to keep the font's intrinsic design/shape/typography letter by letter in the same way a variable font is designed to do, for example if we wanted to make text stretch to fit any given container, you can of course do this more or less successfully with textToPoints, but the downside is you are usually affecting all points at once without discretion on any given char/word/para, but this does not truly/necessarily respect the type designer's own built-in glyph-specific 'stretch options' (which can instead be mapped to the glyph's individual settings for width, weight, amount of italics, curvature, and any other number of parameters).
The request is that the parameters of variable fonts become (optionally) accessible either at the moment of font declaration, or (perhaps better yet) at the moment of a text/textwidth/textToPoints function call, as an extended/optional parameter (eg. like we can add fontSize).
Having this opportunity would allow for real-time, data-driven size, weight and shape adjustments which respects any of the pre-mapped kerning, tracking, height adjustments embedded in the font itself.
As a concrete example, with CSS, you can deploy a variable font which may be designed in a way that when it 'stretches vertically', only the ascenders are affected, or they are affected much less, or the characters get 'squarer', or the empties get bigger etc. see font playground. These parameters are often crafted by the type designer at the level of font encoding. From a p5js headspace, it's as if a series of desired textToPoints morphs/shape changes can be built/designed into the font at the level of the geometry of each specific letter.
I teach code to graphic designers, and we often struggle with type control in p5js, I believe professional typographers and graphic designers would really benefit from/enjoy this feature.
For now I have taken control of variable fonts with dom & CSS, but it is less than ideal, if anyone has ideas how this could become seamless within p5js text features, I am more than happy to help where I can.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

Hi @karenanndonnachie, I'm happy to see this feature in p5.js but only thing I'm not sure about is whether there are support for it in HTML canvas and opentype.js. It's been awhile since I looked into this but last I checked there are no support for it outside of CSS and the CSS properties doesn't affect canvas text.

Determining whether this is possible to implement or not would be a good first step before we move onto discussing whether to include this feature directly in p5.js, as an addon library, or some other arrangement.

[karenanndonnachie]

Hi Kenneth,
thank you for your explanation.
From my very scarce understanding, a couple of projects which work with variable fonts do so in js extending opentype.js eg. variablefont.js
Admittedly they do not render to canvas, and similarly to the axis-praxis.org 's samsa.js — a web-based tool for visualising and testing variable fonts— while they require opentype.js they use svg to display the fonts through dom.
Instead there have been some work-arounds recently suggested for HTML2Canvas's variable font limitation, which resolve by building an svg instance of the type and drawing that to canvas.
Could you foresee a similar pass-through variablefont->svg library could ever play nicely with p5js dynamically by way of an approach similar to what is discussed (and perhaps solved) in this thread ??

• First we need to fetch the font file (woff2) and encode it to a data:// URL so it can live in a standalone svg file.
• Then we'll build the element with a copy of our elements and their required computed styles.
• Finally we'll build the svg image with the and a <style> declaring our font-face from the data:// URL, and draw that on the canvas.

[limzykenneth]

I don't know enough about how variable fonts work under the hood to be able to say much for sure. Ideally there won't be an SVG layer in between and we can draw the font much like how we are drawing opentype.js fonts currently. Some effort would be required to investigate this possibility though.

[dhowe]

sounds like perhaps this should be implemented (at least initially) as a library...

[limzykenneth]

Yeah I agree, exploring this as a separate library would be better as a start.

[karenanndonnachie]

Great, where do I (we) start?
anyone interested in contributing to writing a library for this?
Happy to contribute where i can, but have never made a library before...

[limzykenneth]

You can read about creating addon libraries here.

[karenanndonnachie]

thank you!