fix: improve Unicode width calculation for emoji alignment #563
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fix: improve Unicode width calculation for emoji alignment
Summary
Fixes emoji and Unicode width calculation issues that cause box alignment problems in TUI applications. This resolves layout misalignment when mixing ASCII and Unicode content in lipgloss-styled components.
Problem
The existing width calculation using
ansi.StringWidth()
incorrectly handles:This causes boxes and layouts to appear misaligned when they contain Unicode content.
Changes
Core Implementation
stringWidth()
function with smart Unicode detectionmattn/go-runewidth
for accurate width calculationKey Functions Added
Dependencies Added
Testing
size_emoji_test.go
)Test Coverage
Performance Impact
Backward Compatibility
Visual Results
Before (Broken):
After (Fixed):
Use Cases Improved
Implementation Details
The fix uses a two-stage approach:
ansi.StringWidth()
for ANSI sequencesgo-runewidth
for accuracySmart detection triggers fallback only when:
Migration Guide
No migration required - this is a drop-in improvement.
Existing code continues to work exactly as before, but now with correct Unicode width calculations.
Related Issues
Closes #562
Testing Instructions
Screenshots
[Include before/after screenshots of TUI applications showing the alignment fix]
Impact: Fixes critical layout issues affecting international users and modern TUI applications worldwide.
Risk: Very low - preserves all existing functionality with targeted Unicode improvements.
Review Focus: Unicode edge cases, performance with large strings, ANSI sequence preservation.