Why is text not centered properly with textAlign(CENTER, CENTER)?

p5.js Coding Questions
1

textAlign(CENTER, CENTER) does not seem to work when used with user loaded fonts.

Here is a demonstration I made in p5.js:

Here’s the same code run with q5.js showing how the text is supposed to be displayed in the center of the canvas.

I think the problem is caused by the use of OpenType instead of the native canvas text drawing. Text quality is also noticeably worse than native canvas rendering at lower resolutions as shown in the demonstrations.

2

Hi, it seems both are centered to me (on mobile Safari). What is your os and browser? Can you attach screenshots? If this is a bug, it is also helpful to report in GitHub issues as well: Issues · processing/p5.js · GitHub

3

The problem does exist on iOS safari as well. You just might not be able to notice because the console blocks part of the canvas. I will make the size of the canvas smaller so you can see the full canvas.

Also here are screenshots from macOS using Chrome:

p5.js (text is too low):

p5

4

q5.js (centered properly):

q5

I’ve now edited the demos so that the canvas is only 200x200

5

I tested textBounds:

untitled

it seems if you translate bbox.y + bbox.advance, then it aligns with the result of q5.js. I don’t have energy to look into p5.js code because it is doing a lot of things under the hood

In q5.js, it is simply setting context.textBaseline

I’m sure, in p5.js, they designed it with some intension (otherwise they can just set textBaseline), but I don’t know why. Perhaps it’s better opening an issue on p5.js to start a discussion instead of doing a detective work here, or just live with it and correct the height as I did in my example.

2 Likes
6

I agree but I can’t make an issue on GitHub, could you post it for me? :pray:t2:

7

Is there a reason why you can’t open an issue? If there’s a strong reason, for example, you can’t make an account on github, then I could. But normally I won’t do it on other’s behalf because everyone should learn how to open an issue so next time you can do it on your own, and furthermore you can let others know how to do it. There is a step by step guide if you go to the issue page: https://github.com/processing/p5.js/issues/new/choose

In this case I’d choose :bug: Found a Bug. Then the area is typography, and you can copy your message from this topic and also add a link to this topic. If you have any questions, you can post it here so others can help!

3 Likes
8

There was a similar issue in Processing 4.2; this got solved in Processing 4.3.

The problem when one does it through a third person is that any follow up questions will now also have to go through that third person.

4 Likes
10

Sorry about this. I checked some of the issues you opened by I don’t see any problem there. Do you mind sharing which was the problem, or is it already deleted? I didn’t even know you are the creator of p5.play.

Meanwhile, I posted an issue here: textAlign(CENTER, CENTER) does not vertically center user-loaded fonts · Issue #6593 · processing/p5.js · GitHub
(while researching, I noticed that q5.js (thus textBaseline) won’t center multiline properly, and this is why p5.js is doing some additional calculation)

1 Like