Not displaying text over certain size

p5.js Libraries
1

Dear experts,

I’m coding an online experiment in jspsych and p5js and enjoying it very much.

There’s a strange issue with font sizes however: if I increase the fontsize from 39 to 40 the text disappears (see line 61 in jspsych_p5text.js).

What am I doing wrong?
cheers,
-Matan

1 Like
2

This is very perplexing. I can recreate the bug on the website, but when I try to recreate it on my own nothin happens. It might have to do with the custom font?

Also, cool experiment.

1 Like
3

Thanks! I tried it without the custom font and the same happens :frowning:

4

This is almost certainly a text overflow issue.

Size 30 works:

		p.textSize(30)
		p.text(trial.title,p.width/2-300, 50, 600, 50)

Size 40 doesn’t work:

		p.textSize(40)
		p.text(trial.title,p.width/2-300, 50, 600, 50)

You are creating a “p” text area for your title that is 50 pixels tall. When you create a 40px font inside that area (plus default padding) it “overflows” – it is hanging out of the box, and the overflow control needs to decide whether to hide it or let it hang out. It hides it. Try making your p box taller, for example 55:

Size 40 works in a taller box:

		p.textSize(40)
		p.text(trial.title,p.width/2-300, 50, 600, 55)
3 Likes
5

Thanks so much Jeremy. It worked! <3

1 Like