Bullet lists in docs render as newlines

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

v1.6.0

Web browser and version

Firefox 108.0

Operating System

macOS 12.5.1

Steps to reproduce this

In sections of the source code that have bullet lists in doc strings, like this:

p5.js/src/core/rendering.js

Line 248 in 3b0d132

* <li><code>BLEND</code> - linear interpolation of colours: C =

...they end up getting rendered just as normal line breaks in the p5 reference: https://p5js.org/reference/#/p5/blendMode

I'm not sure if this is an issue for this repo or for the p5 website repo, but for what it's worth, the same thing happens locally when running grunt yui:dev and looking at the local docs server, so I figured opening an issue here would be a good bet.

[davepagurek]

It looks like there's some CSS adding this:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

@limzykenneth do you know where the right spot to edit that is? I'm happy to make the change, assuming this is not intentional (I'm guessing we just wanted it for the side menus, which are also ul/lis, and not for the contents of the docs)

[limzykenneth]

The mentioned rule is likely here: https://github.com/processing/p5.js-website/blob/main/src/assets/css/main.css#L2193 which is probably meant to be the default. You can customize the reference page's behaviour by scoping it under the #reference-page id.

[davepagurek]

Thanks!

[davepagurek]

I put up this PR: https://github.com/processing/p5.js-website/pull/1368

I also notice that for the offline reference in this repo, we have similar styles in this file: https://github.com/processing/p5.js/blob/main/docs/yuidoc-p5-theme/assets/all.css From the commit history I gather this was copied from the main site. Once that other PR has been reviewed, should I replace that with dist/assets/css/all.css from the website repo and make a PR here?

[limzykenneth]

Yes the offline reference version CSS is just copied and can be copied over similarly after merging.

[limzykenneth]

@davepagurek Just noticed a bit of a problem with the changes made to address this, eg. https://p5js.org/reference/#/p5.Element which I think shouldn't have the bullet points visible as it makes the overall formatting quite messy.

[davepagurek]

Ah ok, I can try modifying the styles for ul[aria-labelledby="reference-methods"] and ul[aria-labelledby="reference-fields"] to remove the bullet.