Skip to content

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

Open
@SableRaf

Description

@SableRaf
Contributor

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.

Activity

dhowe

dhowe commented on Aug 13, 2024

@dhowe
Contributor

Thanks for this @SableRaf

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

Screenshot 2024-08-13 at 2 08 01 AM

I also don't see it in the docs:

image
SableRaf

SableRaf commented on Aug 13, 2024

@SableRaf
ContributorAuthor

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.

image

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

image

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

image

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

dhowe commented on Aug 13, 2024

@dhowe
Contributor

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

SableRaf commented on Aug 13, 2024

@SableRaf
ContributorAuthor

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

Mamatha1718 commented on Mar 1, 2025

@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

Image

Thank You

Mamatha1718

Mamatha1718 commented on Mar 1, 2025

@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

SableRaf commented on Mar 1, 2025

@SableRaf
ContributorAuthor

@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

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

    Development

    Participants

    @SableRaf@dhowe@ksen0@limzykenneth@Mamatha1718

    Issue actions

      Text Wrapping Behavior in p5.js doesn't match the documentation · Issue #7163 · processing/p5.js