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: https://github.com/processing/processing-website/issues/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 https://github.com/processing/p5.js/issues/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 https://github.com/processing/p5.js/issues/5321 in which @limzykenneth said:

This has been address by https://github.com/processing/p5.js/pull/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.