Clarify text() documentation for default position and alignment

[nippotam]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request
• Documentation

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Proposed imporvement

Is it possible to add a little example in https://p5js.org/reference/#/p5/text in order to understand where text() write the string. In other words where is the x,y starting points for text().

[Amethystix]

I tried to look into the documentation to see what you mean, but the docs seem to pretty clearly outline how the x and y params work to decide where on screen the text goes. Could you please clarify a bit? Thanks!

[nippotam]

Yes
The text() writes in the upper zone of the y axis whereas the rect() draw in the bottom direction in y axis.

That is not clear in the doc.

[dhowe]

To clarify a bit, when only x,y are present, x represents the (left, right, or center) horizontal position of the text, while y represents the vertical (top, bottom, center, or baseline). The horizontal/vertical settings are controlled via textAlign(). When all 4 parameters are present, then the text is drawn inside the specified rectangle, which is controlled by rectMode().

So text specified with x,y can sometimes be drawn down, and the rectangle specified can sometimes be above the x,y position.

So I think the issue here relates to the defaults, where, as noted, x,y-specified text is positioned at the left baseline with letters drawn upward, while the x,y represents the top-left corner of the rectangle containing the text, so that letters are below.

If we do add documentation of this, we should be clear it is the case only for default settings of textAlign and rectMode

[nippotam]

You are perfectly right. It has to be clarify in the default mode. May be we should add a point () in red at the x, y in each example (especially for textAlign).

[kjhollen]

Great. Let's update the documentation to include that the baseline alignment is the default. For anyone looking for a good first issue, here's how to update the documentation

[lmccart]

closed with #3024