Label for each key in a keyboard container?

I’ve managed to add some labels using the text indicator widget. But isn’t there an easier way to add labels to keys? Thank you.

Using css is another way around:

.key:after {
  position: absolute;
  bottom: 10%;
  left: 0; right: 0;
  font-size: 150%;
  text-align: center;
  z-index: 10;
.key.white:after {
  color: black;
.key:nth-child(1):after {
  content: "F";
.key:nth-child(2):after {
  content: "F#";
/* etc */


CSS is such a great deal!


Hi the Great @theodor_the_1st !
would you please post your css to get this lovely keyboard ?

1 Like

Lovely keyboard.json (8.9 KB)

1 Like

thanks ! by the way now that you can add more than 127 keys, you can carry on add some style :wink:
or better find a way to generate the style properties via a javascript piece of code. Maybe it’s possible

The limit is 128 keys.

c"est pas faux :wink:

If you had a lot of characters in the text, is there a way to fit the content in the width of the key. Or dynamically change font size per key? Currently the text gets cut off if its too long.

Here's code from @Udo that's helped me — put it in the CSS field for the widget:

word-break: normal;

/* font size depends on the viewport width 
(1 vw unit equals 1% of the viewport width) */
--font-size: 1vw;

/* font size also depends on the panel width */
--panel-width: #{parseInt(@{panel_1.width})};

/* font size also depends on the button width */
--button-width: #{parseInt(@{this.width})};

--fs: calc(var(--font-size)*#{parseInt(@{panel_1.width})}*#{parseInt(@{this.width})}/2400);
font-size: var(--fs);

/* line height scales the same */
line-height: calc(var(--fs)*1.2);

Still can't get this to work with the keyboard widget unfortunately. The text still get's cut off by the adjacent keys.

The code has to do with the widget width right? But we are talking about the key width here right?

Ah good point, I haven't tried this on the keyboard, my bad! Good luck :blush: