Is there any plan to support full-width characters?

[toge]

Hi.

This module is awesome!
I love to use this by VScode extension.

I met a issue when I format JSON data which is included Japanese characters.

Before JSON:

[
  {
     "field1": "foobar",
     "field2": "あいうえお",
     "field3": 1
  },
  {
     "field1": "foo",
     "field2": "あいうえ",
     "field3": 10
  },
  {
     "field1": "bara",
     "field2": "あいう",
     "field3": 100
  }
]

After JSON:

[
    { "field1": "foobar", "field2": "あいうえお", "field3":   1 },
    { "field1": "foo"   , "field2": "あいうえ" , "field3":  10 },
    { "field1": "bara"  , "field2": "あいう"  , "field3": 100 }
]

This issue may be caused by Unicode full-width characters.
There are some modules to solve it. (ex. https://www.npmjs.com/package/string-width)

Is there any plan to support full-width characters?

[j-brooke]

Thank you for reporting this. I will investigate.

[j-brooke]

I've written code to add the right number of spaces (in branches), but most of the environments in which I've tested still don't display the data lined up. In particular, VS Code doesn't enforce that the full-width characters are exactly twice the width of half-width characters, so the alignment ends up being off by a few pixels, depending on font. I wonder if there's any point in trying to put this feature in VSCode, if it won't render the text properly anyway.

@toge - Will you please check and see if VSCode lines the data up correctly in your environment? It might behave differently depending on localization. (I'm running en-us.)

Here's the output with spaces in the right places:

[
    { "field1": "foobar", "field2": "あいうえお", "field3":   1 },
    { "field1": "foo"   , "field2": "あいうえ"  , "field3":  10 },
    { "field1": "bara"  , "field2": "あいう"    , "field3": 100 }
]

Of the tests I ran, only the MacOS terminal and the MINGW64 terminal on Windows line the characters up correctly. VSCode fails, in both the editor and terminal, on both MacOS and Windows. (Changing VSCode to use the same font as the terminal didn't help.)

Here are some screenshots of what I saw:

MacOS terminal (correct):

VSCode terminal Windows (bad):

VSCode terminal MacOS (bad):

VSCode editor MacOS (bad):

Firefox MacOS (bad):

[shuckster]

You say "bad" but that's a lot better! Great work. 👍

[j-brooke]

You say "bad" but that's a lot better! Great work. 👍

Thanks. I agree it's better. But the examples above only have 3-5 full-width characters. The drift is probably much more noticeable with longer strings that greatly vary in length.

[toge]

Sorry for late response.

Thanks a lot! Great work!
In my environment, VS code display your result correctly.

I think Monospace font for full-witdh character would solve the few pixel gaps.
Because VS code calculates font widths by special way, some fonts will cause a gap of a few pixels.

I use HackGen font. In this font, the width of full-width characters is exactly two times from that of half-width characters.
https://github.com/yuru7/HackGen

[j-brooke]

Implemented in version 2.2.