alex-is-disconnected
commented
2 months ago Was just messing about in the Dev Tools Inspector and noticed the -webkit-text-stroke property and saw some potential fixes:
^ Screenshot from the exact same Windows device on Chrome with -webkit-text-stroke turned off
^ Screenshot from the exact same Windows device on Chrome with -webkit-text-stroke-color set to the same value as the base magenta font color
Most appropriate sections of the p5.js website?
Other (specify if possible) Any page on the new p5.js website
What is your operating system?
Windows 11 Pro 10.0.22631, MacOS Ventura 13.3.1, Android 14 (Tested on multiple devices + browsers)
Web browser and version
Chrome 128.0 (on Windows and Android), Firefox 130.0, Microsoft Edge 128.0, Chrome 123.0 (on MacOS)
Actual Behavior
Heyo!
I was just trying out the new p5.js site in dark mode and noticed the typography (particularly the magenta text) was looking super jagged/aliased. on some screens, regardless of browser. Magenta hyperlink text has a thin outline on high PPI screens (Mobile and MacOS Retina) so the source of the aliasing is most likely that. The outline is the same color as the base text. Tested in light mode and the issue is there but not as noticeable. My guess is that this could also be linked to this issue someone else brought up about blurred text.
^ This is what the text looks like on Chrome on a Windows device
^ This is what the text looks like on Chrome on a MacOS device
^ This is what the text looks like on Chrome on a Android 14 phone
Expected Behavior
Not sure if this behavior is intended/expected as it does appear on other pages as well. It does make the typography look worse on low PPI screens and overall harder to read.
Steps to reproduce
Navigate to any page with the magenta-colored hyperlink text. Effect worsens with lower PPI screens.
Would you like to work on the issue?
Sure, I'd be happy to work on the issue! 😁 Just identify which solution (see below) would be desired.