Gallery Example: Add i18n and dynamic font loading for WASM (#9762)

- Bundle translations for WASM/Android only (not for native builds)
- Load Noto Sans CJK fonts dynamically from GitHub at runtime
- Implement register_font_from_memory() with Result<FontHandle, RegisterFontError>
- Make API automatically available with std feature (no explicit feature flag needed)
- Export load_font_from_bytes() for WASM font loading from JavaScript
- Change from wasm_bindgen(start) to explicit main() call for better control

Fonts are loaded before app initialization to ensure proper CJK text
rendering across all major browsers without bundling font files.

Native builds load translations from lang/ directory at runtime.
WASM/Android builds bundle translations at compile time and detect
browser/system language automatically.

API is now available when std feature is enabled, since we always
have fontique with std. No need for experimental-register-font feature.

Author: task-jp

api/rs/slint/lib.rs

@@ -233,6 +233,39 @@ pub use i_slint_core::{
     string::{SharedString, ToSharedString},
 };
 
+/// Register a custom font from byte data at runtime.
+///
+/// **This is an experimental API.** The API may change in future versions.
+///
+/// Returns a [`FontHandle`] on success, or a [`RegisterFontError`] on failure.
+///
+/// This API is available when the `std` feature is enabled.
+///
+/// # Example
+///
+/// ```ignore
+/// # use slint::*;
+/// let font_data = include_bytes!("path/to/font.ttf");
+/// match register_font_from_memory(font_data.to_vec()) {
+///     Ok(handle) => println!("Registered {} font families", handle.family_ids.len()),
+///     Err(e) => eprintln!("Failed to register font: {}", e),
+/// }
+/// ```
+#[cfg(feature = "std")]
+pub use i_slint_core::register_font_from_memory;
+
+/// Handle to a registered font that can be used for future operations.
+///
+/// **This is an experimental API.** The API may change in future versions.
+#[cfg(feature = "std")]
+pub use i_slint_core::FontHandle;
+
+/// Error type for font registration failures.
+///
+/// **This is an experimental API.** The API may change in future versions.
+#[cfg(feature = "std")]
+pub use i_slint_core::RegisterFontError;
+
 pub mod private_unstable_api;
 
 /// Enters the main event loop. This is necessary in order to receive

examples/gallery/Cargo.toml

@@ -31,7 +31,7 @@ slint-build = { path = "../../api/rs/build" }
 #wasm#
 #wasm# [target.'cfg(target_arch = "wasm32")'.dependencies]
 #wasm# wasm-bindgen = { version = "0.2" }
-#wasm# web-sys = { version = "0.3", features=["console"] }
+#wasm# web-sys = { version = "0.3", features=["console", "Window", "Navigator"] }
 #wasm# console_error_panic_hook = "0.1.5"
 
 [package.metadata.bundle]

examples/gallery/build.rs

@@ -2,5 +2,10 @@
 // SPDX-License-Identifier: MIT
 
 fn main() {
-    slint_build::compile("gallery.slint").unwrap();
+    let mut config = slint_build::CompilerConfiguration::new();
+    let target = std::env::var("TARGET").unwrap();
+    if target.contains("android") || target.contains("wasm32") {
+        config = config.with_bundled_translations(concat!(env!("CARGO_MANIFEST_DIR"), "/lang/"));
+    }
+    slint_build::compile_with_config("gallery.slint", config).unwrap();
 }

examples/gallery/index.html

@@ -51,6 +51,44 @@ <h1>Slint Gallery</h1>
     var galleries = [];
     var currentGallery = undefined;
 
+    // Get Noto CJK font URL from GitHub for the detected language
+    function getNotoFontUrl(lang) {
+      const langCode = lang.split('-')[0].toLowerCase();
+
+      // Direct URLs to OTF files from Noto CJK GitHub repository (using raw.githubusercontent.com for CORS)
+      const fontMap = {
+        'ja': 'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/OTF/Japanese/NotoSansCJKjp-Regular.otf',
+        // 'zh': 'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/OTF/SimplifiedChinese/NotoSansCJKsc-Regular.otf',
+        // 'ko': 'https://raw.githubusercontent.com/notofonts/noto-cjk/main/Sans/OTF/Korean/NotoSansCJKkr-Regular.otf',
+      };
+
+      return fontMap[langCode];
+    }
+
+    // Fetch font from GitHub
+    async function fetchFont(fontUrl) {
+      const fontResponse = await fetch(fontUrl);
+      if (!fontResponse.ok) {
+        throw new Error(`HTTP ${fontResponse.status}: ${fontResponse.statusText}`);
+      }
+      return await fontResponse.arrayBuffer();
+    }
+
+    // Load font for the detected language
+    async function loadFontForLanguage(module, lang) {
+      const fontUrl = getNotoFontUrl(lang);
+
+      if (fontUrl) {
+        try {
+          const fontData = await fetchFont(fontUrl);
+          const uint8Array = new Uint8Array(fontData);
+          const result = await module.load_font_from_bytes(uint8Array);
+        } catch (error) {
+          console.error(`Failed to load font for language ${lang}:`, error);
+        }
+      }
+    }
+
     function initGallery(gallery) {
       document.getElementById("spinner").hidden = false;
 
@@ -67,19 +105,31 @@ <h1>Slint Gallery</h1>
         document.getElementById("canvas-parent").appendChild(galleries[gallery]);
         document.getElementById("spinner").hidden = true;
       } else {
-        import(gallery).then(module => {
+        import(gallery).then(async module => {
           let canvas = document.createElement("canvas");
           canvas.id = "canvas";
           canvas.dataset.slintAutoResizeToPreferred = "true";
           currentGallery = gallery;
           galleries[gallery] = canvas;
 
           document.getElementById("canvas-parent").appendChild(canvas);
-          module.default().finally(() => {
-            document.getElementById("canvas").hidden = false;
-            document.getElementById("spinner").hidden = true;
-          });
-        })
+
+          // Initialize WASM module first
+          await module.default();
+
+          // Detect browser language and load appropriate font
+          const browserLang = (navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage || 'en';
+          await loadFontForLanguage(module, browserLang);
+
+          // Start the application
+          module.main();
+
+          document.getElementById("canvas").hidden = false;
+          document.getElementById("spinner").hidden = true;
+        }).catch(error => {
+          console.error('Failed to initialize gallery:', error);
+          document.getElementById("spinner").hidden = true;
+        });
       }
     }
 

examples/gallery/main.rs

@@ -8,17 +8,27 @@ use wasm_bindgen::prelude::*;
 
 slint::include_modules!();
 
+#[cfg(target_arch = "wasm32")]
+#[wasm_bindgen]
+pub fn load_font_from_bytes(font_data: &[u8]) -> Result<(), JsValue> {
+    slint::register_font_from_memory(font_data.to_vec())
+        .map(|_| ())
+        .map_err(|e| JsValue::from_str(&format!("Failed to register font: {}", e)))
+}
+
 use std::rc::Rc;
 
 use slint::{Model, ModelExt, ModelRc, SharedString, StandardListViewItem, VecModel};
 
-#[cfg_attr(target_arch = "wasm32", wasm_bindgen(start))]
+#[cfg_attr(target_arch = "wasm32", wasm_bindgen)]
 pub fn main() {
     // This provides better error messages in debug mode.
     // It's disabled in release mode so it doesn't bloat up the file size.
     #[cfg(all(debug_assertions, target_arch = "wasm32"))]
     console_error_panic_hook::set_once();
 
+    // For native builds, initialize gettext translations
+    #[cfg(not(target_arch = "wasm32"))]
     slint::init_translations!(concat!(env!("CARGO_MANIFEST_DIR"), "/lang/"));
 
     let app = App::new().unwrap();

internal/common/sharedfontique.rs

@@ -131,6 +131,88 @@ impl std::ops::DerefMut for Collection {
     }
 }
 
+/// Handle to a registered font that can be used for future operations.
+#[derive(Debug, Clone)]
+pub struct FontHandle {
+    /// Family IDs of the registered fonts
+    pub family_ids: Vec<fontique::FamilyId>,
+}
+
+/// Error type for font registration failures.
+#[derive(Debug, Clone)]
+pub enum RegisterFontError {
+    /// The provided font data was empty
+    EmptyData,
+    /// No valid fonts could be extracted from the data
+    NoFontsFound,
+    /// The font data could not be parsed
+    InvalidFontData,
+}
+
+impl std::fmt::Display for RegisterFontError {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            RegisterFontError::EmptyData => write!(f, "Font data is empty"),
+            RegisterFontError::NoFontsFound => {
+                write!(f, "No valid fonts found in the provided data")
+            }
+            RegisterFontError::InvalidFontData => write!(f, "Invalid font data"),
+        }
+    }
+}
+
+impl std::error::Error for RegisterFontError {}
+
+/// Register a font from byte data dynamically.
+///
+/// # Arguments
+///
+/// * `font_data` - Font data as bytes (supports any type that can be converted to a byte slice)
+///
+/// # Returns
+///
+/// Returns a `FontHandle` on success, or a `RegisterFontError` on failure.
+///
+/// # Example
+///
+/// ```ignore
+/// let font_bytes = include_bytes!("my_font.ttf");
+/// match register_font_from_memory(font_bytes.to_vec()) {
+///     Ok(handle) => println!("Registered {} font families", handle.family_ids.len()),
+///     Err(e) => eprintln!("Failed to register font: {}", e),
+/// }
+/// ```
+pub fn register_font_from_memory(
+    font_data: impl AsRef<[u8]> + Send + Sync + 'static,
+) -> Result<FontHandle, RegisterFontError> {
+    let data = font_data.as_ref();
+
+    if data.is_empty() {
+        return Err(RegisterFontError::EmptyData);
+    }
+
+    // Convert to owned data for Arc
+    let owned_data: Vec<u8> = data.to_vec();
+    let blob = fontique::Blob::new(Arc::new(owned_data));
+
+    let mut collection = get_collection();
+    let fonts = collection.register_fonts(blob, None);
+
+    if fonts.is_empty() {
+        return Err(RegisterFontError::NoFontsFound);
+    }
+
+    let family_ids: Vec<_> = fonts.iter().map(|(family_id, _)| *family_id).collect();
+
+    // Set up fallbacks for all scripts
+    for script in fontique::Script::all_samples().iter().map(|(script, _)| *script) {
+        collection
+            .append_fallbacks(fontique::FallbackKey::new(script, None), family_ids.iter().copied());
+    }
+
+    Ok(FontHandle { family_ids })
+}
+
 /// Font metrics in design space. Scale with desired pixel size and divided by units_per_em
 /// to obtain pixel metrics.
 #[derive(Clone)]

internal/core/Cargo.toml

@@ -43,6 +43,7 @@ std = [
   "chrono/clock",
   "dep:sys-locale",
   "dep:webbrowser",
+  "shared-fontique",
 ]
 # Unsafe feature meaning that there is only one core running and all thread_local are static.
 # You can only enable this feature if you are sure that any API of this crate is only called
@@ -112,7 +113,7 @@ unicode-script = { version = "0.5.7", optional = true }
 integer-sqrt = { version = "0.1.5" }
 bytemuck = { workspace = true, optional = true, features = ["derive"] }
 zeno = { version = "0.3.3", optional = true, default-features = false, features = ["eval"] }
-sys-locale = { version = "0.3.2", optional = true }
+sys-locale = { version = "0.3.2", optional = true, features = ["js"] }
 parley = { version = "0.6.0", optional = true }
 pulldown-cmark = { version = "0.13.0", optional = true }
 

internal/core/lib.rs

@@ -62,6 +62,18 @@ pub mod window;
 #[doc(inline)]
 pub use string::SharedString;
 
+/// Register a font from memory.
+#[cfg(feature = "std")]
+pub use i_slint_common::sharedfontique::register_font_from_memory;
+
+/// Handle to a registered font.
+#[cfg(feature = "std")]
+pub use i_slint_common::sharedfontique::FontHandle;
+
+/// Error type for font registration failures.
+#[cfg(feature = "std")]
+pub use i_slint_common::sharedfontique::RegisterFontError;
+
 #[doc(inline)]
 pub use sharedvector::SharedVector;