Support left/right tap key labels

[magicDGS]

Support left/right tap key labels, to enable drawing AltGr and other international layouts (see #32 and #50).

An example was created (without combos) to discuss on top of it:

Without sides:

With sides:

Layout file

layout:
  ortho_layout:
    rows: 3
    columns: 4
layers:
  default:
    - { t: 1A, s: S1A, h: H1A, left: L1A, right: R1A }
    - { t: 1B, s: S1B, h: H1B, left: L1B }
    - { t: 1C, s: S1C, h: H1C, right: R1C }

    - { t: 2A, s: S2A, left: L2A, right: R2A }
    - { t: 2B, s: S2B, left: L2B }
    - { t: 2C, s: S2C, right: R2C }

    - { t: 3A, h: H3A, left: L3A, right: R3A }
    - { t: 3B, h: H3B, left: L3B }
    - { t: 3C, h: H3C, right: R3C }

    - { t: 4A, left: L4A, right: R4A }
    - { t: 4B, left: L4B }
    - { t: 4C, right: R4C }
  spanish_keys:
    - { t: 1, s: "!", right: "|" }
    - { t: 2, s: '"', right: "@" }
    - { t: 3, s: "·", right: "#" }

    - { t: 4, s: "$", right: "◌̃ " }
    - { t: 5, s: "%", right: "€" }
    - { t: 6, s: "&", right: "¬" }

    - { t: 7, s: "/" }
    - { t: 8, s: "(" }
    - { t: 9, s: ")" }

    - { t: 0, s: "=" }
    - { t: "◌́ ", s: "◌¨", right: "{" }
    - { t: "Ç", right: "}" }

[magicDGS]

@caksoylar - there are for sure things to be improved or missing, so I am waiting for your review.

[caksoylar]

Have you tried text-align: right in the CSS for text.right? I haven't played with it but it is supposed to right justify the text, so you wouldn't need the extra legend_right_rel_w variable. Also we should center the small legends vertically, you should try using dominant-baseline: middle; if you haven't.

[magicDGS]

The problem with the text element in SVG is that it is positioned with the x coordinate and that represent the start: using text align with CSS doesn't have the desired effect as the element has the size of its content. We can use other technique that requires computing the length or width that the text will occupied, but most likely that will make it more difficult to style with extra CSS. That's why it took me a bit longer than expected to implement, as I had to think about the simpler way to configure such position of the right legend.

For the dominant-baseline I did first used middle as you suggested to position as the tap legend, but I added explicitly auto as for me it feels more natural to have them a bit shifted to distinguish them from the tap label (this is usually the case in keycaps, at least in Spanish, to give less visual weight to AltGr bindings). If you prefer to have them vertically aligned by default on the base style CSS is not a big deal for me, as it can be easily styled downstream.

Please, let me know your opinion and how to proceed with this when you have time, and I will add your feedback to the PR as soon as I can (the next days I'll be a bit short in time to spend o this, but shouldn't be an issue). Back to you @caksoylar

[caksoylar]

If you don't mind, I can play around a bit with your branch myself and experiment. Hopefully sometime this weekend.

[magicDGS]

Sure, no problem

[caksoylar]

I think I figured out the horizontal alignment, using text-anchor. Here is a test case:

Layout file

draw_config:
  draw_key_sides: true
  small_pad: 1
layout:
  ortho_layout:
    rows: 3
    columns: 4
layers:
  default:
    - { t: 1A, s: S1A, h: H1A, left: L1A, right: R1A }
    - { t: 1B, s: S1B, h: H1B, left: L1B }
    - { t: 1C, s: S1C, h: H1C, right: R1C }

    - { t: 2A, s: S2A, left: L2A, right: R2A }
    - { t: 2B, s: S2B, left: L2B }
    - { t: 2C, s: S2C, right: R2C }

    - { t: 3A, h: H3A, left: L3A, right: R3A }
    - { t: 3B, h: H3B, left: L3B }
    - { t: 3C, h: H3C, right: R3C }

    - { t: 4A, left: L4A, right: R4A }
    - { t: 4B, left: L4B }
    - { t: 4C, right: R4C }
  spanish_keys:
    - { t: 1, s: "!", right: "|" }
    - { t: 2, s: '"', right: "@" }
    - { t: 3, s: "·", right: "#" }

    - { t: 4, s: "$", right: "◌̃ " }
    - { t: 5, s: "%", right: "€" }
    - { t: 6, s: "&", right: "¬" }

    - { t: 7, s: "/" }
    - { t: 8, s: "(" }
    - { t: 9, s: ")" }

    - { t: 0, s: "=" }
    - { t: "◌́ ", s: "◌¨", right: "{" }
    - { t: "Ç", right: "}" }
combos:
  - { p: [10, 11], k: { t: 5, s: "%", right: "€" }, l: [default] }
  - { p: [7, 11], k: { t: 5, s: "%", left: "€", right: "#" }, l: [spanish_keys] }

I pushed my version to https://github.com/caksoylar/keymap-drawer/tree/left-right. Can you try and let me know any feedback?

[magicDGS]

I have tried that before but I really thought that having the right one on top of the key side was not the accepted solution, and also the Spanish 4 key shows that some right symbols move out of the key sometimes.

If there is a way to change the position with css/config (which I believe that is not such a thing right now, but correct me if I'm wrong) will be fine for my use case. Otherwise, some AltGr symbols might move away from the key which for my use case would look messy on some specific cases...

In any case, if that's the solution that you prefer, would be fine for me at least for the time being, so I can represent some AltGr (and other use cases for position extra labels) for the time being.

[caksoylar]

I have tried that before but I really thought that having the right one on top of the key side was not the accepted solution, and also the Spanish 4 key shows that some right symbols move out of the key sometimes.

I wasn't very concerned about the mis-aligned keys; the legends like ◌́ seem to not render well in most places (though it does here), so I assumed that was an issue with that legend in particular. The alignment works fine for "regular" legends, like the ones in the default layer.

(TBH I don't care too much about what happens with key sides turned on, it makes laying out everything more difficult than it already is, without legends overlapping. Maybe you can adjust the key sides parameters to make it look better with left/right.)

If there is a way to change the position with css/config (which I believe that is not such a thing right now, but correct me if I'm wrong) will be fine for my use case. Otherwise, some AltGr symbols might move away from the key which for my use case would look messy on some specific cases...

You can translate using the CSS, though it is likely only supported by browsers during rendering (and not Inkscape etc.): https://github.com/englmaxi/zmk-config/blob/9937bd8b953bbf81c8b0d04a8a2ca12134ea6408/keymap-drawer/config.yaml#L43

Also draw_config.small_pad can be used to adjust the gap between the key side and legend start in general.

[caksoylar]

Pushed b701cef based on your work here, any feedback welcome.

[magicDGS]

Sorry for the late answer, fine for me what you have pushed: as soon as I try out on my config I will let you know (a release will be nice to have so I don't build on top of main and rely on a stable version, but I guess that you will get a bit to have more features on the release).

For the combining-acute (and probably other combining-symbols), I would like to explore more if it can be fixed, or position those labels in different ways.

Thanks a lot for considering this change and include a modified version of my PR, @caksoylar

[caksoylar]

No worries, thanks! I usually do a release once a month or so, depending on new features or fixes. I want to finalize this in case other tweaks are necessary before the release.

For example, I am planning to tweak this a bit further to not shift the side legends alongside the center one when draw_key_sides is enabled. I think that makes more sense visually (assuming the legend is on the "side of the keycap") and it seems to match your preference here:

For the dominant-baseline I did first used middle as you suggested to position as the tap legend, but I added explicitly auto as for me it feels more natural to have them a bit shifted to distinguish them from the tap label (this is usually the case in keycaps, at least in Spanish, to give less visual weight to AltGr bindings). If you prefer to have them vertically aligned by default on the base style CSS is not a big deal for me, as it can be easily styled downstream.

Edit: pushed to 90dfb48

This looks like e.g. this with key sides:

This without: