Adjust the text height of a radio button

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");"vertical-align", "top"); // ??"font-size", "13px");
  radio.position(20, 20);
  radio.input(() => {

function draw() {

Captura de tela 2022-09-08 103458

  • 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() {

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)'position', 'relative').style('top', '-2.5px');

  return radio;
1 Like

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