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

**URL:** <https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322>\
**Category:** Coding Questions\
**Created:** [November 26, 2023, 11:04pm UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322 "2023-11-26T23:04:56Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![qashto](https://avatars.discourse-cdn.com/v4/letter/q/3da27b/32.png) [@qashto](https://discourse.processing.org/u/qashto)\
**Post date:** [November 26, 2023, 11:04pm UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/1 "2023-11-26T23:04:56Z")

</div>

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

Here is a demonstration I made in p5.js:

> **[p5.js Web Editor](https://editor.p5js.org/quinton-ashley/sketches/eRxv-ODDX)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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

> **[p5.js Web Editor](https://editor.p5js.org/quinton-ashley/sketches/9g4rSXQGm)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [November 26, 2023, 11:18pm UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/2 "2023-11-26T23:18:27Z")

</div>

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](https://github.com/processing/p5.js/issues)

---

<div class="post-metadata">

**Author:** ![qashto](https://avatars.discourse-cdn.com/v4/letter/q/3da27b/32.png) [@qashto](https://discourse.processing.org/u/qashto)\
**Post date:** [November 26, 2023, 11:30pm UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/3 "2023-11-26T23:30:35Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/e/ee8202f15ccbb8a172605a08a71e5cd7315a095a.png)

---

<div class="post-metadata">

**Author:** ![qashto](https://avatars.discourse-cdn.com/v4/letter/q/3da27b/32.png) [@qashto](https://discourse.processing.org/u/qashto)\
**Post date:** [November 26, 2023, 11:32pm UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/4 "2023-11-26T23:32:37Z")

</div>

q5.js (centered properly):

![q5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/8/48f103e49baea7c724da5e690fd76b9bbd23132c.png)

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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [November 27, 2023, 2:13am UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/5 "2023-11-27T02:13:22Z")

</div>

I tested [`textBounds`](https://p5js.org/reference/#/p5.Font/textBounds):

> **[p5.js Web Editor](https://editor.p5js.org/micuat/sketches/jWiM9dMcu)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

![untitled](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/5/051c7757cc0afb084ad01fade03fa247c2a2dbe1.png)

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

> <https://github.com/processing/p5.js/blob/7587e0acfa5b3a73826135041fe9c7cfd4816f04/src/core/p5.Renderer.js#L305>

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

> <https://github.com/LingDong-/q5xjs/blob/master/q5.js#L1668C13-L1668C25>

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.

---

<div class="post-metadata">

**Author:** ![qashto](https://avatars.discourse-cdn.com/v4/letter/q/3da27b/32.png) [@qashto](https://discourse.processing.org/u/qashto)\
**Post date:** [November 27, 2023, 3:00am UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/6 "2023-11-27T03:00:51Z")

</div>

I agree but I can’t make an issue on GitHub, could you post it for me? 🙏🏻

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [November 27, 2023, 4:54am UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/7 "2023-11-27T04:54:30Z")

</div>

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](https://github.com/processing/p5.js/issues/new/choose)

In this case I’d choose **🐛 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!

---

<div class="post-metadata">

**Author:** ![sterretje](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@sterretje](https://discourse.processing.org/u/sterretje)\
**Post date:** [November 27, 2023, 8:27am UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/8 "2023-11-27T08:27:48Z")

</div>

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

> [@micuat](#):
>
> But normally I won’t do it on other’s behalf

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.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [November 28, 2023, 4:17am UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/10 "2023-11-28T04:17:48Z")

</div>

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](https://github.com/processing/p5.js/issues/6593)  
(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)

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [November 30, 2023, 1:16pm UTC](https://discourse.processing.org/t/why-is-text-not-centered-properly-with-textalign-center-center/43322/12 "2023-11-30T13:16:38Z")

</div>