penpot/render-wasm
alonso.torres f44e13df70 ✨ Make horizontal Japanese justify and squeeze follow vertical JLREQ
Horizontal Japanese justification spread each line's slack evenly over
all character gaps, while vertical columns widen gaps in JLREQ pair-table
order. Squeezing also differed: horizontal squeezed only under push-in
first, while vertical also squeezes under push-out first when push-out
cannot resolve a kinsoku break.

Move the axis-free part of the vertical allocator into text_allocation:
jlreq_expansion_gap classifies a gap from the pair table and
jlreq_ordered_expansion widens word spaces, then Japanese/Western gaps,
then solid kana and kanji, then spreads any rest. Vertical columns and
horizontal lines both use it. Horizontal collects real characters from
the laid-out lines; inserted joiners and spacing belong to the gap
between their neighbours. The last line, distribution and the warichu,
joiner and Western-word skips stay as they were.

Under push-out first, horizontal now squeezes a line when the break would
move back over more than MAX_KINSOKU_SHIFT kinsoku pairs, the limit
vertical oidashi uses, now shared from jlreq. A cheap scan for such runs
gates the pass, so other text keeps its layout cost. Push-out only never
squeezes.

This changes existing horizontal justified Japanese layouts on purpose:
punctuation aki and gaps beside ruby bases no longer widen, and a line
with no expandable gap stays short, as vertical columns do. No existing
test needed changes beyond the new line adjustment argument.

AI-assisted-by: claude-opus-5-5
2026-11-05 17:49:00 +01:00
..
2026-03-18 18:05:30 +01:00
2026-11-05 17:48:59 +01:00
2026-10-13 16:33:51 +02:00

Penpot WASM render

This is the canvas-based WebAssembly render engine for Penpot.

Rust & Emscripten

This project is a Rust crate that targets Emscripten (wasm32-unknown-emscripten).

We use wasm32-unknown-emscripten compilation target:

  • It compiles Rust code into WASM
  • It generates the JavaScript code (“glue”) to load and run the WASM code

How Rust, Emscripten, and WASM are connected

Skia

We use Skia, an Open Source 2D graphics library. In particular, the render engine uses Skia via custom binaries of the rust-skia crate.

How to build

With the Penpot Development Environment running, create a new tab in the tmux.

cd penpot/render-wasm
./build

You can also use ./watch to run the build on every change.

The build script compiles the project and copies the .js and .wasm files to the app that uses each target.

Render targets

The same Rust source produces two artifacts, which differ only in compiler options:

Target Tuned for Cargo profile Consumed by
frontend speed release (-O3) frontend/resources/public/js
export size size (-Oz) exporter/resources/wasm
./build            # both targets, frontend first
./build frontend   # workspace / viewer renderer
./build export     # headless exporter renderer

./watch still follows a single target (frontend unless you pass one), since watching both would rebuild twice on every keystroke.

Each target keeps its own CARGO_TARGET_DIR (target/<target>), so switching between them does not invalidate the other's cache. Set BUILD_MODE=release (or NODE_ENV=production) for an optimized build; the default is debug.

Serialize builds in one checkout

All targets in one checkout share one flock lock stored at render-wasm/.render-wasm-build.lock. The lock covers dependency setup, the Cargo build, artifact copy, and target cleanup. If another build or cleanup already holds the lock, the new process prints a waiting message and starts only after the first process exits.

The watch command takes the lock for each build, then releases it while it waits for source changes. The lock file stays in the checkout after a build, but the operating system releases its lock when the process exits, including after an error or signal.

The lock applies to one checkout and only to commands that use these scripts. A manual Cargo build can still write to the same target without taking the lock. Set RENDER_WASM_LOCK_FILE to the same path in each process when you make different checkouts share a CARGO_TARGET_DIR. The supported Linux build environment must provide flock from util-linux; flock --version checks this dependency.

Use the target cleanup commands instead of running cargo clean on the shared target/ directory:

./clean frontend   # remove target/frontend only
./clean export     # remove target/export only

Each target writes its own generated shared.js (the enum discriminants the CLJS side compiles against) next to the code that imports it — respectively frontend/src/app/render_wasm/api/shared.js and exporter/src/app/wasm/shared.js. Neither build writes to the other's paths.

Architecture overview

Edit your local frontend/resources/public/js/config.js to add the following flags:

  • enable-feature-render-wasm to enable this render engine.
  • enable-render-wasm-dpr (optional), to enable using the device pixel ratio.

How to test

We currently have two types of tests:

  • Unit tests
cd penpot/render-wasm
./test

Technical documentation