web: Render device fonts using offscreen canvas #22254

kjarosh · 2025-11-16T17:06:55Z

Fixes on web (when enabled) Texts missing and unexpected feature in 武斗纹章-时度 #21893
Fixes on web (when enabled) Partial Font Display Issue — Font Rendering Problem When Running AimBooster SWF on Ruffle #21301
Fixes on web (when enabled) Kerning/text-width issues in display of Japanese text #19354
Fixes on web (when enabled) (NSFW) Witch Girl - missing letters and numbers #19158
Fixes on web (when enabled) Game text display #18877
Fixes on web (when enabled) Chaos Theory, aka Rensa, aka れんさ -- Text not showing up #18639
Fixes on web (when enabled) text bug - every character is on the same place and overlap each other #14724
Fixes on web (when enabled) Tried to instantiate non-registered character undefined. #13454
Fixes on web (when enabled) Where Is Dad....the Chinese symbols just aren't displayed. #12875
Fixes on web (when enabled) Can not see non-Latin text in device fonts #1616
Progresses on web (when enabled) Endless Migration: Font issues #14742
... probably many more

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:

support bitmap glyphs and glyphs rendered externally in core,
implement canvas font renderer in web.

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:

no hit test implemented yet,
each glyph is stored in a separate bitmap instead of being stored in an atlas,
each glyph is rendered with 64px height and then scaled down/up as a bitmap instead of being rendered with different resolutions,
default fonts are not supported well yet.

This is being put behind a setting deviceFontRenderer with value canvas (instead of the default embedded).

OFFICE CRAZY | the game doesn't render any letter. #10073 doesn't work with this because we're missing proper default font support.

web/src/ui/font_renderer.rs

danielhjacobs · 2025-11-20T21:55:06Z

Is it possible to switch to using the current text rendering if for the browser in use typeof OffscreenCanvas === "undefined", even if the config's deviceFontRenderer is "canvas"? Since we say we support Firefox 94 or higher and Safari 14.1 or higher but per https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#browser_compatibility this is Firefox 105, Safari 16.4.

kjarosh · 2025-11-20T22:23:15Z

I think we can fall back to a regular canvas then.

kjarosh · 2025-11-22T19:19:37Z

I think this is ready for review. I added a TODO for the OffscreenCanvas compatibility issue, and I think it's fine to take care of it in follow-up PRs.

core/src/font.rs

kjarosh · 2025-11-24T19:56:08Z

Somehow the kerning fix from #22250 broke tests on firefox and only on the runner (it works locally). I'll be investigating this

kjarosh · 2025-11-24T23:50:22Z

Issue fixed by #22322

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.

This test verifies whether text using device fonts has proper metrics.

This test check whether device font glyphs are rendered inside proper bounds.

@kjarosh

----------------------------------------------------------------------------------------------------- batocera-controlcenter.mk d454288864605823efdd716eb93a9a5b5602ab68 # Version: Commits on Nov 26, 2025 ----------------------------------------------------------------------------------------------------- Merge pull request #1 from nadenislamarre/pads handle pads, -------------------------------------------------------------------------------------------------------- batocera-emulationstation.mk bd0608ac9c946e2a19df0378bf1dc46ca43d0d8c # Version: Commits on Nov 27, 2025 -------------------------------------------------------------------------------------------------------- update po Signed-off-by: Nicolas Adenis-Lamarre <[email protected]>, ------------------------------------------------------------------------------------------------ batocera-es-piboy.mk bd0608ac9c946e2a19df0378bf1dc46ca43d0d8c # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------------------ update po Signed-off-by: Nicolas Adenis-Lamarre <[email protected]>, ----------------------------------------------------------------------------------- ares.mk 6c8ccc1c7ed90f325a12214a4ce32313105bbb29 # Version: Commits on Nov 27, 2025 ----------------------------------------------------------------------------------- Add support for Viewpoint 2064 master to the N62 DB, ------------------------------------------------------------------------------------- azahar.mk 375c8c19107ee194ce641637ee9ef8f29156e9cc # Version: Commits on Oct 27, 2025 ------------------------------------------------------------------------------------- video_core: Fixed occasional launch crash on certain platforms due to unsafe SDL_Init, ----------------------------------------------------------------------------------- cemu.mk 5bf58c3d20aa7196042338bc0c55ef794c6d9535 # Version: Commits on Nov 27, 2025 ----------------------------------------------------------------------------------- Vulkan: Added support for implementations which only expose host-visible buffers as device-local (#1737), ---------------------------------------------------------------------------------- clk.mk 2cc4b6469f331a33f45ac2a8463c5a6ac6e2ecbb # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------- Merge pull request #1651 from TomHarte/LatestWarnings Resolve compiler warnings., ------------------------------------------------------------------------------------------ dolphin-emu.mk 2e0b91c627878d10fee4c6c07061b6f0eaf6138e # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------------ Merge pull request #14177 from JoshuaVandaele/retro-tests-off Disable PatchAllowlistTest if USE_RETRO_ACHIEVEMENTS is OFF, ------------------------------------------------------------------------------------------ duckstation.mk cc6bfeb976b97ed71998448c9ed6392f6d668b44 # Version: Commits on Nov 26, 2025 ------------------------------------------------------------------------------------------ Qt: Use QtAsyncTaskWithProgress for ISO Browser extraction, ----------------------------------------------------------------------------------- eden.mk 318998cbb55921d48494d299113db93e487f27cd # Version: Commits on Nov 27, 2025 ----------------------------------------------------------------------------------- [cmake] fix macos mbedtls (#3109) ------------------------------------------------------------------------------------- hatari.mk 8be93f76b212e69c8e1ac337b1be70ba400fa4a2 # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------- Use SDL_SetWindowFullscreen() instead of recreating the window When using the SDL3, the switch to/from fullscreen works much faster with SDL_SetWindowFullscreen than by destroying and creating a new window., ---------------------------------------------------- pcsx2.mk v2.5.333 # Version: Commits on Nov 27, 2025 ---------------------------------------------------- - [GameListWidget: Fix header width bug](PCSX2/pcsx2#13608) ------------------------------------------------------------------------------------- ppsspp.mk e5bafa4264e88cf2699e44740e2580ced0454a90 # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------- Merge pull request #21045 from hrydgard/assorted-fixes Assorted UI fixes, ------------------------------------------------------------------------------------ rpcs3.mk d9f913016cbbdc32ce43ac02f4e0ef6a8ffd1ae4 # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------ Fix possible ambiguity of utils::bless (#17757) Make utils::bless at util/bless.hpp argument type be complete, avoiding possible ambiguity with RSX-utility version. A fix for Apple Clang compiler., ------------------------------------------------- vice.mk r45871 # Version: Commits on Nov 26, 2025 ------------------------------------------------- Fixed x128 keyboard when CPM is booted with WiC64 activated. git-svn-id: https://svn.code.sf.net/p/vice-emu/code/trunk@45871 379a1393-f5fb-40a0-bcee-ef074d9b53f7, --------------------------------------------------- xemu.mk v0.8.116 # Version: Commits on Nov 27, 2025 --------------------------------------------------- null ------------------------------------------------------------------------------------- ikemen.mk 95f4b5cc089843f245896dba3eba969b2bab1b1d # Version: Commits on Nov 26, 2025 ------------------------------------------------------------------------------------- Merge pull request #2914 from ikemen-engine/dev build: add missing sld ref, --------------------------------------------------------------- ruffle.mk nightly-2025-11-27 # Version: Commits on Nov 27, 2025 --------------------------------------------------------------- ## What's Changed * chore: Update translations from Crowdin by @kjarosh in ruffle-rs/ruffle#22339 * web: Render device fonts using offscreen canvas by @kjarosh in ruffle-rs/ruffle#22254 **Full Changelog**: ruffle-rs/ruffle@nightly-2025-11-26...nightly-2025-11-27, -------------------------------------------------------------------------------------- scummvm.mk 7a3a0c64efd11c196cc320c1bbbb14c93a4da104 # Version: Commits on Nov 27, 2025 -------------------------------------------------------------------------------------- TSAGE: Disable \?\ UI element when showing verb popup dialogue This emulates the original behavior, --------------------------------------------------------------------------------------- thextech.mk 12d45da546964f13ba89aa0432e97a213f485b2f # Version: Commits on Nov 26, 2025 --------------------------------------------------------------------------------------- Updated submodules, ----------------------------------------------------------------------------------------- rpi-eeprom.mk 68774da0beba4490723e4c7065663ce70c866d82 # Version: Commits on Nov 27, 2025 ----------------------------------------------------------------------------------------- pieeprom-2025-11-27: 2711: helpers/config_loader: Also support bootvar0 eeprom config on Pi4 (latest) * helpers/config_loader: Also support bootvar0 eeprom config on Pi4 This allows an eeprom config setting (e.g. BOOTARG0=0x10) to be set on a board which config.txt can use as a conditional expression (e.g. [bootarg0&0x10]). * pi5: Write over-voltage config to the UART log Write the high level over-voltage configuration to the UART log for diagnostic purposes. * Stop partition-walk after boot-mode timeout/retries limit Fix a fatal assert with USB boot where the partition walk could be retried after the USB timeout/retry limit had been reached. See: raspberrypi/rpi-eeprom#776 * rpiboot: Extend metadata to report status of operations Report success/fail status of recovery operations based on config.txt settings, ---------------------------------------------------------------------------------------- rpi-utils.mk e95a44ca65c997d05e7b55bb3528030f14f0acf5 # Version: Commits on Nov 13, 2025 ---------------------------------------------------------------------------------------- overlaycheck: Detect unused pinctrl declarations Nodes under the gpio controller node are treated as potential pin configurations. However, they aren't used unless a device node refers to them via a pinctrl-<n> property (or if they contain a \gpio-hog\ property). Add a check that all pin group declarations added by an overlay are at least potentially used by the overlay., ------------------------------------------------------------------------------------ box64.mk 3059fe2d090357172fe072583c37932aca3646a3 # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------ [INTERP] Fake handling of RF ([DYNAREC] too), --------------------------------------------------------------------------------------- etlegacy.mk 735f12c10ec1f378d4cee712eb6b076e3322caa9 # Version: Commits on Nov 27, 2025 --------------------------------------------------------------------------------------- cgame: add Icons Inside style to compass This style draw the icons on the edge of the map either inside or outside the compass boundaries, ------------------------------------------------------------------------------------- openjk.mk e76263d85b6ba47e761ba6d0e07e5aaba967f4a6 # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------- [MP] Fix memory leak when loading sub BSPs (#1294), ---------------------------------------------------------------------------------------- openjkdf2.mk 533dd5d5c5b01ffbd75d2532df4f575a393d13db # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------------- Pop keyboard for chat/cheats/quake console, fix cutscene audio, fix some crashes, ---------------------------------------------------------------------------------------- openmohaa.mk 3c3683536bbcd1bf2ee49e2a85869b41b0bcd722 # Version: Commits on Nov 25, 2025 ---------------------------------------------------------------------------------------- Disable LTO on debug builds, ----------------------------------------------------------------------------------- rott.mk 0a639903e8743a324b363e409efb986fae952785 # Version: Commits on Nov 27, 2025 ----------------------------------------------------------------------------------- Mention libADLMIDI in the README, ---------------------------------------------------------------------------------- stk.mk bef142da19240e0123767e702a9bcb68bb9d193d # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------- Add more command line options to manage graphic settings - Light Scattering, PCSS and SSR can now also be enabled or disabled through command line options. - The geometry level (used for level of detail distances) can be set through a command line option., ---------------------------------------------------------------------------------------- supertux2.mk 5dba2141350ac8d5efdccbb011dd664e722c6ce4 # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------------- Add CI file for MacOS Intel (#3417) * Initial plan * Add macOS 12 (Intel) support to CI workflow Co-authored-by: tobbi <[email protected]> * Refactor PKG_CONFIG_PATH to use matrix include section Co-authored-by: tobbi <[email protected]> * Cross-compile Intel (x86_64) binary on macos-14 runner instead of using deprecated macos-12 runner Co-authored-by: tobbi <[email protected]> * Add x86_64 Homebrew installation using Rosetta 2 for Intel cross-compilation Co-authored-by: tobbi <[email protected]> * Add --always to git describe and fix Python conflict in Intel builds Co-authored-by: tobbi <[email protected]> * Fix Python conflict by installing and force-linking via Homebrew Co-authored-by: tobbi <[email protected]> * Fix Python conflict by using [email protected] version in brew commands Co-authored-by: tobbi <[email protected]> * Remove pre-installed Python symlinks to fix Intel build dependency installation Co-authored-by: tobbi <[email protected]> * Fix x86_64 linker errors by adding CMAKE_PREFIX_PATH and explicit libpng dependency Co-authored-by: tobbi <[email protected]> * Add libpng to ARM dependencies for consistency with Intel build Co-authored-by: tobbi <[email protected]> * Add install_name_tool commands for Intel builds to fix library linking Co-authored-by: tobbi <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: tobbi <[email protected]>, ------------------------------------------------------------------------------------------------ libretro-mame-src.mk 4f1035cb37ba8c2f6e501aa4166300a4a5e930f0 # Version: Commits on Nov 26, 2025 ------------------------------------------------------------------------------------------------ Merge remote-tracking branch 'upstream/release0283', --------------------------------------------------------------------------------------- mangohud.mk 160b9f75d766c2be7767d3bdfe6e131e285c25a1 # Version: Commits on Nov 22, 2025 --------------------------------------------------------------------------------------- shim: improve dlsym overriding behavior Overriding dlsym changes the symbols search scope, this makes real_dlsym fail to find symbols. This fix uses caller's handel to search for symbols if there is no handle defined after the first real_dlsym is called. This fix is needed for Nvidia OpenGL EGL on wayland., ---------------------------------------------------------------------------------------- retroarch.mk fec910bd2e473c200361fb3540c84e8cd35ff99a # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------------- fix wrong name HAVE_CLOUDSYNC feature flag, ---------------------------------------------------------------------------------------- doomretro.mk bad6164b4e3889e13be3107f798e4566ba565644 # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------------- Update releasenotes.md, ---------------------------------------------------------------------------------- trx.mk de29f034a14b1221b9cacf2dbf0694c5207eb19a # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------- docs: release 1.0.3, ------------------------------------------------------------------------------------------ xash3d-fwgs.mk ab5ac3aae86b24632989e91c051dd739f0b675c1 # Version: Commits on Nov 27, 2025 ------------------------------------------------------------------------------------------ 3rdparty: maintui: another build fix, this time for platforms where C chars are unsigned, --------------------------------------------------------------------------------------------- libretro-fbneo.mk 3609f054a65aea4b4cab5a87b2fdc876d911d244 # Version: Commits on Nov 27, 2025 --------------------------------------------------------------------------------------------- Chinese Localization Option text. (#1111), ---------------------------------------------------------------------------------------------- libretro-ppsspp.mk e5bafa4264e88cf2699e44740e2580ced0454a90 # Version: Commits on Nov 27, 2025 ---------------------------------------------------------------------------------------------- Merge pull request #21045 from hrydgard/assorted-fixes Assorted UI fixes, ----------------------------------------------------------------------------------------------- libretro-scummvm.mk 7a3a0c64efd11c196cc320c1bbbb14c93a4da104 # Version: Commits on Nov 27, 2025 ----------------------------------------------------------------------------------------------- TSAGE: Disable \?\ UI element when showing verb popup dialogue This emulates the original behavior,

kjarosh added A-web Area: Web & Extensions text Issues relating to text rendering/input T-compat Type: Compatibility with Flash Player device-fonts Issues related to device fonts. They are usually very system-dependent. newsworthy labels Nov 16, 2025

evilpie reviewed Nov 17, 2025

View reviewed changes

web/src/ui/font_renderer.rs Show resolved Hide resolved

kjarosh force-pushed the canvas-font-renderer branch 4 times, most recently from 1ec85d3 to a12f55c Compare November 22, 2025 19:06

kjarosh added the waiting-on-review Waiting on review from a Ruffle team member label Nov 22, 2025

Lord-McSweeney reviewed Nov 24, 2025

View reviewed changes

core/src/font.rs Show resolved Hide resolved

Lord-McSweeney approved these changes Nov 24, 2025

View reviewed changes

kjarosh force-pushed the canvas-font-renderer branch from a12f55c to 7a2b245 Compare November 24, 2025 19:08

kjarosh removed the waiting-on-review Waiting on review from a Ruffle team member label Nov 24, 2025

kjarosh force-pushed the canvas-font-renderer branch from 7a2b245 to f8662f9 Compare November 24, 2025 19:20

kjarosh force-pushed the canvas-font-renderer branch 4 times, most recently from e02d2b5 to 2b2d49a Compare November 24, 2025 23:14

