p5.js Element style example is overlapping with the website text

[rt1301]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• Web browser and version: Chromium 88.0.4324.96
• Operating System: Ubuntu 20.04
• Steps to reproduce this:

The third example on the Element style reference page overlaps with the website text

Would you like to work on this issue? - Yes

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[stalgiag]

Hi @rt1301 thanks for the issue!

I always saw this as intentional. I think the goal is to show that p5.Elements are just like any other DOM Element and can exist visually alongside other elements outside the canvas. I could be mistaken though.

[rt1301]

@limzykenneth Can you suggest whether this enhancement is required? If it does, I would like to work on it

[Aloneduckling]

@stalgiag I have made some changes so that the font-size of the text is limited and is shown in such a way that it conveys the idea (p5.Elements are just like any other DOM Element and can exist visually alongside other elements outside the canvas) while being visually appealing and less cluttering.

does this seem fine?

[lmccart]

@Aloneduckling thanks! to simplify, I would suggest changing this to:

let fontSize = max(mouseX, 100);
myDiv.style('font-size', fontSize + 'px');

[Aloneduckling]

@lmccart, sorry for the late reply. I will change this.

[Aloneduckling]

@lmccart, I have made some changes in all the examples and now they look better and less cluttering. Please have a look.

Should I open a PR?

[Aloneduckling]

Also, I wanted to know how much time it takes for the online reference manual to get updated. I asked because I opened this PR which got merged a while ago, and the website doesn't seem to be updated. This is the page for reference.

[lmccart]

@Aloneduckling yes please do submit a PR. There is a issue with updating the reference that I am working to resolve, so I don't have an estimated time for the next update right now. Hopefully soon.