[avar-2] Design, implement and test basic authoring UI

[justvanrossum]

We need a new panel under Font Info, named "Cross-axis mapping".

It will be "card-based", like the axis panel, and like the axis panel, each card should be draggable to manually tweak the order of cards.

Each card has two text labels:

• description
• groupDescription

There are two location slider sets, one for "inputLocation" and one for "outputLocation. I think they should be lined up next to each other.

Like the source panel cards, they should be collapsable (needed when where are many axes).

This is an insane font to test an insane number of axes: https://github.com/googlefonts/amstelvar-avar2/blob/main/Sources/Roman/AmstelvarA2-Roman_avar2.designspace

We probably need a checkbox for each axis to explicitly say "this axis participates in the mapping". Maybe this is hard to align properly unless it would be an optional feature of the <designspace-location> webcomponent. Perhaps we need a different collection of axis sliders instead of <designspace-location>, as per axis we need:

• a label (the axis name)
• an input slider
• an output slider
• a checkbox

All on a single row in the layout.

Perhaps it is useful to first make a simple wireframe sketch.

[ollimeier]

@justvanrossum The following two screenshots are mockups (no code involved, yet). The first one is very close to your briefing from above. The second one is an idea how we may get a cleaner view (less axis and no checkboxes) by displaying only the involved axis. Add or remove an axis with plus-icon or minus-icon:

Happy to get your feedback.

[justvanrossum]

The descriptions could be next to each other so we use less vertical space.

The labels could indeed be shared as in your second sketch (the briefing mentions this, too). The checkboxes don't really need a label. A tooltip would be enough. (They would turn on as soon as you drag a slider, turning it off should also reset both sliders to the default).

I'm not sure what the plus in the circle does in the second sketch?

[ollimeier]

@justvanrossum Thanks a lot for the quick and productive video-call feedback. This is how the update of the mockup looks like:

Is there anything I misunderstood?

[justvanrossum]

Apart from fine tuning widths and magins, this is good to go!

[ollimeier]

Hi @justvanrossum , I made some good progress with the new panel and now I am in a stage, where I wanted to add the checkboxes. But for me there is a conflict in the understanding of how this should be done. In the screenshot I added a column of checkboxes at the end for each line/axis. I first thought, by setting the check, we would include this whole line (Input AND Output). But if I understand this correctly, the whole idea behind avar-2 mapping is, that you can have a uneven number of axes for input and output.

Having said that: If we want to continue with the checkbox idea, we would need two checkbox-columns, one for input and another one for output.
Or we find a different solution?!

It's not done, yet and I know there are a couple things to improve/fix – but feel free to play with the current stage of the implementation:
https://github.com/googlefonts/fontra/tree/issue-1657-add-cross-axis-mapping

[justvanrossum]

you can have a uneven number of axes for input and output

Ah yes, you're 100% right. We indeed need checkboxes for the input location sliders and for the output location sliders.

              Input location                   Output location
    axisname  ( 123 ) 0---------0------0 [x]   ( 345 ) 0---0------------0 [x]
    axisname  ( 234 ) 0---------0------0 [x]   ( 456 ) 0---0------------0 [x]
    axisname  ( 234 ) 0---------0------0 [ ]   ( 456 ) 0---0------------0 [x]
    axisname  ( 234 ) 0---------0------0 [x]   ( 456 ) 0---0------------0 [ ]

[ollimeier]

@justvanrossum I know you are very thoroughly with names, therefore I am wondering if it should be 'cross-axes-mapping' instead of 'cross-axis-mapping'? Because there are alway multiple axes involved in one mapping (at least two: one input and one output).

[justvanrossum]

if it should be 'cross-axes-mapping' instead of 'cross-axis-mapping'?

I don't think so, but I'll try to look into it to see if I can find better reasoning than "intuitively this feels correct to me".

[ollimeier]

if it should be 'cross-axes-mapping' instead of 'cross-axis-mapping'?

I don't think so, but I'll try to look into it to see if I can find better reasoning than "intuitively this feels correct to me".

Funny enough, but I would translate it into German with Achsübergreifendes Mapping and not with Achsenübergreifendes Mapping, because the first one sounds better to me.
So, cross-axis mapping is just fine for me. Just wanted to double check with you. Thanks for your input.

[justvanrossum]

Other examples with "cross-" that use a singular, but is about multiples:

• cross-browser
• cross-channel
• cross-origin

Anyway, let's indeed leave it :)