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
433 lines
13 KiB
Rust
433 lines
13 KiB
Rust
#![cfg_attr(target_family = "wasm", no_main)]
|
||
|
||
#[path = "example_support/fonts.rs"]
|
||
mod example_support;
|
||
|
||
use std::{
|
||
borrow::Cow,
|
||
ops::{Deref, DerefMut},
|
||
sync::Arc,
|
||
};
|
||
|
||
use gpui::{
|
||
AbsoluteLength, App, Context, DefiniteLength, ElementId, Global, Hsla, Menu, SharedString,
|
||
TextStyle, TitlebarOptions, Window, WindowBounds, WindowOptions, bounds, colors::DefaultColors,
|
||
div, point, prelude::*, px, relative, rgb, size,
|
||
};
|
||
use gpui_platform::application;
|
||
use std::iter;
|
||
|
||
#[derive(Clone, Debug)]
|
||
pub struct TextContext {
|
||
font_size: f32,
|
||
line_height: f32,
|
||
type_scale: f32,
|
||
}
|
||
|
||
impl Default for TextContext {
|
||
fn default() -> Self {
|
||
TextContext {
|
||
font_size: 16.0,
|
||
line_height: 1.3,
|
||
type_scale: 1.33,
|
||
}
|
||
}
|
||
}
|
||
|
||
impl TextContext {
|
||
pub fn get_global(cx: &App) -> &Arc<TextContext> {
|
||
&cx.global::<GlobalTextContext>().0
|
||
}
|
||
}
|
||
|
||
#[derive(Clone, Debug)]
|
||
pub struct GlobalTextContext(pub Arc<TextContext>);
|
||
|
||
impl Deref for GlobalTextContext {
|
||
type Target = Arc<TextContext>;
|
||
|
||
fn deref(&self) -> &Self::Target {
|
||
&self.0
|
||
}
|
||
}
|
||
|
||
impl DerefMut for GlobalTextContext {
|
||
fn deref_mut(&mut self) -> &mut Self::Target {
|
||
&mut self.0
|
||
}
|
||
}
|
||
|
||
impl Global for GlobalTextContext {}
|
||
|
||
pub trait ActiveTextContext {
|
||
fn text_context(&self) -> &Arc<TextContext>;
|
||
}
|
||
|
||
impl ActiveTextContext for App {
|
||
fn text_context(&self) -> &Arc<TextContext> {
|
||
&self.global::<GlobalTextContext>().0
|
||
}
|
||
}
|
||
|
||
#[derive(Clone, PartialEq)]
|
||
pub struct SpecimenTheme {
|
||
pub bg: Hsla,
|
||
pub fg: Hsla,
|
||
}
|
||
|
||
impl Default for SpecimenTheme {
|
||
fn default() -> Self {
|
||
Self {
|
||
bg: gpui::white(),
|
||
fg: gpui::black(),
|
||
}
|
||
}
|
||
}
|
||
|
||
impl SpecimenTheme {
|
||
pub fn invert(&self) -> Self {
|
||
Self {
|
||
bg: self.fg,
|
||
fg: self.bg,
|
||
}
|
||
}
|
||
}
|
||
|
||
#[derive(Debug, Clone, PartialEq, IntoElement)]
|
||
struct Specimen {
|
||
id: ElementId,
|
||
scale: f32,
|
||
text_style: Option<TextStyle>,
|
||
string: SharedString,
|
||
invert: bool,
|
||
}
|
||
|
||
impl Specimen {
|
||
pub fn new(id: usize) -> Self {
|
||
let string = SharedString::new_static("The quick brown fox jumps over the lazy dog");
|
||
let id_string = format!("specimen-{}", id);
|
||
let id = ElementId::Name(id_string.into());
|
||
Self {
|
||
id,
|
||
scale: 1.0,
|
||
text_style: None,
|
||
string,
|
||
invert: false,
|
||
}
|
||
}
|
||
|
||
pub fn invert(mut self) -> Self {
|
||
self.invert = !self.invert;
|
||
self
|
||
}
|
||
|
||
pub fn scale(mut self, scale: f32) -> Self {
|
||
self.scale = scale;
|
||
self
|
||
}
|
||
}
|
||
|
||
impl RenderOnce for Specimen {
|
||
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||
let rem_size = window.rem_size();
|
||
let scale = self.scale;
|
||
let global_style = cx.text_context();
|
||
|
||
let style_override = self.text_style;
|
||
|
||
let mut font_size = global_style.font_size;
|
||
let mut line_height = global_style.line_height;
|
||
|
||
if let Some(style_override) = style_override {
|
||
font_size = style_override.font_size.to_pixels(rem_size).into();
|
||
line_height = match style_override.line_height {
|
||
DefiniteLength::Absolute(absolute_len) => match absolute_len {
|
||
AbsoluteLength::Rems(absolute_len) => absolute_len.to_pixels(rem_size).into(),
|
||
AbsoluteLength::Pixels(absolute_len) => absolute_len.into(),
|
||
},
|
||
DefiniteLength::Fraction(value) => value,
|
||
};
|
||
}
|
||
|
||
let mut theme = SpecimenTheme::default();
|
||
|
||
if self.invert {
|
||
theme = theme.invert();
|
||
}
|
||
|
||
div()
|
||
.id(self.id)
|
||
.bg(theme.bg)
|
||
.text_color(theme.fg)
|
||
.text_size(px(font_size * scale))
|
||
.line_height(relative(line_height))
|
||
.p(px(10.0))
|
||
.child(self.string)
|
||
}
|
||
}
|
||
|
||
#[derive(Debug, Clone, PartialEq, IntoElement)]
|
||
struct CharacterGrid {
|
||
scale: f32,
|
||
invert: bool,
|
||
text_style: Option<TextStyle>,
|
||
}
|
||
|
||
impl CharacterGrid {
|
||
pub fn new() -> Self {
|
||
Self {
|
||
scale: 1.0,
|
||
invert: false,
|
||
text_style: None,
|
||
}
|
||
}
|
||
|
||
pub fn scale(mut self, scale: f32) -> Self {
|
||
self.scale = scale;
|
||
self
|
||
}
|
||
}
|
||
|
||
impl RenderOnce for CharacterGrid {
|
||
fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
|
||
let mut theme = SpecimenTheme::default();
|
||
|
||
if self.invert {
|
||
theme = theme.invert();
|
||
}
|
||
|
||
let characters = vec![
|
||
"1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "A", "B", "C", "D", "E", "F", "G",
|
||
"H", "I", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y",
|
||
"Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "p", "q",
|
||
"r", "s", "t", "u", "v", "w", "x", "y", "z", "ẞ", "ſ", "ß", "ð", "Þ", "þ", "α", "β",
|
||
"Γ", "γ", "Δ", "δ", "η", "θ", "ι", "κ", "Λ", "λ", "μ", "ν", "ξ", "π", "τ", "υ", "φ",
|
||
"χ", "ψ", "∂", "а", "в", "Ж", "ж", "З", "з", "К", "к", "л", "м", "Н", "н", "Р", "р",
|
||
"У", "у", "ф", "ч", "ь", "ы", "Э", "э", "Я", "я", "ij", "öẋ", ".,", "⣝⣑", "~", "*",
|
||
"_", "^", "`", "'", "(", "{", "«", "#", "&", "@", "$", "¢", "%", "|", "?", "¶", "µ",
|
||
"❮", "<=", "!=", "==", "--", "++", "=>", "->", "🏀", "🎊", "😍", "❤️", "👍", "👎",
|
||
];
|
||
|
||
let columns = 20;
|
||
let rows = characters.len().div_ceil(columns);
|
||
|
||
let grid_rows = (0..rows).map(|row_idx| {
|
||
let start_idx = row_idx * columns;
|
||
let end_idx = (start_idx + columns).min(characters.len());
|
||
|
||
div()
|
||
.w_full()
|
||
.flex()
|
||
.flex_row()
|
||
.children((start_idx..end_idx).map(|i| {
|
||
div()
|
||
.text_center()
|
||
.size(px(62.))
|
||
.bg(theme.bg)
|
||
.text_color(theme.fg)
|
||
.text_size(px(24.0))
|
||
.line_height(relative(1.0))
|
||
.child(characters[i])
|
||
}))
|
||
.when(end_idx - start_idx < columns, |d| {
|
||
d.children(
|
||
iter::repeat_with(|| div().flex_1()).take(columns - (end_idx - start_idx)),
|
||
)
|
||
})
|
||
});
|
||
|
||
div().p_4().gap_2().flex().flex_col().children(grid_rows)
|
||
}
|
||
}
|
||
|
||
struct TextExample {
|
||
next_id: usize,
|
||
font_family: SharedString,
|
||
}
|
||
|
||
impl TextExample {
|
||
fn next_id(&mut self) -> usize {
|
||
self.next_id += 1;
|
||
self.next_id
|
||
}
|
||
|
||
fn button(
|
||
text: &str,
|
||
cx: &mut Context<Self>,
|
||
on_click: impl Fn(&mut Self, &mut Context<Self>) + 'static,
|
||
) -> impl IntoElement {
|
||
div()
|
||
.id(text.to_string())
|
||
.flex_none()
|
||
.child(text.to_string())
|
||
.bg(gpui::black())
|
||
.text_color(gpui::white())
|
||
.active(|this| this.opacity(0.8))
|
||
.px_3()
|
||
.py_1()
|
||
.on_click(cx.listener(move |this, _, _, cx| on_click(this, cx)))
|
||
}
|
||
}
|
||
|
||
const FONT_FAMILIES: [&str; 5] = [
|
||
".ZedMono",
|
||
".SystemUIFont",
|
||
"Menlo",
|
||
"Monaco",
|
||
"Courier New",
|
||
];
|
||
|
||
impl Render for TextExample {
|
||
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
|
||
let tcx = cx.text_context();
|
||
let colors = cx.default_colors().clone();
|
||
|
||
let font_size = tcx.font_size;
|
||
let line_height = tcx.line_height;
|
||
let type_scale = tcx.type_scale;
|
||
|
||
let step_down_2 = 1.0 / (type_scale * type_scale);
|
||
let step_down_1 = 1.0 / type_scale;
|
||
let base = 1.0;
|
||
let step_up_1 = base * type_scale;
|
||
let step_up_2 = step_up_1 * type_scale;
|
||
let step_up_3 = step_up_2 * type_scale;
|
||
let step_up_4 = step_up_3 * type_scale;
|
||
let step_up_5 = step_up_4 * type_scale;
|
||
let step_up_6 = step_up_5 * type_scale;
|
||
|
||
div()
|
||
.font_family(self.font_family.clone())
|
||
.size_full()
|
||
.child(
|
||
div()
|
||
.bg(gpui::white())
|
||
.border_b_1()
|
||
.border_color(gpui::black())
|
||
.p_3()
|
||
.flex()
|
||
.child(Self::button(&self.font_family, cx, |this, cx| {
|
||
let new_family = FONT_FAMILIES
|
||
.iter()
|
||
.position(|f| *f == this.font_family.as_str())
|
||
.map(|idx| FONT_FAMILIES[(idx + 1) % FONT_FAMILIES.len()])
|
||
.unwrap_or(FONT_FAMILIES[0]);
|
||
|
||
this.font_family = SharedString::new(new_family);
|
||
cx.notify();
|
||
})),
|
||
)
|
||
.child(
|
||
div()
|
||
.id("text-example")
|
||
.overflow_y_scroll()
|
||
.overflow_x_hidden()
|
||
.bg(rgb(0xffffff))
|
||
.size_full()
|
||
.child(
|
||
div()
|
||
.flex()
|
||
.flex_col()
|
||
.p_3()
|
||
.text_size(px(font_size))
|
||
.line_height(relative(line_height))
|
||
.children([
|
||
div().child("CJK: 中文「日本語」한글"),
|
||
div().child(
|
||
"Kana: が / か\u{3099}; Hangul: 각 / \u{1100}\u{1161}\u{11a8}",
|
||
),
|
||
div().child("Emoji: 😀 ❤️ ❤\u{fe0e} 👍🏽 🇯🇵 1\u{fe0f}\u{20e3} 👩💻 👨👩👧👦"),
|
||
]),
|
||
)
|
||
.child(div().child(CharacterGrid::new().scale(base)))
|
||
.child(
|
||
div()
|
||
.child(Specimen::new(self.next_id()).scale(step_down_2))
|
||
.child(Specimen::new(self.next_id()).scale(step_down_2).invert())
|
||
.child(Specimen::new(self.next_id()).scale(step_down_1))
|
||
.child(Specimen::new(self.next_id()).scale(step_down_1).invert())
|
||
.child(Specimen::new(self.next_id()).scale(base))
|
||
.child(Specimen::new(self.next_id()).scale(base).invert())
|
||
.child(Specimen::new(self.next_id()).scale(step_up_1))
|
||
.child(Specimen::new(self.next_id()).scale(step_up_1).invert())
|
||
.child(Specimen::new(self.next_id()).scale(step_up_2))
|
||
.child(Specimen::new(self.next_id()).scale(step_up_2).invert())
|
||
.child(Specimen::new(self.next_id()).scale(step_up_3))
|
||
.child(Specimen::new(self.next_id()).scale(step_up_3).invert())
|
||
.child(Specimen::new(self.next_id()).scale(step_up_4))
|
||
.child(Specimen::new(self.next_id()).scale(step_up_4).invert())
|
||
.child(Specimen::new(self.next_id()).scale(step_up_5))
|
||
.child(Specimen::new(self.next_id()).scale(step_up_5).invert())
|
||
.child(Specimen::new(self.next_id()).scale(step_up_6))
|
||
.child(Specimen::new(self.next_id()).scale(step_up_6).invert()),
|
||
),
|
||
)
|
||
.child(div().w(px(240.)).h_full().bg(colors.container))
|
||
}
|
||
}
|
||
|
||
fn run_example() {
|
||
application().run(|cx: &mut App| {
|
||
if !example_support::load_fonts(cx) {
|
||
return;
|
||
}
|
||
cx.set_menus(vec![Menu {
|
||
name: "GPUI Typography".into(),
|
||
disabled: false,
|
||
items: vec![],
|
||
}]);
|
||
|
||
let fonts = [include_bytes!(
|
||
"../../../assets/fonts/lilex/Lilex-Regular.ttf"
|
||
)]
|
||
.iter()
|
||
.map(|b| Cow::Borrowed(&b[..]))
|
||
.collect();
|
||
|
||
_ = cx.text_system().add_fonts(fonts);
|
||
|
||
cx.init_colors();
|
||
cx.set_global(GlobalTextContext(Arc::new(TextContext::default())));
|
||
|
||
let window = cx
|
||
.open_window(
|
||
WindowOptions {
|
||
titlebar: Some(TitlebarOptions {
|
||
title: Some("GPUI Typography".into()),
|
||
..Default::default()
|
||
}),
|
||
window_bounds: Some(WindowBounds::Windowed(bounds(
|
||
point(px(0.0), px(0.0)),
|
||
size(px(920.), px(720.)),
|
||
))),
|
||
..Default::default()
|
||
},
|
||
|_window, cx| {
|
||
cx.new(|_cx| TextExample {
|
||
next_id: 0,
|
||
font_family: ".ZedMono".into(),
|
||
})
|
||
},
|
||
)
|
||
.unwrap();
|
||
|
||
window
|
||
.update(cx, |_view, _window, cx| {
|
||
cx.activate(true);
|
||
})
|
||
.unwrap();
|
||
});
|
||
}
|
||
|
||
#[cfg(not(target_family = "wasm"))]
|
||
fn main() {
|
||
run_example();
|
||
}
|
||
|
||
#[cfg(target_family = "wasm")]
|
||
#[wasm_bindgen::prelude::wasm_bindgen(start)]
|
||
pub fn start() {
|
||
gpui_platform::web_init();
|
||
run_example();
|
||
}
|