ink icon indicating copy to clipboard operation
ink copied to clipboard

Fix string-width miscalculation for single-cell UI symbols

Open okets opened this issue 2 months ago • 4 comments

Summary

Fixes an issue where common UI symbols (▶, ◀, ⚠, ℹ) were being incorrectly measured as width 2 by string-width, causing layout breaks in fixed-width containers.

Problem

The string-width library uses the East Asian Width property, which marks certain common UI symbols as "Ambiguous". This causes them to be treated as wide characters (width 2) even though they display as single-width (width 1) in modern terminals.

When these characters are used in Ink components, they cause:

  • Incorrect text alignment
  • Layout overflow in fixed-width containers
  • Visual artifacts from spacing calculations

Solution

Introduced a SINGLE_WIDTH_OVERRIDES set that explicitly maps characters incorrectly measured by string-width to their correct width (1). The width calculation now checks this override map before falling back to string-width.

Changes

  • Added SINGLE_WIDTH_OVERRIDES constant with verified single-width characters
  • Modified character width calculation in src/output.ts:227 to check overrides first
  • Added comprehensive documentation explaining the issue and verification criteria

Test Plan

  • ✅ Verified each character displays as single-width in modern terminals
  • ✅ Confirmed string-width incorrectly measures these as width 2
  • ✅ Tested that the fix prevents layout breaks in fixed-width containers

okets avatar Oct 06 '25 05:10 okets

I just went over to fix the problem at the source (string-width library) I figured out that in string-width version 7.2.0 (ink uses this), the bug exists But in string-width version 8.1.0 (latest) , the bug is fixed.

solving this bug could be as easy as updating string-width to version 8.1.0.

okets avatar Oct 06 '25 06:10 okets

I just went over to fix the problem at the source (string-width library) I figured out that in string-width version 7.2.0 (ink uses this), the bug exists But in string-width version 8.1.0 (latest) , the bug is fixed.

solving this bug could be as easy as updating string-width to version 8.1.0.

Also experiencing this right now. @okets Is that upgrade something you want to take on? If not I can also help out.

wu-json avatar Oct 15 '25 01:10 wu-json

@wu-json I just pushed my changes. waiting for someone to appove the PR.

okets avatar Oct 15 '25 03:10 okets

I tried patching Ink locally to use "string-width": "^8.1.0", but it didn't seem to fix the issue for me. I still observe layout shifts with those symbol: ⬆ and ✘.

LilaRest avatar Oct 18 '25 14:10 LilaRest