Incorrect Bounding Box when TextAlign(CENTER, CENTER)

[Iancam]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

2.0.3

Web browser and version

Chrome 137.0.7151.68

Operating system

MacOSX

Steps to reproduce this

Steps:

The bug happens when the text is aligned (center, center), and the text has multiple lines.

Snippet:

let font;

function preload() {
  font = loadFont("./CourierPrime-Regular.ttf");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  const myText = "La Garita Stock Driveway Road";
  const name = myText.split(" ").join("\n");
  textFont(font);
  textSize(12);
  textAlign(CENTER, CENTER);
  const bounds = font.textBounds(name, 200, 200);

  rect(bounds.x, bounds.y, bounds.w, bounds.h);
  text(name, 200, 200);
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms.

For guidance on contributing, check out our contributing guidelines and other resources for contributors.
💬 If you have questions or need support, feel free to join the Processing Foundation Forum or visit our Community page.
📜 Please also review our Code of Conduct to understand our community standards.
Thank You!

[Iancam]

The _handleAlignment function only handles the case where the text takes up one line. TextBounds correctly calculates height (afaik), so I will try putting textHeight into _handleAlignment and using that value instead of this._textAscent(fontSize)

    switch (renderer._textBaseline) {
      case constants.TOP:
        y += textHeight;
        break;
      case constants.CENTER:
        y += textHeight / 2;
        break;

[Iancam]

I've written a wrapper that might help anyone with this problem, if they don't want to wait for a patch.

const getRealBoundingBox = (pt, bbox) => {
    let { x, y, w, h } = bbox;
    if (sketch._renderer._textBaseline === "center") {
      y = pt[1] - h / 2;
    }
    return { x, y, w, h };
  };

It takes a bounding box from font.textBounds(text, pt[0], pt[1])

I think I could put a fix into the p5 repo if y'all wanted.

[dhowe]

the behavior above is different than what I see in the github repo, so I need to look into this a bit further, but thanks for the report and the quick fix!