Discussion: Friendlier API for variable font settings

Increasing access

The proposed change would make variable fonts in p5.js easier to learn and teach by making the feature more idiomatic, and reducing the prerequisite knowledge (see Context section below)

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

Context

Controlling font variations currently requires manually constructing a fontVariationSettings string through textProperty().

Example today:

textProperty(
  "fontVariationSettings",
  `"wdth" ${wdth}, "slnt" ${slnt}, ` +
  `"YOPQ" ${yopq}, "YTLC" ${ytlc}`
);

This works, but it gets verbose, and requires prior knowledge of template literals and string concatenation.

Proposal

Would it make sense to expand textProperty() so it can also set individual variable font properties directly?

For example:

textProperty("slnt", slnt);
textProperty("wdth", wdth);
textProperty("YOPQ", yopq);

Or to avoid overloading textProperty(), introduce a dedicated method:

textVariation("slnt", slnt);
textVariation("wdth", wdth);
textVariation("YOPQ", yopq);

The later might make it easier to handle non-existent axes and offer feedback like "The selected font fontName doesn't have a slant axis".

If technically feasible, it could also be useful to expose available variation settings (axes and ranges) via textProperties().

Start by reviewing the existing textProperty() and textProperties() entry points and how they currently handle font variation settings. Compare the proposed textProperty() overload with a dedicated textVariation() method, including feedback for nonexistent axes and exposing available axes and ranges. Done requires a decided API design and an agreed behavior for these cases.