What I expect to happen: As I read the documentation for the text() block, the 4th and 5th parameters should define the lower right corner of a text box, and the text (1st parameter) should be wrapped within that box.
What actually happens: The text is wrapped, but the right margin is not respected.
What I’ve tried: I reread the documentation several times , then I created a simple test case based on the sample code in the docs (above) and experimented with the values of textW and textH to see if I could discern a pattern. So far I’m stumped.
Here’s the code:
var textX = 100;
var textY = 100;
var textW = 150;
var textH = 200;
var textBoxContents = "I think this text should be left aligned in a box with its upper left corner at ("
+ textX + ", " + textY
+ ") and its lower right corner at ("
+ (textX + textW) + ", " + (textY + textH)
+ "). But, it's not, the text is wrapped, but it's outside of the right margin.\n\n"
+ "What am I doing wrong?";
// Margins to show where I think the text should be.
stroke("red");
line(textX, 0, textX, 400); // Left
line(0, textY, 400, textY); // Top
line(textX + textW, 0, textX + textW, 400); // Right
line(0, textY + textH, 400, textY + textH); // Bottom
// Sample text
noStroke();
fill("black");
text(textBoxContents, textX, textY, textX + textW, textY + textH);
Very interesting! In my playing around (see comments in code), the pattern I discern is that the further you move the initial x from 0 in the positive direction, the more likely you are to exceed the right margin but maybe I am misinterpreting what is happening. What does seem to be happening is that wrapping does occur but all text is displayed even over the text box margin vs “Text that does not fit completely within the display area will not be drawn or seen.”
I’ll ask around and see if we can solve the mystery .
I’m pretty sure you found a bug in our documentation - the way we describe the x2 and y2 parameters as the “lower right corner” isn’t correct.
In reality, it looks like the text box behaves the same way as the rect block: x, y, width, height. In the project you posted, if you change line 23 to just text(textBoxContents, textX, textY, textW, textH);, it should work (I tested it here)
Thanks to you and @melynn for bringing this to our attention. We’ll update the documentation and make sure our lessons are consistent with this. In the meantime, hope this helps with your projects!