Description
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.
Metadata
Metadata
Assignees
Type
Projects
Status
Activity
dhowe commentedon Aug 13, 2024
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 commentedon Aug 13, 2024
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.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 commentedon Aug 13, 2024
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 commentedon Aug 13, 2024
I only noticed a discrepancy on those "long words".
Also related is #5321 in which @limzykenneth said:
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 commentedon Mar 1, 2025
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 commentedon Mar 1, 2025
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 andtextWrap(CHAR)
is required for character wrapping.Could you please guide me on where to update the documentation?
Thank You!
SableRaf commentedon Mar 1, 2025
@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?
11 remaining items