Line spacing in TextBox components

Online experiments
1

Hi,

I have a textbox containing several lines of text. I would like the text to be spaced, e.g. double-spaced. However, line spacing only seems to work locally. Whatever I change the line spacing of the textbox to, the changes only happen locally. Is there some way to enable line spacing online?

I would just add the empty lines manually in my conditions file, but these specific textboxes are meant to be editable, and it becomes a bit clunky having to go from line to line with the extra empty line between each line (it doesn’t seem like you can just use the mouse to click wherever you want to edit the text(?), so I’m using the arrow keys to navigate to the words that have to be changed, which already feels a bit clunky).

Best,
Nicolai

2

To clarify, you are using the textbox component, correct? Also what version of psychopy are you using?

Check what your units are, increasing the line spacing might not be translated properly.

Depending on how you want your textboxes to be editable, and what the participant is doing, you could try ending a line of text, then start a new line, add a “\n” to create a line break, then continue on with your textbox content.

Issac

3

Hi Isaac,

Thanks for your reply! I’m using the textbox component, yes, and the 2025.1.1 version of PsychoPy.

I’m using the textbox component and Height as units. How should it be translated to JS? Then I can take a look at that. For now, I’ll try to play around with the units and your other suggestion.

4

Issac, and any future readers with the same problem: I solved the issue with the help of some JavaScript code. I now have double line spacing online. I’ll post the code I used here:

// put this in Begin Routine
let lineHeightSet = false;

// put this in Each Frame
if (!lineHeightSet && stim.status === PsychoJS.Status.STARTED) {
    textInputElement = stim._pixi._dom_input;
    textInputElement.style.lineHeight = ‘2.0em’;
    lineHeightSet = true; // so it doesn't repeat
}

You’ll want to change “stim” to the name of your textbox.