Text Overflow Issue with Characters in Strings

[Rahulhanje]

@SableRaf
I have encountered an issue where entering a string of text that exceeds the dimensions of the canvas results in the text being cut off or becoming unreadable. The problem arises when the length of the string surpasses the available canvas size.

example URL:https://processing.org/examples/charactersstrings.html

I’d like to work on this issue. Could @SableRaf please assign it to me? Also, I would appreciate any guidance on how to fix it.

[SableRaf]

Hi @Rahulhanje,

Good catch! You are correct. The behavior of the live sketch does not match the behavior of the Processing code on the page. This is due to a discrepancy between the way that Processing and p5.js handle text wrapping.

In Processing, it is sufficient to call text(words, 50, 120, 540, 300); where the numbers define the boundaries of a rectangle container for the text. Text wrapping is active by default in that scenario.

However, in p5.js, you have to additionally call textWrap() to activate the wrapping. In this particular case, you should use the CHAR parameter, so textWrap(CHAR) (edit: It's a little more nuanced than that, see correction below)

To fix this, you will need to edit the corresponding livesketch.js file at https://github.com/processing/processing-website/blob/main/content/examples/Basics/Data/CharactersStrings/liveSketch.js

For more details about updating live examples, please see examples.md.

I'll assign this issue to you. Let me know if you still have questions and feel free to make a pull request for the change.

[SableRaf]

Correction: the behavior difference is specific to character-wise wrapping. Word wrap DOES work in p5.js by default if you set boundaries for the text rectangle. However it does NOT wrap on characters.

[Rahulhanje]

Thank you for assigning the issue to me I’ll start working on it and will need a bit of time to resolve it.

[Rahulhanje]

@SableRaf I Created a pull request on solving this issue can you please review the code and merge it

[Stefterv]

Hi Rahulhanje,

I took a look at your pull request and have merged it into the website

[Rahulhanje]

Thankyou @Stefterv this is my First open source Contribution

[Rahulhanje]

I checked the website, and my change is visible. It's working perfectly fine

[SableRaf]

Hi @Rahulhanje,

Thank you so much and congratulations on your first contribution! 🎉

I reopened this issue to mention that the livesketch.js code should replicate the original Processing sketch's behavior as closely as possible. This is important to avoid any confusion for users since the code displayed on the example page is the code of the Processing sketch. I have updated the documentation about examples to clarify this point.

Please open a new PR to revert the changes and only leave the s.textWrap(CHAR) modification.

Thank you again for your efforts! If you have any questions, feel free to ask.

[Rahulhanje]

@SableRaf

Sorry to bother you sir , but as mentioned in the documentation, I only edited livesketch.js. If I revert the code, except for
s.textWrap(CHAR), the error remains the same. If I've misunderstood the error, could you please explain exactly what I done
wrong and whate i need to change

[Rahulhanje]

@SableRaf

I reverted the changes except for s.textWrap(CHAR). Now, the characters vertically overflow the canvas. To fix this, I implemented dynamic height adjustment, but I suspect these code lines are not aligned with the expected behavior of the Processing sketch. Am I right?

[SableRaf]

You are correct! The example code featured on the Character String example page doesn't resize the window. Therefore the livesketch.js version ported to p5.js should not either. The issue was that the text would overflow to the right of the canvas, as shown in your original screenshot. Therefore the fix involves wrapping on characters to match the default behavior of Processing.

Note: I described the character wrapping discrepancy between Processing and p5.js in more detail here: processing/p5.js#7163 (comment)

[Rahulhanje]

this means that i should not take care of vertical overflow of text right so it match the behavior of Processing.
am i correct sir
then i need to remove the dynamic height adjust feature right

[SableRaf]

Correct. The dynamic height adjustment was a clever addition but it doesn't match the Processing sketch so it needs to be removed. Thanks!

[Rahulhanje]

Ok sir thankyou for confirming i will make change and create a another pull request

I also noticed some typos below. Are those <br/> tags required? to display on screen or else i will correct that also and solve both in single PR

[SableRaf]

I also noticed some typos below. Are those <br/> tags required? to display on screen

This seems to be an issue on a small number of examples. Feel free to open an issue over at the https://github.com/processing/processing-examples/ repository.

[Rahulhanje]

Okay, I created a new issue regarding that typo. Is it assignable to me? If possible, I request that it assigned to me.

[Rahulhanje]

Now i can see the changes in deployed preview can please check the code and merge the pull request

[SableRaf]

Great! Thanks @Rahulhanje 🙏

[Rahulhanje]

Welcome @SableRaf
Thank you for assigning me with this issue. I appreciate the guidance provided, and I look forward to addressing the challenge and contributing to your organization.