Max Brunsfeld
abc6b3b357
## Summary Add browser-font fallback to GPUI on the web, so applications can render emoji using the user’s local fonts without bundling an emoji font. GPUI continues to shape text with Cosmic Text using application-provided fonts. When those fonts cannot supply an eligible grapheme or its requested emoji presentation, the web backend measures and rasterizes the complete grapheme using Canvas 2D, then caches and paints the result through GPUI’s existing glyph atlas. ### Configurable fallback - **Emoji-only by default**, including supported variation-selector, skin-tone, flag, keycap, and ZWJ sequences. - Applications can opt into **CJK fallback** for a conservative subset of horizontal Han, kana, and modern Hangul text. - Applications can disable Canvas fallback entirely. CJK fallback renders graphemes independently. It prioritizes readable text over full fidelity to contextual spacing and font features. Browser font coverage and appearance depend on the user’s environment. ### Web input and application lifecycle - Fix text insertion that arrives without a corresponding keyboard event, allowing emoji input through the browser’s text-input path. - Keep the GPUI application alive after `Application::run` returns on WebAssembly. Browser startup is asynchronous; releasing the application after the startup callback previously caused the window to disappear. ### Browser example gallery Make the existing GPUI examples available from a single development server, with separate routes for hello world, styled text, text layout, wrapping, input, and the prime sieve demo. The gallery supports direct links and reloads, loads only the selected example, and provides a simple way to exercise font fallback and text input. ## Validation - Native unit tests cover fallback eligibility and presentation, policy defaults, glyph-cache reuse, and in-place glyph-run replacement. - All six gallery binaries pass WASM compilation checks. - Browser smoke coverage exercises emoji insertion, whole-grapheme Canvas rendering, cache reuse, and deletion. - Manually exercised the gallery and fallback rendering in Chrome. Release Notes: - N/A
43 lines
1.5 KiB
JavaScript
43 lines
1.5 KiB
JavaScript
const route = window.location.pathname.replace(/\/+$/, "") || "/";
|
|
const gallery = document.getElementById("gallery");
|
|
const back = document.getElementById("back");
|
|
const status = document.getElementById("status");
|
|
const example = [...gallery.querySelectorAll("a[data-module]")].find(
|
|
(link) => new URL(link.href).pathname === route,
|
|
);
|
|
|
|
function showError(error) {
|
|
console.error(error);
|
|
status.hidden = false;
|
|
status.textContent = `Unable to start example: ${error.message ?? error}`;
|
|
status.setAttribute("role", "alert");
|
|
}
|
|
|
|
if (route !== "/") {
|
|
gallery.hidden = true;
|
|
back.hidden = false;
|
|
status.hidden = false;
|
|
|
|
if (!example) {
|
|
showError(new Error(`Unknown example path "${route}". Choose an example from the gallery.`));
|
|
} else {
|
|
const title = example.querySelector("strong").textContent;
|
|
document.title = `${title} — GPUI Web Examples`;
|
|
status.textContent = `Loading ${title}…`;
|
|
|
|
try {
|
|
if (!window.crossOriginIsolated) {
|
|
throw new Error("Shared-memory WASM requires cross-origin isolation. Serve this page with trunk serve.");
|
|
}
|
|
|
|
const bindings = await import(`/${example.dataset.module}.js`);
|
|
await bindings.default();
|
|
window.wasmBindings = bindings;
|
|
// GPUI chooses WebGPU or WebGL2 and reports initialization failures itself.
|
|
status.hidden = true;
|
|
} catch (error) {
|
|
showError(error);
|
|
}
|
|
}
|
|
}
|