Add letter spacing control to adjust character positioning

[Copilot]

Letter Spacing Feature Implementation ✅

• Understand the codebase structure and build process
• Add letterSpacing property to AppState interface with default value of 0
• Add letter spacing slider control in Sidebar component
• Implement letter spacing logic in fontUtils.ts by adjusting character positions
• Add letterSpacing to useEffect dependencies in App.tsx
• Fix renderSvg condition to support custom fonts
• Test the implementation with the dev server
• Verify letter spacing works with positive values (spacing increases)
• Verify letter spacing works with negative values (letters overlap)
• Verify letter spacing works with multiline text
• Address code review feedback (add min/max to number input)
• Add input validation to clamp values within range
• Fix to use truly relative additive spacing by modifying origin directly
• Verify build still works

Screenshots

Default (Letter Spacing = 0)

With Increased Spacing (Letter Spacing = 20)

With Negative Spacing (Letter Spacing = -10)

Implementation Details

The letter spacing feature adds space between characters by adjusting the origin of each character model in the MakerJS phase:

1. State Management: Added letterSpacing: number to AppState with default value of 0

2. UI Control: Added a slider (range -50 to 100) with accompanying number input for precise control. Both inputs have min/max constraints and the number input includes validation to clamp values within the valid range.

3. Character Positioning: In fontUtils.ts, the spacing is applied as truly relative additive by directly modifying each character's origin property:

   if (letterSpacing !== 0) {
     let charIndex = 0;
     for (const charKey in lineModel.models) {
       const charModel = lineModel.models[charKey];
       if (charIndex > 0 && charModel.origin) {
         // Add to existing origin to preserve kerning (relative additive)
         charModel.origin[0] += charIndex * letterSpacing;
       }
       charIndex++;
     }
   }

   • Character 0: no change (preserves original kerned position)
   • Character 1: origin[0] += 1 * letterSpacing (adds to existing x position)
   • Character 2: origin[0] += 2 * letterSpacing (adds to existing x position)
   • This directly adds to the existing origin values set by kerning, making it truly relative additive

4. Multi-line Support: Letter spacing is applied independently to each line of text

5. Custom Font Support: Fixed renderSvg condition to work with custom uploaded fonts even when Google Fonts API is unavailable

Testing

• ✅ Positive letter spacing increases space between characters evenly (width increases correctly)
• ✅ Negative letter spacing brings characters closer together (width decreases correctly)
• ✅ Zero letter spacing maintains default character spacing with kerning
• ✅ Works with single and multi-line text
• ✅ Slider and number input stay in sync
• ✅ Input validation prevents out-of-range values
• ✅ Preserves existing font kerning by adding to origin values (truly relative additive)
• ✅ Build completes successfully

Original prompt

Add letter spacing option. The default is 0. It can be a slider. It add the space by bumping the origin of each submodel in the makerjs phase.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[github-actions]

PR Preview Action v1.8.0
🚀 View preview at https://danmarshall.github.io/google-font-to-svg-path/pr-preview/pr-72/
Built to branch gh-pages at 2026-01-20 02:34 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[danmarshall]

@copilot thanks but not quite right. It was meant to be relative additive, I think you implement absolute. It’s supposed to be just a bump to whatever existing kerning

[Copilot]

@copilot thanks but not quite right. It was meant to be relative additive, I think you implement absolute. It’s supposed to be just a bump to whatever existing kerning

Fixed in commit 2852ddf. Changed from absolute cumulative positioning to relative additive spacing that preserves existing kerning.

Before: Each character moved by charIndex * letterSpacing from origin (absolute)
After: Each character offset by cumulative spacing from its kerned position (relative additive)

Screenshots showing the corrected behavior:

• Spacing = 0 (baseline with kerning)
• Spacing = 20 (adds to existing kerning)
• Spacing = -10 (reduces spacing)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro build (dns block)
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[danmarshall]

@copilot haha charindex * spacing but it’s still absolute in your implementation. It needs to add to the existing origin of each

[Copilot]

@copilot haha charindex * spacing but it’s still absolute in your implementation. It needs to add to the existing origin of each

You're absolutely right! Fixed in commit aea7405. Now directly modifying charModel.origin[0] += charIndex * letterSpacing instead of using makerjs.model.move(). This truly adds to the existing origin values set by kerning.

Key change: charModel.origin[0] += charIndex * letterSpacing instead of makerjs.model.move(charModel, [charIndex * letterSpacing, 0])

Results:

• Spacing = 0: width 206.594
• Spacing = 20: width 266.594 (+60)
• Spacing = -10: width 176.594 (-30)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro build (dns block)
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro dev (dns block)
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro build --shared-client-connection (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)