Adjust the text height of a radio button

p5.js Beginners
1

Hi.
I’m trying to align the text of a radio button. Without setting a specific font size, it is acceptable; but with smaller fonts, the text position will be lower. Is there a solution for that?

function setup() {
  createCanvas(400, 400);
  radio = createRadio();
  radio.option(" one");
  radio.option(" two");
  radio.option(" three");
  radio.style("vertical-align", "top"); // ??
  radio.style("font-size", "13px");
  radio.position(20, 20);
  radio.input(() => {
    myFunction();
  });
}

function draw() {
  background(220);
}

Captura de tela 2022-09-08 103458

2
  • Each radio label text is inside a <span> element.
  • So I’ve collected them all via selectAll() over the created radio.
  • Then applied some style() until they got aligned to their respective radio button:
"use strict";

function setup() {
  makeAlignedRadio();
}

function makeAlignedRadio() {
  const radio = createRadio().position(20, 20).style('font-size', '13px');
  radio.option(' one');
  radio.option(' two');
  radio.option(' three');

  const spans = selectAll('span', radio);
  for (const span of spans)
    span.style('position', 'relative').style('top', '-2.5px');

  return radio;
}
1 Like
3

Thank you once more! As always, a good solution with a good explanation. :pray: