[tag tool] Large feature, support tagging regions of design spaces
- Dominant language
- HTML
- Stars
- 20.5k
- Forks
- 2.9k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 95
Description
- [ ] "Design space **sampling**"
I think this is the easiest way, where we just sample the design space as a set of instances. The tagger tool therefore can provide a nice broad set of instances from: (a) every named position listed in the STAT able, or (b) if an axis has no STAT values, all of the values named in the axis registry, or (c) the min/def/max values if the axis has no named values in the registry; except for (d) opsz where you can use min/def/max only to start, and later the "green dot" algo to cut down, once available.
Then the tool just shows these the same as the default instance, and can use the API URL as a key, instead of the plain family name where the default instance is implicit. (The API URL puts a CSV in your CSV, so I guess we need to convert the comma separator to another character in the tagging tool page's output, so it still exports plain CSV, like using semicolons instead, as demo'd below, or we need the GF team to convert from CSV to TSV... ;)
| family:axes@values | category | value |
|--|--|--:|
`Recursive` | /Expressive/Stiff | 73
`Recursive:slnt,wght,CASL,CRSV,MONO@-15,1000,1,1,1` | /Expressive/Stiff | 0
`Recursive:slnt,wght,CASL,CRSV,MONO@-15,1000,1,1,1` | /Script/Handwritten | 80
`Recursive:slnt,wght,CASL,CRSV,MONO@-15,1000,1,1,1` | /Script/Informal | 80
And if users want to tag additional instance locations, they can just use the current UI to switch to the tag they want to set a value to, copy and paste a GF API URL into the current "Add family" text input box (where it is converted to semicolon under the hood) and then give it a value.
- [ ] "Design space **mapping**"
This is trickier, where we want to tag regions of a design space with a value - visualizing the ranges is the problem. https://fontbureau.github.io/TypeRoof provides a possible inspiration, where there are keyframes to tween through in a motion-graphic view... but also we can just avoid it completely, and deal with this as an abstraction, to start, and just pick the middle value of each range, and representing the line just like the above ;)
The API URL scheme already supports ranges, so that could be something like this
| family:axes@values | category | value |
|--|--|--:|
| Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0.25..1,1,0..1 | /Script/Handwritten | 80
While the API URL scheme doesn't have a shorthand for 'full axis', that is a UI button in the fonts.google.com "Selection Embed Code" UI:
So it might be better to support that as well as explicit full ranges, like this
| family:axes@values | category | value |
|--|--|--:|
| `Recursive:slnt,wght,CASL,CRSV,MONO@*,*,0.25..1,1,*` | /Script/Handwritten | 80
We could also assume unstated values are not the default instance, but the full (`*`) range, to simplify even further, but that isn't the current assumption afaik.
Then, after being able to give a region a single value, there's tagging a region with an interpolating value. Again, let's start with a region defined as a line through the design space defined by a start instance and an end instance, that has a 1:1 linear corresponding start and end tag value:
| family:axes@values start | family:axes@values end | category | value start | value end |
|--|--|--|--:|--:|
| `Recursive:slnt,wght,CASL,CRSV,MONO@*,*,0.25,0.5,*` | `Recursive:slnt,wght,CASL,CRSV,MONO@*,*,1,1,*` | /Script/Handwritten | 50 | 100
Since the region is a line through the design space, a single slider with a looping play button that walks up and down the min/max (also seen on https://fontgauntlet.com) that shows the tag value, would be fine.
While I can see it is possible to define an area of design space with 3+ corners, and then give each corner a tag value, I think starting with a limit of 2 'corners' to define a line only, is good to start.
Contributor guide
Assessment
This issue has not been assessed yet.