Wrong whitespace padding when formatting content with emojis

[fhemberger]

trafficstars

Trying to format a table with emoji results in wrong whitespace padding:

| First column | Second column | Third column |
|--------------|---------------|--------------|
| First row    | ✅             | ❌            |
| Second row   | ✅             | ❌            |

JavaScript assumes each Unicode character taking up 2 bytes, but some characters take up more bytes (for example emojis):

// This is wrong
'✅'.length === 2
> true

Using Intl.Segmenter fixes this issue:

// Much better!
[...new Intl.Segmenter().segment('✅')].length 
> 1

[...new Intl.Segmenter().segment('✅ hello world')].length
> 13

See also: How to count the correct length of a string with emojis in javascript?

[ttytyper]

I suspect this issue also affects Japanese text:

| Foo            | Bar |
|----------------|-----|
| 漢字を書きます | Baz |