kjarosh mentioned this pull request Nov 24, 2025

text: Fix calculating kerning offset #22322

Merged

kjarosh force-pushed the canvas-font-renderer branch from 2b2d49a to e2e192d Compare November 25, 2025 17:54

kjarosh added 3 commits November 26, 2025 23:59

text: Add FontMetrics struct for font metrics

4048a35

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.

text: Add GlyphRef for referencing borrowed data

7bafa63

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.

text: Add support for bitmap glyphs

ff73531

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.

kjarosh added 6 commits November 26, 2025 23:59

text: Add support for external font renderers

e81b415

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.

web: Implement CanvasFontRenderer

2f67e45

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.

web: Add deviceFontRenderer config option

8bb2177

Using this config option the user can select how device fonts should be rendered.

web: Use CanvasFontRenderer when enabled

120607e

When DeviceFontRenderer::Canvas is set, no fonts will be set up, and instead CanvasFontRenderer will be used to render all device fonts.

web: Add device_fonts_metrics integration test

a4317bd

This test verifies whether text using device fonts has proper metrics.

web: Add device_fonts_rendering integration test

e4b56fd

This test check whether device font glyphs are rendered inside proper bounds.

kjarosh force-pushed the canvas-font-renderer branch from e2e192d to e4b56fd Compare November 26, 2025 22:59

kjarosh enabled auto-merge (rebase) November 26, 2025 22:59

kjarosh merged commit ffbd84e into ruffle-rs:master Nov 26, 2025
26 checks passed

kjarosh deleted the canvas-font-renderer branch November 26, 2025 23:13

waspennator mentioned this pull request Nov 29, 2025

Sonic Prequel Crackups: Text formatting error. #6087

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

web: Render device fonts using offscreen canvas #22254

web: Render device fonts using offscreen canvas #22254

kjarosh commented Nov 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

danielhjacobs commented Nov 20, 2025 •

edited

Loading

Uh oh!

kjarosh commented Nov 20, 2025

Uh oh!

kjarosh commented Nov 22, 2025

Uh oh!

Uh oh!

kjarosh commented Nov 24, 2025

Uh oh!

kjarosh commented Nov 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

web: Render device fonts using offscreen canvas #22254

web: Render device fonts using offscreen canvas #22254

Conversation

kjarosh commented Nov 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

danielhjacobs commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kjarosh commented Nov 20, 2025

Uh oh!

kjarosh commented Nov 22, 2025

Uh oh!

Uh oh!

kjarosh commented Nov 24, 2025

Uh oh!

kjarosh commented Nov 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kjarosh commented Nov 16, 2025 •

edited

Loading

danielhjacobs commented Nov 20, 2025 •

edited

Loading