Buttons with Flexible Positions

[SHogenboom]

I’m creating a gamified psychological experiment (together with another js library). In this task I need to present multiple choice answer options. My idea was that buttons would be most intuitive. However, I would need to vary the number of buttons and the amount of text each button should contain. For example, I would need to place 5 buttons on one line containing texts like “sweet”, “unhealthy”, “bad”, “tasty”, and “celebration”.

My question is therefore: Can one figure out how large a text element is in pixels? >>> this could then be used to determine the necessary width of the button. Based on this information and some math I could then determine the relative position of each button.

Any help / ideas would be appreciated!

[SHogenboom]

Playing around in the playground I found that one can acces the number of characters in a string by using the .length property on a text element. Together with a monospaced font and some maths it should allow me to do what I wanted.

[slmjkdbtl]

There's the .width and .height property if you give an object text() component

const txt = add([
    pos(120, 20),
    text("oh hi"),
])

console.log(txt.width, txt.height)