Text Wrapping Behavior in p5.js doesn't match the documentation

[SableRaf]

The text wrapping behavior in p5.js does not match the documentation for text() (or the documentation is ambiguous). The documentation states that specifying maxWidth and maxHeight in the text() function should automatically wrap text within those dimensions:

"The fourth and fifth parameters, maxWidth and maxHeight, are optional. They set the dimensions of the invisible rectangle containing the text...Text will wrap to fit within the text box."

While word wrapping occurs when boundaries are set, character-wise wrapping requires the additional textWrap(CHAR) call, which is not mentioned in the documentation.

This is also different from the way the text() function works in Processing, where text character-wise wrapping is enabled by default when setting the fourth and fifth parameters of the text() function (see: processing/processing-website#544)

Steps to Resolve

I can think of two ways to resolve this:

A) Set text() to automatically wrap characters when setting the fourth and fifth parameters. This would have the advantage of matching the behavior of the function by the same name in Processing.

or

B) Update the documentation to clarify that "Text will wrap to fit within the text box" on words only and that an additional textWrap(CHAR) will be required to wrap on characters.

[dhowe]

Thanks for this @SableRaf

I'm not seeing the behavior you describe in processing, at least in 4.3:

I also don't see it in the docs:

[SableRaf]

Thanks for your question! I should have included examples/screenshots to clarify.

The issue is with the default behavior of p5.js being inconsistent with the text() documentation page.

The fourth and fifth parameters, maxWidth and maxHeight, are optional. They set the dimensions of the invisible rectangle containing the text. By default, they set its maximum width and height. See rectMode() for other ways to define the rectangular text box. Text will wrap to fit within the text box.

However the text doesn't wrap on characters but only on words by default.

An extra textWrap(CHAR) has to be added to get p5.js to behave as described in the doc.

In Processing, the text wraps on characters by default if setting the text box's width, without the need to call textWrap().

Since p5.js doesn't have the goal to match the behavior of Processing exactly, it could also be a case of updating the documentation to clarify that behavior.

[dhowe]

Understood. I'm wondering if this is a duplicate of #4652, which was marked as completed (but may not be). Is this only an issue when a single 'word' is wider than the bounding box, or are there other cases?

[SableRaf]

I only noticed a discrepancy on those "long words".

Also related is #5321 in which @limzykenneth said:

This has been address by #5146 with the addition of the textWrap() function.

If that's the case then the documentation could make clearer that the default wrapping behavior is word-wise as opposed to character-wise, especially since this differs from the default behavior in Processing.

[Mamatha1718]

Hi @SableRaf I tested this issue using the following p5.js code and confirmed that the default text wrapping only breaks at spaces. It does not wrap long words unless textWrap(CHAR) is explicitly called.
This is the output

Thank You

[Mamatha1718]

Hi @SableRaf ,Is this issue is still open. I’d like to contribute by updating the documentation to clarify this behavior. I would like to adding a note under the text() function description explaining that word-based wrapping is the default and textWrap(CHAR) is required for character wrapping.
Could you please guide me on where to update the documentation?
Thank You!

[SableRaf]

@Mamatha1718 Before updating the text() documentation, we should decide whether to keep the current behavior or aligning it with the documentation.

As discussed in #4652, some users find it confusing that long words don’t automatically wrap within the specified dimensions of text().

A fix was merged in #4712, introducing character-wise wrapping with hyphens, but this change led to confusion for some people (#5081) and was later reverted in #5093.

My preference is for character-wrapping (without hyphens) to be the default, matching the documentation and the behaviour in Processing. That said, I'm open to other perspectives.

We should hear from others before making a decision. @ksen0, @dhowe, @limzykenneth, what do you think?