p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

Add Reference to Default Font object

Open blackboxlogic opened this issue 1 year ago • 6 comments
trafficstars

Increasing access

Proposal would simplify working with fonts.

Most appropriate sub-area of p5.js?

  • [ ] Accessibility
  • [ ] Color
  • [ ] Core/Environment/Rendering
  • [ ] Data
  • [ ] DOM
  • [ ] Events
  • [ ] Image
  • [ ] IO
  • [ ] Math
  • [X] Typography
  • [ ] Utilities
  • [ ] WebGL
  • [ ] Build process
  • [ ] Unit testing
  • [ ] Internationalization
  • [ ] Friendly errors
  • [ ] Other (specify if possible)

Feature request details

To use textBounds() or textToPoints(), you first need to call loadFont() to get a reference to a p5.Font object. Creating a reference like defaultFont or currentFont would bypass the need to find a font file, include it in your project, and load it if the user is happy with the default p5js font.

blackboxlogic avatar Aug 27 '24 13:08 blackboxlogic

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

welcome[bot] avatar Aug 27 '24 13:08 welcome[bot]

Hi! A quick alternative is to load a URL to a remote font, like this: font = loadFont('https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf'); This way you won't need to download the font file and include it in your project.

However I found that some URLs return Error: Unsupported OpenType signature wOF2: https://editor.p5js.org/jeanetteandrews/sketches/9qDCQXgG4 I'm not sure if this is a bug or is due to browser security.

jeanetteandrews avatar Sep 06 '24 01:09 jeanetteandrews

@jeanetteandrews this is likely a valid error from the opentype library - not all fonts can be parsed by opentype

dhowe avatar Sep 06 '24 16:09 dhowe

To use textBounds() or textToPoints(), you first need to call loadFont() to get a reference to a p5.Font object. Creating a reference like defaultFont or currentFont would bypass the need to find a font file, include it in your project, and load it if the user is happy with the default p5js font.

This is a good suggestion - there are issues to be considered with a) the size that it adds to the package, and b) the licensing for this 'default' font

dhowe avatar Sep 06 '24 16:09 dhowe

I thought this could be possible without the p5js developers adding a whole font file. Since a 'text("hi", 0, 0)' works without referencing a font, it seems a default font gets acquired either from the browser or the operating system, and that same font could be exposed by reference.

blackboxlogic avatar Sep 06 '24 17:09 blackboxlogic

This default font is a font supplied by the browser... we can use it, but we don't get all the font data that would be needed to create a p5.Font object (for example, the paths for each glyph).

This was a compromise that allowed for simple uses (drawing text) but didn't add to the size of the package. However its something we could potentially revisit in the new version, assuming there was a small enough font with appropriate licensing (of course the font's size is often proportional to the number of characters it supports, which may well raise other access-related issues)

dhowe avatar Sep 06 '24 17:09 dhowe