Terminal: broken text layout

[warpdesign]

• VSCode Version: Code - Insiders 1.9.0-insider (fcac9b686abe4292e69a774f61c8c4ce17768bf5, 2017-01-31T00:57:46.157Z)
• OS Version: Windows_NT ia32 10.0.15019
• Extensions:

Extension	Author	Version
vscode-eslint	dbaeumer	1.2.2
theme-dracula	dracula-theme	1.2.5
vscode-great-icons	emmanuelbeziat	1.1.38
Theme-azure	gerane	0.0.2
theme-material-theme	jprestidge	1.0.1
vs-color-picker	lihui	0.3.2
Theme-MaterialKit	ms-vscode	0.1.1
view-in-browser	qinjia	0.0.4
ActiveFileInStatusBar	RoscoP	1.0.2
eval	Stormspirit	0.0.5
omnipascal	Wosi	0.12.0

---

Steps to Reproduce:

1. running grunt test to run unit testing should produce this output: (here in cmd.exe)

Here is what I got in VSCode integrated terminal:

Note that the first time I ran it, the layout of the prompt was also broken, instead of the cursor directly following the prompt, like:

I was having:

(and I could not move the cursor more on the left)

[Tyriar]

What's in your settings.json file and was there any errors in the dev tools console?

[warpdesign]

There were no errors in the console.

My settings.json file:

// Place your settings in this file to overwrite the default settings
{
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.lineHeight": 1.3,
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "window.openFilesInNewWindow": false,
    "window.reopenFolders": "one",
    "typescript.check.tscVersion": false,
    "workbench.sideBar.location": "left",
    "window.zoomLevel": 0,
    "workbench.activityBar.visible": true,
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\Sysnative\\cmd.exe",
    "terminal.integrated.rightClickCopyPaste": false
}

[warpdesign]

Here is what the inspector looks like (notice the prompt that seems to get shifted to the right (the begining of the prompt's text is in the previous div). Hope this helps.

[warpdesign]

More information: this didn't happen with VSCode 1.8.1, but happens with the latest final 1.9 build as well.

Running a simple sudo apt-get install package is enough to trigger the problem:

[CaselIT]

I have the same issue, when using mocha to test something. If needed I can add a simple repo to reproduce

Below is my configuration:

• VSCode Version: Code 1.9.0 (27240e71ef390bf2d66307e677c2a333cebf75af, 2017-02-02T08:31:00.827Z)
• OS Version: Windows_NT ia32 10.0.15019
• Extensions:

Extension	Author	Version
python	donjayamanne	0.5.8
tslint	eg2	0.8.1
docthis	joelday	0.3.10
PowerShell	ms-vscode	0.9.0
typescript-javascript-grammar	ms-vscode	0.0.18

[CaselIT]

I've noticed that both @waderyan and me are running Windows 10 preview 15019. I've tried to reproduce it on a normal version of windows 10 and could not. So the fault may be in the preview of windows.

Below is the configuration of my other machine where I could not reproduce the bug

• VSCode Version: Code 1.9.0 (27240e71ef390bf2d66307e677c2a333cebf75af, 2017-02-02T08:31:00.827Z)
• OS Version: Windows_NT ia32 10.0.14393
• Extensions:

Extension	Author	Version
python	donjayamanne	0.5.6
tslint	eg2	0.8.1
vscode-npm-script	eg2	0.1.8
docthis	joelday	0.3.10
vscode-filesize	mkxml	1.0.0
PowerShell	ms-vscode	0.9.0
typescript-javascript-grammar	ms-vscode	0.0.18

Hope it helps

[CaselIT]

I'm able to reproduce it on another pc with windows 15019

[Tyriar]

This could be related to the terminal not printing unicode characters correctly https://github.com/Microsoft/vscode/issues/19763? If you can reproduce what locale are you using? Could you also post a screenshot of VS Code terminal bad output via good output in cmd?

[CaselIT]

My locale is us. The normal terminal works fine I've noticed that the problem occurs only when the terminal is larger than about 1200px see images: Here is fine and the terminal is 1208px here it does not render correctly, the size is 1240px (my screen size is 1440p, so 2560px horizontally ) Let me know if you need some other tests

[CaselIT]

Also resizing the window horizontally causes multiple times randomly problems In the output below is should be as in the images in the previous post

[Tyriar]

Do you see the problem only after resizing? Maybe related to https://github.com/Microsoft/vscode/issues/8336

[CaselIT]

The one in the last image yes. The other problems are always there if the terminal is larger than about 1200px. (I don't know if the measure is connected to the screen resolution)

[CaselIT]

I've tried on my other pc, that has a screen of 1600x900px and the behavior is the same, above about 1200px the terminal has problems.

[CaselIT]

I've updated on v1.9.1 and the issue is still there.

[warpdesign]

Update: I'm still having the problem with latest VSCode insider (2017-02-10T07:10:40.518Z) & latest Windows 10 insider build (15031).

[asvetliakov]

Actually the terminal is unusable for me:

[fess932]

Actually the terminal is unusable for me too:

[CaselIT]

@fess932 @asvetliakov are you both using win 10 preview like me and @warpdesign ?

[fess932]

@CaselIT Yes. This problem is only in win 10 preview?

[CaselIT]

It appears to be from the people on this issue. Also I've tries using same vscode version and the same terminal command and on the preview I have the problem while on the normal win10 version I have not.

[warpdesign]

@CaselIT @fess932 I am using win 10 preview too.

Note that with cmd.exe there are no such problems.

[CaselIT]

Note that with cmd.exe there are no such problems.

Sadly I have them also using cmd.

[warpdesign]

@Tyriar What's the status of this bug? Do you need more information?

It really makes the terminal difficult to use since most commands will break the output like this.

It seems to happen only in insider builds but the final "Creators Update" update is supposed to be released in a few weeks only.

[Tyriar]

@warpdesign I haven't been able to repro, if it's related to Insiders then that's the reason.

@miniksa @bitcrazed any idea what this could be related to? It only appears to happen on Window Insiders.

[bitcrazed]

@Tyriar This also appears to repro in 14393 as per @CaselIT's report above.

Struggling to repro here.

Can someone pipe command output into a file that can be echoed locally to repro? Or perhaps provide a minimalist repro?

[CaselIT]

@bitcrazed I've just tried on win10 15042 and it still has the problem.

Regarding how to reproduce the mocha output always breaks it for me, so it should be sufficient to write some fake tests. If you can't reproduce it, I'll try to set up a repo to reproduce later or tomorrow

[CaselIT]

I've added a repo https://github.com/CaselIT/vscode-bug-19665

As mentioned before and also in the repo readme if the terminal windows is smaller than ~1200px everything works fine

[CaselIT]

Just tried vscode 1.10.1 and I have the same issue

[warpdesign]

@bitcrazed Here is an exemple file.

I ran sudo apt-get install <some non existing package> and this was enough to break the layout.

Here is the output of the command (doing cat test.txt is enough to break the layout here).

test.txt

I am using the latest insider build (15046) and the latest VSCode insider build.

[warpdesign]

Here is a screenshot of the problem, running cat test.txt on VSCode terminal and cmd.exe:

I confirm that depending on the VSCode window size the problem may not appear. With cmd.exe it always works as expected, no matter the size of the window.

[warpdesign]

More information: looking at the test.txt file, it seems the ellipsis utf8 character is encoded using 3 bytes (0xE280A6), see http://www.fileformat.info/info/unicode/char/2026/index.htm

And this may be the problem: pasting this character several times directly in the VSCode terminal is enough to trigger the problem.

Simply try to copy/paste this ……………………………… and you'll see the cursor gets shifted to the right.

Here is what the inspector shows after pasting this:

Maybe comparing it to what you get on non-insider Windows builds could help ?

[bitcrazed]

This definitely looks like something for @Tyriar & the VSCode team to take a look at.

[Tyriar]

Thanks for looking into it @bitcrazed :smiley:

[Tyriar]

I can repro, I found this only happens when the terminal really wide.

[Tyriar]

Here's a snapshot of what's send to xterm.js (looks like the problem is in node-pty):

Narrow:

Wide:

[Tyriar]

This was introduced in v1.9 where the big Windows improvements came in https://code.visualstudio.com/updates/v1_9#_integrated-terminal-improvements, this is probably an upstream issue.

[Tyriar]

It appears to happen when the terminal is sized to 160 characters wide or more. @rprichard I'm guessing this is related to winpty, does this number have any significance in winpty? I could restrict the size of the terminal to <= 159 characters but would prefer to fix the root cause if possible.

TLDR, this is happening when running certain things in the terminal:

https://github.com/Microsoft/vscode/issues/19665#issuecomment-285973782 shows what is sent from node-pty to xterm.js

[Tyriar]

Search of '160' in winpty: https://github.com/rprichard/winpty/search?utf8=%E2%9C%93&q=160

[Tyriar]

I capped terminal cols at 159 characters on Windows for the time being https://github.com/Microsoft/vscode/commit/4709fcaf35acc19fe321885f24e224da5a078e24, you should get this workaround in the next Insiders build.

[rprichard]

@Tyriar winpty has to change the console font's size to allow for terminals that are especially narrow or wide, because Windows doesn't allow windows narrower than about 140px (assuming ordinary DPI), and it also doesn't allow console windows wider than the display the (hidden) window is on.

Resizing from 159 columns to 160, with a non-CJK code page, I think winpty switches from a size 3x5 Lucida Console font to a size 2x4 font.

I suppose I'll have to reproduce this issue to see what's happening.

[rprichard]

I tried to reproduce the issue by running npm start (after npm install) in the bug repository above, and it worked fine. I also tried catting the test.txt file with WSL bash and Cygwin, and that worked too. I used a VSCode terminal of varying widths above 160 columns.

Maybe the DPI of the monitor is relevant? I only have ordinary DPI displays available, but maybe I can configure a VM somehow.

The winpty-debugserver.exe output might be helpful. (See the https://www.github.com/rprichard/winpty repo for details.)

[Tyriar]

Hmm, I only have a standard dpi monitor too, were you using the default powershell?

[rprichard]

Yes, I'm using the PowerShell default. I was using Win10 v14393, though. Maybe I need a newer version of Windows? I see a v15014 on modern.ie that I could try.

[Tyriar]

@rprichard I was testing on the creator's update too (Windows Insiders).

@bitcrazed I notice the issue you called out above actually says it was tested on 15019 not 14393. So it may be related to Windows Insiders. I did discover that it only happens when the terminal is 160 or more characters in width.

[bitcrazed]

@Tyriar - Apologies, you're right - I mis-read the report.

[Tyriar]

No worries :smiley:

[CaselIT]

@rprichard Yes, it appears to only be broken on windows 10 insiders. I also do not have any problem with the normal version of win10.

[Tyriar]

Sometimes the width may not matter though? https://github.com/Microsoft/vscode/issues/22572

[Tyriar]

Can anyone verify that the workaround that caps the terminal width fixes the issue in the latest Insiders?

[sgtoj]

@Tyriar I cannot confirm if it did fix it, yet. I will confirm that I have this issue on Windows Insider builds. Currently, using 15048 at home and 15055 at work.