Closed karenanndonnachie closed 3 years ago
welcome[bot]
commented
3 years ago 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
commented
3 years ago 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
commented
3 years ago 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
How would this new feature help increase access to p5.js?
Most appropriate sub-area of p5.js?
Feature enhancement details:
In-built variable font support. This issue was unfortunately not fully addressed in the closed feature requests https://github.com/processing/p5.js/issues/4790 & https://github.com/processing/p5.js/issues/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.