TextAlign([any], CENTER) does not forcibly wrap text inside of the text block, and the text will spill outside of it

[ghost]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.4.2

Web browser and version

Version 1.43.88 Chromium: 105.0.5195.68 (Official Build) (64-bit)

Operating System

Ubunto 20.04.1

Steps to reproduce this

Steps:

1. use textAlign([any], CENTER)
2. Create a long string and put it in a text box with a x,y,w,h limit defined
3. It will render outside of the box

Snippet:

textAlign(CENTER, CENTER)
text("Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World", 100, 100, 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. Thank you!

[davepagurek]

I wonder if the screenshot in this issue is actually the expected result: text wrapping is just based on the text width (we don't try to break text into columns to fit vertically) and the text is too long to fit in the box, so this seems like the correct output.

If I wanted to clip to the box, there are alternate methods one can use (maybe these can be more easily accessible?) such as drawingContext.clip():

push() fill(0, 20) rect(0, 0, 100, 100) drawingContext.clip() fill(0) text(longStringHere, 0, 0, 100, 100) pop()

[dhowe]

I think the issue here is that the vertical alignments are not working consistently when a bounding box is specified (and the behavior does not match the docs).

I'm open to opinions, but I think the best fix is to match the docs and exclude lines which are not fully within the specified bounds (this is different than @davepagurek's clip method above)

The proposed fix would look like this:

[Qianqianye]

Thanks @trifoilarity @dhowe @davepagurek. It's fixed in #5787.

[dhowe]

@Qianqianye I'm not sure if we have a unified way of handling warnings, but in the case of text(), the second two parameters are each specified as optional, but it is not clear from the docs that in some cases the 4th is required when the 3rd is included. In the PR linked above, I've added warnings for such cases, but I'm not sure that this is the best approach...

For example:

textAlign(TOP, TOP);
text('OK', 10, 10, 200);    // no height, but works

textAlign(TOP, CENTER);
text('Not OK', 10, 10, 200);  // fails without height -> warning