web: Render device fonts using offscreen canvas #22254
Open
+541
−75
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Values such as scale, ascent, descent, leading belong to the same category of font metrics, and conceptually it makes sense to represent them as one object, as they cannot be separated.
GlyphRef can both reference a &Glyph directly or a Ref<Glyph>, which is required to abstract away glyphs generated dynamically and cached. This is useful for e.g. rendering text on web using canvas.
This patch adds support for bitmap glyphs in addition to shape-based glyphs. Bitmap glyphs are useful for supporting device text rendered by the OS.
External font renderer provides/renders glyphs on demand, when core requests them. The logic of rendering glyphs can be external to core and is abstracted away so that frontends can provide their font renderers for device text.
CanvasFontRenderer is an implementation of a font renderer that can render glyphs using an offscreen canvas. This allows Ruffle to support device text properly on web.
Using this config option the user can select how device fonts should be rendered.
When DeviceFontRenderer::Canvas is set, no fonts will be set up, and instead CanvasFontRenderer will be used to render all device fonts.
kjarosh
added
A-web
evilpie
reviewed
Nov 17, 2025
| fn to_font_str(italic: bool, bold: bool, size: f64, font_family: &str) -> String { | ||
| let italic = if italic { "italic " } else { "" }; | ||
| let bold = if bold { "bold " } else { "" }; | ||
| format!("{italic}{bold}{size}px {font_family}") |
Collaborator
There was a problem hiding this comment.
This might missing quotes around the family?
Contributor
|
Is it possible to switch to using the current text rendering if for the browser in use |
Member
Author
|
I think we can fall back to a regular canvas then. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implement device fonts support on web using canvas font renderer. Device fonts are rendered on canvas and then used as a bitmap in Ruffle.
This PR is divided roughly into 2 parts:
This solves the current issue of missing device fonts on web—Ruffle currently uses the default, embedded Noto Sans font and allows providing custom fonts as device fonts. When the "canvas" font renderer is enabled, glyphs are rendered on an offscreen canvas by the device, and stored in a bitmap.
This is currently experimental, as some things may not work properly or are missing, such as:
This is being put behind a setting
deviceFontRendererwith valuecanvas(instead of the defaultembedded).TODO: