Edit docs for typography load and display

[nickmcintyre]

Addresses #6449
I edited the inline documentation for the typography functions loadFont(), text(), and textFont() to bring them more in line with the style guide.

@davepagurek @dkessner @MsQCompSci @limzykenneth @Qianqianye @dhowe, @paulaxisabel, @SarveshLimaye, @SkylerW99, @hannahvy, @BamaCharanChhandogi, @singshris I'd love to incorporate any feedback you may have!

• npm run lint passes
• [Inline documentation] is included / updated

[nickmcintyre]

I noticed a quirk in the failure callback for loadFont(). When I tried logging the error Event object, I just got some text. This may be a bug.

[dhowe]

Docs look good to me. When I log the object from the error callback, I do see that it is an Error object. However the text component of that error ("Error: Unsupported OpenType signature") is not visible in the p5js console, while it is in the js console. Not sure if this is intended behavior:

[davepagurek]

The docs look good to me too!

[dkessner]

In the text() examples, for historical (and unnecessary?!) accuracy, perhaps change to "The quick brown fox jumps over the lazy dog." The sentence uses every letter in the alphabet, but misses 's' with 'jumped' instead of 'jumps' :)

[nickmcintyre]

@dkessner nice catch with "jumps." Fixed!

@dkessner @MsQCompSci here's a staging version of the docs for this pull request. Don't wander too far off the Reference pages or stuff will break–patched just enough of the site to get this working.

Please let me know if you'd like to see further revisions or if we should request a merge.

[dkessner]

The loadFont()/textFont() pages have links back to p5.Font, but text() does not -- should it?

Or maybe even more helpful might be for each typography function to provide a link back to the list of Typography reference functions: reference/#group-Typography

(Or maybe this should be a larger discussion -- I think it is helpful for the functions to provide a link back to the category or index, so the user can see what other functions are in the same category).

[MsQCompSci]

Some thoughts considering newer or younger users:

• for loadfont() Maybe including the link to the font can make reproducing the code easier.
• I wonder if there is a way to indicate that the code in the text() examples is located within setup.
• In text() is there a rationale behind including the comment in the example (because there are no comments on any of the other examples)
• Note about comments: Newer users will struggle to understand the example code without the aid of comments to help direct their attention. For example, a comment that describes what a group of commands does may help newer users understand all examples better.
• Is there a way to let users know the types of built in fonts in the textFont() section?

[nickmcintyre]

@dkessner good point about linking to functions in the same category. What do you think about the "Related" section on Processing's version of text?

@MsQCompSci great thoughts. Here's

for loadfont() Maybe including the link to the font can make reproducing the code easier.

Good call–done!

I wonder if there is a way to indicate that the code in the text() examples is located within setup().

My high school students regularly encounter bugs by calling p5 functions outside of setup() or draw(). On the one hand, the no-setup() style removes boilerplate as @davepagurek noted. On the other, it feels like this style reinforces a pretty common misconception. I revised examples in this section to use setup().

In text() is there a rationale behind including the comment in the example (because there are no comments on any of the other examples)

Not really. I think it's pretty clear that the rainbow is an emoji.

Note about comments: Newer users will struggle to understand the example code without the aid of comments to help direct their attention. For example, a comment that describes what a group of commands does may help newer users understand all examples better.

Agreed. I've done so sparingly in some other references. A design goal is to make the examples as short and clear as possible, to the point that comments aren't necessary.

Is there a way to let users know the types of built in fonts in the textFont() section?

Yep, added! The Parameters section at the bottom also lists types.

@Qianqianye @davepagurek @limzykenneth if these changes look good to you, please go ahead and merge them.