Skip to content

experimental color emoji via opt-in egui_noto_emoji crate#7707

Closed
alltheseas wants to merge 11 commits intoemilk:mainfrom
alltheseas:alltheseas/color-emoji-tweaks
Closed

experimental color emoji via opt-in egui_noto_emoji crate#7707
alltheseas wants to merge 11 commits intoemilk:mainfrom
alltheseas:alltheseas/color-emoji-tweaks

Conversation

@alltheseas
Copy link
Copy Markdown

This builds off of @lucasmerlin's color emoji draft PR.

I could not figure out how to commit to the open draft PR, so I am opening this one. Apologies.

I added noto open emoji set for the demo app. It works locally for me (see screenshots below) after downloading Noto fonts, and doing some format conversions.

Multiple Noto color emojis show in egui demo & render upon input.

Screenshots:
image
image

Summary

  • Add built-in vibrant emoji pipeline
    • introduces GlyphColoring, atlas persistence, and the runtime
      loader that decodes a packed Noto emoji sheet, so 1 440 color
      emojis ship with egui and stay vibrant across themes/atlas
      resets.
  • Add tooling to repack Noto emoji atlases
    • adds scripts/pack_noto_emoji.py plus .gitignore updates so we can
      regenerate the noto_{low,mid,high}.{atlas,bin} assets directly
      from the upstream zip.

Testing

  1. (Optional) Regenerate the atlas if you tweak the sprites:

    ensure scripts/pack_noto_emoji.py exists (checkout the branch that
    added it)
    python3 scripts/pack_noto_emoji.py --zip noto-emoji-2.051.zip
    mv crates/epaint/assets/emoji/noto_low.png crates/epaint/assets/
    emoji/noto_low.atlas
    mv crates/epaint/assets/emoji/noto_mid.png crates/epaint/assets/
    emoji/noto_mid.atlas
    mv crates/epaint/assets/emoji/noto_high.png crates/epaint/assets/
    emoji/noto_high.atlas
    (The script always writes .png; renaming keeps the files on the non-
    LFS track the loader expects.)

  2. Build & run:

    cargo check
    cargo run -p egui_demo_app --release --features "x11,wayland"
    In the demo window open one of the text input boxes ( I used EasyMark Editor in top menu) and enter emojis like 😀
    😍 🦀 to verify color rendering.

  3. Snapshot tests (requires Git LFS assets):

    cargo test -p egui_demo_app --test test_demo_app
    Expect differences; once reviewed, re-run with UPDATE_SNAPSHOTS=1
    to refresh.

@github-actions
Copy link
Copy Markdown

Preview is being built...

Preview will be available at https://egui-pr-preview.github.io/pr/7707-alltheseas/color-emoji-tweaks

View snapshot changes at kitdiff

@alltheseas alltheseas changed the title experimetnal color emoji experimental color emoji Nov 12, 2025
@lucasmerlin
Copy link
Copy Markdown
Collaborator

Hi! Awesome that you got it to work! Seems like numbers are always using emojis now though:

Screenshot 2025-11-13 at 09 50 22

We should really keep the egui surface minimal though, egui should just have some api to register a image with a glyph, or maybe some kind of loader api to register them on demand. Then you could create a 3rd party crate for e.g. noto emoji that people could add to their project to get emoji support. Especially since egui will eventually get built in emoji support when we switch the font rendering implementation (#7694)

@alltheseas
Copy link
Copy Markdown
Author

alltheseas commented Nov 13, 2025

Building on @lucasmerlin feedback, emojis are rendered via optional crate approach.

image image
  • Stop emoji font from replacing digits – prevent the emoji atlas from
    overriding ASCII digits/#/* so numerals keep the text font while still
    loading other sprites.
  • Add color glyph registration API – expose
    Context::register_color_glyph[_arc] plus plumbing so external crates can
    inject bitmap glyphs across all fonts.
  • Move bundled emojis into optional crate – extracted the heavy emoji
    assets/loader into the new egui_noto_emoji crate and made the demo opt-
    in so core egui stays lean.
  • Document optional emoji bundle – README/lib docs/changelogs updated with
    instructions to install egui_noto_emoji for color emojis.
  • Allow overriding cached monochrome emoji glyphs – registering a color
    glyph now replaces any previously cached monochrome fallback, keeping
    emojis vibrant in all themes.
  • Ignore multi-codepoint plan doc – .gitignore updated so the WIP design
    plan isn’t tracked/pushed.

@alltheseas alltheseas changed the title experimental color emoji experimental color emoji via opt-in egui_noto_emoji crate Nov 13, 2025
@alltheseas alltheseas force-pushed the alltheseas/color-emoji-tweaks branch from 42568e4 to 6778db8 Compare November 17, 2025 17:01
@alltheseas
Copy link
Copy Markdown
Author

Rebased onto latest main 2b792c1.

Fixed light/dark mode toggle breaking color emoji rendering 6778db8.

@lucasmerlin 👀

@alltheseas alltheseas closed this Jan 30, 2026
alltheseas added a commit to alltheseas/egui that referenced this pull request Jan 30, 2026
This adds support for rendering color emoji in egui via a new opt-in
`egui_noto_emoji` crate that bundles Noto Color Emoji sprites.

Key features:
- New `GlyphColoring` enum to distinguish color vs monochrome glyphs
- Color glyphs bypass text tinting and render with original colors
- Minimal API: `Context::register_color_glyph[_arc]` methods
- Atlas persistence: color glyphs survive font atlas rebuilds
- Deferred registration: glyphs registered before fonts init are queued

The implementation addresses feedback from PR emilk#7333 and emilk#7707:
- Fixes tinting problem (color glyphs not affected by text color)
- Handles atlas repopulation when fonts are recreated
- Aligns with skrifa+vello_cpu font backend (PR emilk#7694)
- Minimal API surface as suggested by @lucasmerlin

Co-Authored-By: Claude Opus 4.5 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants