Skip to content

Fix excessive word spacing on Linux caused by emoji-font fallback - #3187

Merged
gavande1 merged 1 commit into
trunkfrom
stu-1613-fix-linux-font-word-spacing
Apr 22, 2026
Merged

Fix excessive word spacing on Linux caused by emoji-font fallback#3187
gavande1 merged 1 commit into
trunkfrom
stu-1613-fix-linux-font-word-spacing

Conversation

@gavande1

@gavande1 gavande1 commented Apr 22, 2026

Copy link
Copy Markdown
Contributor

Related issues

How AI was used in this PR

AI-assisted: diagnosed the root cause (Chromium per-glyph font fallback picking up Noto Color Emoji's wide U+0020 glyph on Linux because no text font earlier in the stack is installed there) and drafted the one-line insertion into the font stack. The change was reviewed by me before commit.

Proposed Changes

  • Add common Linux UI fonts (Ubuntu, Cantarell, Liberation Sans, DejaVu Sans) to the body font stack in apps/studio/src/index.css, positioned before the emoji fonts so a text font resolves first for the space glyph.
  • No existing entries were removed or reordered — macOS and Windows resolution is unchanged because those platforms never walk past their native fonts (-apple-system / BlinkMacSystemFont / Segoe UI).

Why this fixes it

Chromium does per-glyph fallback in declared order. On Linux, -apple-system, BlinkMacSystemFont, Segoe UI, and often Roboto aren't installed, so the first font that is installed used to be Noto Color Emoji — which has a very wide space glyph. Chromium would pick it up for U+0020 and stop, producing the gaps. The Noto Sans / sans-serif entries already at the tail of the stack were never consulted because resolution had already terminated. Inserting Linux text fonts before the emoji fonts gives Chromium a real text font to resolve the space from.

Testing Instructions

  • On Linux: launch npm start and visually confirm type still renders in the system font and there is no additional spacing.
  • On macOS: launch npm start and visually confirm type still renders in the system font (SF Pro / -apple-system) — no regression.
  • On Windows: launch and confirm text still renders in Segoe UI — no regression.

Before / After

Before:
CleanShot 2026-04-22 at 19 23 10@2x

After: normal inter-word spacing on Linux

CleanShot 2026-04-22 at 19 18 14@2x

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?
@gavande1 gavande1 self-assigned this Apr 22, 2026
Add Linux UI fonts (Ubuntu, Cantarell, Liberation Sans, DejaVu Sans) before
the emoji fonts in the body font stack so the space glyph resolves from a
text font instead of Noto Color Emoji's wide space glyph.
@gavande1
gavande1 force-pushed the stu-1613-fix-linux-font-word-spacing branch from d9075f5 to 4759a62 Compare April 22, 2026 14:00
@ivan-ottinger
ivan-ottinger self-requested a review April 22, 2026 14:03

@ivan-ottinger ivan-ottinger left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! 👍🏼 I can confirm the PR addresses the issue:

Image

I did not observe any regressions on macOS / Windows.

@wpmobilebot

Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 4759a62 vs trunk

app-size

Metric trunk 4759a62 Diff Change
App Size (Mac) 1491.73 MB 1491.73 MB +0.00 MB ⚪ 0.0%

site-editor

Metric trunk 4759a62 Diff Change
load 1930 ms 1888 ms 42 ms ⚪ 0.0%

site-startup

Metric trunk 4759a62 Diff Change
siteCreation 8145 ms 8111 ms 34 ms ⚪ 0.0%
siteStartup 4949 ms 4954 ms +5 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

@gavande1
gavande1 merged commit a7e114a into trunk Apr 22, 2026
10 checks passed
@gavande1
gavande1 deleted the stu-1613-fix-linux-font-word-spacing branch April 22, 2026 14:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants