Terminal font height incorrect since last update

[chris-findlay]

Issue Type: Bug

Since the last VSCode update my terminal font is missing the bottom of its decenders, and altering line-height isn't helping - that just puts space between the lines.

The same font is still working fine in the editors.

VS Code version: Code 1.40.0 (86405ea, 2019-11-06T17:02:13.381Z)
OS version: Windows_NT x64 10.0.18362

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz (8 x 2494)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled metal: disabled_off multiple_raster_threads: enabled_on oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off surface_control: disabled_off surface_synchronization: enabled_on video_decode: enabled viz_display_compositor: enabled_on viz_hit_test_surface_layer: disabled_off webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	15.88GB (0.55GB free)
Process Argv
Screen Reader	no
VM	0%

Extensions (20)

Extension	Author (truncated)	Version
tt-processor	ais	0.8.0
vscode-apollo	apo	1.12.0
npm-intellisense	chr	1.3.0
vscode-postgres	cko	1.1.11
vscode-svgviewer	css	2.0.0
vscode-eslint	dba	1.9.1
gitlens	eam	10.1.2
EditorConfig	Edi	0.14.2
prettier-vscode	esb	2.3.0
terraform	mau	1.4.0
rainbow-csv	mec	1.3.1
vscode-docker	ms-	0.8.2
mssql	ms-	1.7.0
csharp	ms-	1.21.6
vscode-typescript-next	ms-	3.8.20191105
debugger-for-chrome	msj	4.12.1
vscode-versionlens	pfl	0.24.0
vscode-coverage-gutters	rya	2.4.2
vscode-todo-highlight	way	1.0.4
t4-support	zbe	0.4.3

Works fine in the editor:

But not in the terminal window:

[f-aa]

This happens to me as well. My terminal is illegible. VS Code v1.40 using the Proggy Square (Slashed Zero) font available here: https://proggyfonts.net/download/

Environment:
Version: 1.40.1 (user setup)
Commit: 8795a98
Date: 2019-11-13T16:49:35.976Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.17134

[marvinside]

Since last VS-Code update, the Powerline Arrow to the Right renders not tall enough.
It seems 2 Pixels to small.

Font Used in the Screenshot: Fira Mono for Powerline
Ialso tested with Fira Code and Roboto Mono for Powerline. The Roboto seems to be only one Pixel to small.

[adamsandwich]

environment

版本: 1.40.1 (user setup)
提交: 8795a98
日期: 2019-11-13T16:49:35.976Z
Electron: 6.1.2
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.18362

Same issue, my font Sarasa-Gothic, It seems that the font has been moved up a few pixels

[joelamltc]

I changed the terminal renderer type to dom, seems things going well but canvas is not correct.

Canvas:

DOM:

[f-aa]

Changing render type to DOM seems to have corrected the line height for me as well. The text is however slightly blurry compared to using canvas as a render type.

[chris-findlay]

Likewise for me - Canvas = crisp but wrong; Dom = bluryish but right. I'm stuck with Canvas so I don't get a headache, and guessing decenders since they aren't visible.

[chris-findlay]

Now I look at it tho, the editor is also similarly blury, so being able to use the crisper text output there too would be nice.

[Tyriar]

This appears to be an Electron/Chrome bug possibly related to recent changes in textBaseline (https://crbug.com/890515, https://crbug.com/607053). The following screenshots were produced on Windows 10 by running the xterm.js demo after installing Proggy Square (Slashed Zero) ttf and setting fontFamily in the demo to ProggySquareTTSZ.

Electron 6 (Chromium 76, taken in VS Code):

Chrome 78.0.3904.108:

Edge (Chromium) 80.0.328.4:

---

Electron 4 (Chromium 69, taken in VS Code):

Firefox Nightly 72.0a1:

Edge (Old) 44.19013.1.0:

[Tyriar]

Also happens on macOS:

Edge 80.0.320.3:

Firefox 70.0.1:

[Tyriar]

fillText and textBaseline are used here: https://github.com/xtermjs/xterm.js/blob/70babeacb62fe05264d64324ca1f4436997efa1b/src/browser/renderer/atlas/DynamicCharAtlas.ts#L254-L263

[Tyriar]

Reported upstream https://bugs.chromium.org/p/chromium/issues/detail?id=1026254

[chris-findlay]

I recommend we all go there and star it so it gets noticed more.

[Tyriar]

Minimal repro case:

<html>
<body>
<canvas width="200" height="200"></canvas>
<script>
const c = document.querySelector('canvas');
const ctx = c.getContext('2d');
// Draw a guide line at y where text is drawn
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(200, 100);
ctx.stroke();
// Draw the text
ctx.textBaseline = 'middle';
ctx.font = '30px Arial';
ctx.fillText('Works', 10, 100);
ctx.font = '30px ProggySquareTTSZ';
ctx.fillText('Doesn\'t work', 110, 100);
</script>
</body>
</html>

Chromium

Firefox

[chris-findlay]

Please post that to the upstream bug.

[Tyriar]

Already did

[tigerinus]

Yes, experimentalWebgl breaks the rendering.

[Tyriar]

Tentatively assigning to May for debt week if there's time to see if there's a workaround.

[Tyriar]

Moving the webgl part to #95813. The textBaseline middle broken thing (this issue) is blocked on Chromium, but they say the font metrics have problems?

[hems]

Same happening here, "y" is being cut, looks like an "u" :(

I tried adding "terminal.integrated.rendererType": "experimentalWebgl", but did not fix anything, is it supposed to fix that issue?

I'm using ProggyCleanTTSZ as font downloaded from https://proggyfonts.net/download/

[veleek]

I'm assuming this is the same thing that's causing my problem but adding details here as well.

VSCode Version: 1.50.1 (system setup)
OS: Windows_NT x64 10.0.20257

Extra height and some graphical artifacts on some of the powerline glyphs with the canvas renderer.

Slightly different behavior but same basic problem when using the dom renderer.

[hems]

Please have a look on this issue i created documenting how i finally fixed my font rendering problems on the terminal:

#107942 (comment)

[jefflundberg]

MacOS
VSCode 1.55.2
FiraCode Nerd Font
zsh with ohmyzsh powerlevel10k theme

auto (seems to switch between canvas and experimentalWebgl)

experimentalWebgl

dom

canvas 👈. this one looks good

[hologerry]

MacOS
VSCode 1.55.2
FiraCode Nerd Font
zsh with ohmyzsh powerlevel10k theme

auto (seems to switch between canvas and experimentalWebgl)

experimentalWebgl

dom

canvas 👈. this one looks good

On my machine, the icon is still been cropped.

[veleek]

canvas 👈. this one looks good

Even this one still isn't perfect. The height of the arrow glyphs is too short. They should be the same height as the glyphs in the dom example

[Livven]

This seems to have been fixed with 1.56 (or 1.55?) for me, using the webgl renderer on Windows.

See also #120129.

[Tyriar]

Yep vertical alignment was fixed up in that issue

/duplicate

[unkindypie]

still have this problem

[Tyriar]

@unkindypie do you set the terminal line height setting

[unkindypie]

@Tyriar "terminal.integrated.lineHeight": 1

[hologerry]

The apple icon from powerline10k theme in zsh is still not aligned, it is cutted on the left.

In the iTerm2 app, it looks good: