Line Spacing Issues

[uudruid74]

There are some odd line spacing issues. The line spacing is set at 21px in the demo, but this makes spaces between the lines. Setting it to 18px will get rid of the spaces, but now mouse coordinates are all off since they are based on the 21px line height. Worse, some apps (like htop - see screenshot) display the status bar half-over the bottom of the terminal. I think these are related.

Details

• Chrome 53
• OS version: Antergos(Arch) Linux
• xterm.js version: git ... 2.2.3-99-gfc528f6

Here's HTOP hanging over the edge

Here is Midnight Commander looking awful (spaces between lines):

And the expected behavior of Midnight Commander (shown in shellinabox, colors set to linux terminal):

[uudruid74]

After pulling down some menu items, you'll notice that some lines get "out of sync" with the ones next to them and the statusbar line starts creeping lower on the screen, spilling over like the HTOP display. TMUX will eventually do the same and have a statusbar way below the actual terminal screen. The mouse support of xterm.js is a lot bettter than shellinabox though!

[Tyriar]

Which commit is this on? https://github.com/sourcelair/xterm.js/commits/master

[parisk]

@uudruid74 can you confirm if this happens on master?

[uudruid74]

ekl@Taro ~/Programming/xterm.js/demo (git)-[master] % git describe
0.31-615-gfc528f6

[Tyriar]

I can't repro these line spacing issues on Windows, Mac or Linux on the demo. Do you have any other CSS on the page that could affect this?

I also recommend checking on the latest master since your commit seems a little out of date.

[uudruid74]

This is just running the installed demo - no changes whatsoever. Linux Chrome 53 and running demo via localhost.

xterm@2.2.3 start /home/ekl/Programming/xterm.js
node demo/app

ekl@Taro ~/Programming/xterm.js (git)-[master] % git describe :(
0.31-670-g5bd8033

Still the same!

FIX: I changed the fonts being used by adding the following to the stylesheet.

font-family: "DejaVu Sans Mono", "Everson Mono", FreeMono, "Andale Mono", monospace;

It's the set I use with shell-in-a-box, so apparently courier is suspect on this system. I think on some systems, Courier looks monospace, but actually isn't.

[wayerr]

I found same issue, it appeared on debian linux in ff 52.0.1, but not exists in cromium 57.0.2987.98 on same os. See attached screenshot:

Browsers choose different fonts (it strange) and different line height .

[wayerr]

Explanation show that 'line' span-s (which act as background color) has height 16px

when must have 17px, it may be fixed by additional css:

.xterm-rows span {
    display: inline-block;
}

but i`m not sure that is right way.

[mofux]

I can reproduce the problem above, and @wayerr solution seems to work very well, as it does not change the height of the surrounding div. I guess the only problem with using inline-block vs inline would be the wrapping behaviour on text overflow, but that should actually never happen.