Skip to content

[2.0] Make variable Typr p5.Fonts use the same variables as the 2D canvas #7447

Open
@davepagurek

Description

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
    Internationalization
    Friendly errors
    Other (specify if possible)

p5.js version

dev-2.0

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Currently, if you load a variable font (e.g. test/manual-test-examples/type/font/BricolageGrotesque-Variable.ttf) in WebGL mode, word wrapping and measurement is currently broken because the parameters that Typr seems to read are different than the variables picked by default by the 2D canvas, which is what is used for measurement.

Typr now supports reading variable font data (photopea/Typr.js#56) so it seems like after updating Typr, we should be able to make these match!

One other complication: We currently associate one FontInfo (containing font bezier cache data for WebGL) with one font:

p5.js/src/webgl/text.js

Lines 687 to 690 in 05e35cb

let fontInfo = this.states.textFont._fontInfo;
if (!fontInfo) {
fontInfo = this.states.textFont._fontInfo = new FontInfo(font);
}

However, we will need a new FontInfo whenever any variable changes for the font, as that will change all the bezier data. So we likely will also need to have a cache by variable value in the font (possibly using a lot of memory if these change a lot? maybe needing an LRU cache to evict old ones?), or just invalidate the existing font info whenever variables change (possibly slow if this is animating every frame.)

Activity

changed the title [2.0] Make Typr p5.Fonts use the same variables as the 2D canvas [2.0] Make variable Typr p5.Fonts use the same variables as the 2D canvas on Dec 24, 2024
dhowe

dhowe commented on Dec 24, 2024

@dhowe
Contributor

I'm added an updated Typr version into our repo in #7449 so this is ready to work on
(note that Typr will hopefully be made into an npm package at some point, but it is now a manual process to upgrade)

added a commit that references this issue on Jan 6, 2025
91c537e
linked a pull request that will close this issue on Jan 6, 2025
AritraDey-Dev

AritraDey-Dev commented on Jan 6, 2025

@AritraDey-Dev

@davepagurek
Thank you for bringing up this issue. I’ve addressed it and submitted a pull request. The problem with variable font measurement and word wrapping in WebGL mode has been fixed by:

Updating Typr.js to the latest version to ensure proper reading of variable font data.
Modifying the FontInfo implementation to handle variable font changes dynamically. I’ve implemented an LRU cache to efficiently manage memory usage when variable parameters are updated frequently.

Please verify my PR and let me know if you need any additional changes or tests!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Participants

    @dhowe@davepagurek@AritraDey-Dev

    Issue actions

      [2.0] Make variable Typr p5.Fonts use the same variables as the 2D canvas · Issue #7447 · processing/p5.js