2 known bugs in string-width, with affected versions, fixes and workarounds. Sourced from upstream issue trackers.
| Severity | Affected | Fixed in | Title |
|---|
| Status |
|---|
| Source |
|---|
| medium | any | \u2014 | Combining characters not supported For instance, the unicode sequence "x\u0300" renders in a standard Unicode terminal using a single character cell, but string-width counts it as 2. (tested in xfce4-terminal and rxvt-unicode on Debian Jessie)
This could be represented as a (non-passing) test:
~~~~
t.is(m('x\u0300'), 1);
~~~~
| fixed | github:6 |
| medium | any | \u2014 | Handling text variation selector Hello,
I realized that some unicode characters output a width of 2 instead of 1 when they have the text variation modifier applied (`\ufe0e`), e.g.:
```js
> '\u21a9\ufe0e'
'↩︎' // text
> '\u21a9\ufe0f'
'↩️' // I cannot paste the emoji for some reason
> stringWidth('\u21a9\ufe0f')
2 // Ok
> stringWidth('\u21a9\ufe0e')
2 // should be 1
```
I took a look at the list of unicode characters that accept a variation [here](https://github.com/samhocevar/unicode-emoji/blob/master/emoji-variation-sequences.txt) and it doesn't seem there is a simple rule to follow, some are full-width some are normal so I'm not sure if this can be handled correctly across platforms.
This is a display test I used to visually check **some** of the characters:
```js
console.log(`\u0023\uFE0E ; text style; # (1.1) NUMBER SIGN`)
console.log(`\u0023\uFE0F ; emoji style; # (1.1) NUMBER SIGN`)
console.log(`\u002A\uFE0E ; text style; # (1.1) ASTERISK`)
console.log(`\u002A\uFE0F ; emoji style; # (1.1) ASTERISK`)
console.log(`\u0030\uFE0E ; text style; # (1.1) DIGIT ZERO`)
console.log(`\u0030\uFE0F ; emoji style; # (1.1) DIGIT ZERO`)
console.log(`\u0031\uFE0E ; text style; # (1.1) DIGIT ONE`)
console.log(`\u0031\uFE0F ; emoji style; # (1.1) DIGIT ONE`)
console.log(`\u0032\uFE0E ; text style; # (1.1) DIGIT TWO`)
console.log(`\u0032\uFE0F ; emoji style; # (1.1) DIGIT TWO`)
console.log(`\u0033\uFE0E ; text style; # (1.1) DIGIT THREE`)
console.log(`\u0033\uFE0F ; emoji style; # (1.1) DIGIT THREE`)
console.log(`\u0034\uFE0E ; text style; # (1.1) DIGIT FOUR`)
console.log(`\u0034\uFE0F ; emoji style; # (1.1) DIGIT FOUR`)
console.log(`\u0035\uFE0E ; text style; # (1.1) DIGIT FIVE`)
console.log(`\u0035\uFE0F ; emoji style; # (1.1) DIGIT FIVE`)
console.log(`\u0036\uFE0E ; text style; # (1.1) DIGIT SIX`)
console.log(`\u0036\uFE0F ; emoji style; # (1.1) DIGIT SIX`)
console.log(`\u0037\uFE0E ; text style; # (1.1) DIGIT SEVEN`)
console.log(`\u0037\uFE0F ; emoji style; # (1.1) DIGIT SEVEN`)
console.log(`\u0038\uFE0E ; text style; # (1.1) DIGIT EIGHT`)
console.log(`\u0038\uFE0F ; emoji style; # (1.1) DIGIT EIGHT`)
console.log(`\u0039\uFE0E ; text style; # (1.1) DIGIT NINE`)
console.log(`\u0039\uFE0F ; emoji style; # (1.1) DIGIT NINE`)
console.log(`\u00A9\uFE0E ; text style; # (1.1) COPYRIGHT SIGN`)
console.log(`\u00A9\uFE0F ; emoji style; # (1.1) COPYRIGHT SIGN`)
console.log(`\u00AE\uFE0E ; text style; # (1.1) REGISTERED SIGN`)
console.log(`\u00AE\uFE0F ; emoji style; # (1.1) REGISTERED SIGN`)
console.log(`\u203C\uFE0E ; text style; # (1.1) DOUBLE EXCLAMATION MARK`)
console.log(`\u203C\uFE0F ; emoji style; # (1.1) DOUBLE EXCLAMATION MARK`)
console.log(`\u2049\uFE0E ; text style; # (3.0) EXCLAMATION QUESTION MARK`)
console.log(`\u2049\uFE0F ; emoji style; # (3.0) EXCLAMATION QUESTION MARK`)
console.log(`\u2122\uFE0E ; text style; # (1.1) TRADE MARK SIGN`)
console.log(`\u2122\uFE0F ; emoji style; # (1.1) TRADE MARK SIGN`)
console.log(`\u2139\uFE0E ; text style; # (3.0) INFORMATION SOURCE`)
console.log(`\u2139\uFE0F ; emoji style; # (3.0) INFORMATION SOURCE`)
console.log(`\u2194\uFE0E ; text style; # (1.1) LEFT RIGHT ARROW`)
console.log(`\u2194\uFE0F ; emoji style; # (1.1) LEFT RIGHT ARROW`)
console.log(`\u2195\uFE0E ; text style; # (1.1) UP DOWN ARROW`)
console.log(`\u2195\uFE0F ; emoji style; # (1.1) UP DOWN ARROW`)
console.log(`\u2196\uFE0E ; text style; # (1.1) NORTH WEST ARROW`)
console.log(`\u2196\uFE0F ; emoji style; # (1.1) NORTH WEST ARROW`)
console.log(`\u2197\uFE0E ; text style; # (1.1) NORTH EAST ARROW`)
console.log(`\u2197\uFE0F ; emoji style; # (1.1) NORTH EAST ARROW`)
console.log(`\u2198\uFE0E ; text style; # (1.1) SOUTH EAST ARROW`)
console.log(`\u2198\uFE0F ; emoji style; # (1.1) SOUTH EAST ARROW`)
console.log(`\u2199\uFE0E ; text style; # (1.1) SOUTH WEST ARROW`)
console.log(`\u2199\uFE0F ; emoji style; # (1.1) SOUTH WEST ARROW`)
console.log(`\u21A9\uFE0E ; text style; # (1.1) LEFTWARDS ARROW WITH HOOK`)
console.log(`\u21A9\uFE0F ; emoji style; # (1.1) LEFTWARDS ARROW WITH HOOK`)
console.log(`\u21AA\uFE0E ; text style; # (1.1) RIGHTWARDS ARROW WITH HOOK`)
console.log(`\u21AA\uFE0F ; emoji style; # (1.1) RIGHTWARDS ARROW WITH HOOK`)
console.log(`\u231A\uFE0E ; text style; # (1.1) WATCH`)
console.log(`\u231A\uFE0F ; emoji style; # (1.1) WATCH`)
console.log(`\u231B\uFE0E ; text style; # (1.1) HOURGLASS`)
console.log(`\u231B\uFE0F ; emoji style; # (1.1) HOURGLASS`)
console.log(`\u2328\uFE0E ; text style; # (1.1) KEYBOARD`)
console.log(`\u2328\uFE0F ; emoji style; # (1.1) KEYBOARD`)
console.log(`\u23CF\uFE0E ; text style; # (4.0) EJECT SYMBOL`)
console.log(`\u23CF\uFE0F ; emoji style; # (4.0) EJECT SYMBOL`)
console.log(
`\u23E9\uFE0E ; text style; # (6.0) BLACK RIGHT-POINTING DOUBLE TRIANGLE`
)
console.log(
`\u23E9\uFE0F ; emoji style; # (6.0) BLACK RIGHT-POINTING DOUBLE TRIANGLE`
)
console.log(
`\u23EA\uFE0E ; text style; # (6.0) BLACK LEFT-POINTING DOUBLE TRIANGLE`
)
console.log(
`\u23EA\uFE0F ; emoji style; # (6.0) BLACK LEFT-POINTING DOUBLE TRIANGLE`
)
console.log(
`\u23ED\uFE0E ; text style; # (6.0) BLACK RIGHT-POINTING DOUBLE TRIANGLE WITH `
)
console.log(
`\u23ED\uFE0F ; emoji style; # (6.0) BLACK RIGHT-POINTING DOUBLE TRIANGLE WITH `
)
console.log(
`\u23EE\uFE0E ; text style; # (6.0) BLACK LEFT-POINTING DOUBLE TRIANGLE WITH `
)
console.log(
`\u23EE\uFE0F ; emoji style; # (6.0) BLACK LEFT-POINTING DOUBLE TRIANGLE WITH `
)
console.log(
`\u23EF\uFE0E ; text style; # (6.0) BLACK RIGHT-POINTING TRIANGLE WITH DOUBLE `
)
console.log(
`\u23EF\uFE0F ; emoji style; # (6.0) BLACK RIGHT-POINTING TRIANGLE WITH DOUBLE `
)
console.log(`\u23F1\uFE0E ; text style; # (6.0) STOPWATCH`)
console.log(`\u23F1\uFE0F ; emoji style; # (6.0) STOPWATCH`)
console.log(`\u23F2\uFE0E ; text style; # (6.0) TIMER CLOCK`)
console.log(`\u23F2\uFE0F ; emoji style; # (6.0) TIMER CLOCK`)
console.log(`\u23F3\uFE0E ; text style; # (6.0) HOURGLASS WITH FLOWING SAND`)
console.log(`\u23F3\uFE0F ; emoji style; # (6.0) HOURGLASS WITH FLOWING SAND`)
console.log(`\u23F8\uFE0E ; text style; # (7.0) DOUBLE VERTICAL BAR`)
console.log(`\u23F8\uFE0F ; emoji style; # (7.0) DOUBLE VERTICAL BAR`)
console.log(`\u23F9\uFE0E ; text style; # (7.0) BLACK SQUARE FOR STOP`)
console.log(`\u23F9\uFE0F ; emoji style; # (7.0) BLACK SQUARE FOR STOP`)
console.log(`\u23FA\uFE0E ; text style; # (7.0) BLACK CIRCLE FOR RECORD`)
console.log(`\u23FA\uFE0F ; emoji style; # (7.0) BLACK CIRCLE FOR RECORD`)
console.log(
`\u24C2\uFE0E ; text style; # (1.1) CIRCLED LATIN CAPITAL LETTER M`
)
console.log(
`\u24C2\uFE0F ; emoji style; # (1.1) CIRCLED LATIN CAPITAL LETTER M`
)
console.log(`\u25AA\uFE0E ; text style; # (1.1) BLACK SMALL SQUARE`)
console.log(`\u25AA\uFE0F ; emoji style; # (1.1) BLACK SMALL SQUARE`)
console.log(`\u25AB\uFE0E ; text style; # (1.1) WHITE SMALL SQUARE`)
console.log(`\u25AB\uFE0F ; emoji style; # (1.1) WHITE SMALL SQUARE`)
console.log(
`\u25B6\uFE0E ; text style; # (1.1) BLACK RIGHT-POINTING TRIANGLE`
)
console.log(
`\u25B6\uFE0F ; emoji style; # (1.1) BLACK RIGHT-POINTING TRIANGLE`
)
console.log(`\u25C0\uFE0E ; text style; # (1.1) BLACK LEFT-POINTING TRIANGLE`)
console.log(`\u25C0\uFE0F ; emoji style; # (1.1) BLACK LEFT-POINTING TRIANGLE`)
console.log(`\u25FB\uFE0E ; text style; # (3.2) WHITE MEDIUM SQUARE`)
console.log(`\u25FB\uFE0F ; emoji style; # (3.2) WHITE MEDIUM SQUARE`)
console.log(`\u25FC\uFE0E ; text style; # (3.2) BLACK MEDIUM SQUARE`)
console.log(`\u25FC\uFE0F ; emoji style; # (3.2) BLACK MEDIUM SQUARE`)
console.log(`\u25FD\uFE0E ; text style; # (3.2) WHITE MEDIUM SMALL SQUARE`)
console.log(`\u25FD\uFE0F ; emoji style; # (3.2) WHITE MEDIUM SMALL SQUARE`)
console.log(`\u25FE\uFE0E ; text style; # (3.2) BLACK MEDIUM SMALL SQUARE`)
console.log(`\u25FE\uFE0F ; emoji style; # (3.2) BLACK MEDIUM SMALL SQUARE`)
console.log(`\u2600\uFE0E ; text style; # (1.1) BLACK SUN WITH RAYS`)
console.log(`\u2600\uFE0F ; emoji style; # (1.1) BLACK SUN WITH RAYS`)
console.log(`\u2601\uFE0E ; text style; # (1.1) CLOUD`)
console.log(`\u2601\uFE0F ; emoji style; # (1.1) CLOUD`)
console.log(`\u2602\uFE0E ; text style; # (1.1) UMBRELLA`)
console.log(`\u2602\uFE0F ; emoji style; # (1.1) UMBRELLA`)
console.log(`\u2603\uFE0E ; text style; # (1.1) SNOWMAN`)
console.log(`\u2603\uFE0F ; emoji style; # (1.1) SNOWMAN`)
console.log(`\u2604\uFE0E ; text style; # (1.1) COMET`)
console.log(`\u2604\uFE0F ; emoji style; # (1.1) COMET`)
console.log(`\u260E\uFE0E ; text style; # (1.1) BLACK TELEPHONE`)
console.log(`\u260E\uFE0F ; emoji style; # (1.1) BLACK TELEPHONE`)
console.log(`\u2611\uFE0E ; text style; # (1.1) BALLOT BOX WITH CHECK`)
console.log(`\u2611\uFE0F ; emoji style; # (1.1) BALLOT BOX WITH CHECK`)
console.log(`\u2614\uFE0E ; text style; # (4.0) UMBRELLA WITH RAIN DROPS`)
console.log(`\u2614\uFE0F ; emoji style; # (4.0) UMBRELLA WITH RAIN DROPS`)
console.log(`\u2615\uFE0E ; text style; # (4.0) HOT BEVERAGE`)
console.log(`\u2615\uFE0F ; emoji style; # (4.0) HOT BEVERAGE`)
console.log(`\u2618\uFE0E ; text style; # (4.1) SHAMROCK`)
console.log(`\u2618\uFE0F ; emoji style; # (4.1) SHAMROCK`)
console.log(`\u261D\uFE0E ; text style; # (1.1) WHITE UP POINTING INDEX`)
console.log(`\u261D\uFE0F ; emoji style; # (1.1) WHITE UP POINTING INDEX`)
console.log(`\u2620\uFE0E ; text style; # (1.1) SKULL AND CROSSBONES`)
console.log(`\u2620\uFE0F ; emoji style; # (1.1) SKULL AND CROSSBONES`)
console.log(`\u2622\uFE0E ; text style; # (1.1) RADIOACTIVE SIGN`)
console.log(`\u2622\uFE0F ; emoji style; # (1.1) RADIOACTIVE SIGN`)
console.log(`\u2623\uFE0E ; text style; # (1.1) BIOHAZARD SIGN`)
console.log(`\u2623\uFE0F ; emoji style; # (1.1) BIOHAZARD | fixed | github:42 |
Get this data programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/bugs/npm/string-width