Gaps between plain text cell output lines in Chromium

[mgeier]

Description

There is too much distance between lines in Chromium, in Firefox it's OK.

Reproduce

Example code to reproduce:

text = ' XYZ '
formatstring = '\x1b[{}m' + text + '\x1b[m'

print(' ' * 6 + ' ' * len(text) +
      ''.join('{:^{}}'.format(bg, len(text)) for bg in range(40, 48)))
for fg in range(30, 38):
    for bold in False, True:
        fg_code = ('1;' if bold else '') + str(fg)
        print(' {:>4} '.format(fg_code) + formatstring.format(fg_code) +
              ''.join(formatstring.format(fg_code + ';' + str(bg))
                      for bg in range(40, 48)))

On Chromium, the result looks like this:

There are ugly gaps between the lines.

Example notebook: https://github.com/spatialaudio/nbsphinx/blob/master/doc/code-cells.ipynb

Expected behavior

On Firefox, it looks like this:

Context

• Operating System and version: Linux (Debian Testing)
• Browser and version: Chromium Version 79.0.3945.79
• JupyterLab version: 9d2e616

[telamonian]

For me (OS X 10.14), your example code has the same appearance in Chrome and Firefox, and shows whitespace between the lines.

That being said, this is all a problem of CSS. The fundamental issue is that the font-size and the line-height are different on purpose, in order to give a bit of space between the lines. The standard practice (which we follow) is that line-height is roughly ~1.2 times the font-size.

I don't think there's a perfect solution, but the issue can probably be reasonably fixed. All of the relevant CSS is in the rendermime package:

jupyterlab/packages/rendermime/style/base.css

Lines 53 to 76 in 95671a0

	.jp-RenderedText pre .ansi-black-bg {
	background-color: #3e424d;
	}
	.jp-RenderedText pre .ansi-red-bg {
	background-color: #e75c58;
	}
	.jp-RenderedText pre .ansi-green-bg {
	background-color: #00a250;
	}
	.jp-RenderedText pre .ansi-yellow-bg {
	background-color: #ddb62b;
	}
	.jp-RenderedText pre .ansi-blue-bg {
	background-color: #208ffb;
	}
	.jp-RenderedText pre .ansi-magenta-bg {
	background-color: #d160c4;
	}
	.jp-RenderedText pre .ansi-cyan-bg {
	background-color: #60c6c8;
	}
	.jp-RenderedText pre .ansi-white-bg {
	background-color: #c5c1b4;
	}

One possibility (which I just briefly tested out) is to give the colored spans a top and bottom border, like so:

.jp-RenderedText pre .ansi-green-bg {
  background-color: #00a250;
  border-top: .15em solid #00a250;
  border-bottom: .15em solid #00a250;
}

You'd have to set this up for all of the colors, and then test out various outputs in order to make sure that the fix for this specific issue doesn't screw up the appearance of any other cases.

Want to take a crack at a PR, @mgeier?

[mgeier]

For me (OS X 10.14), your example code has the same appearance in Chrome and Firefox, and shows whitespace between the lines.

How does it look for you in the Classic Notebook?

[telamonian]

The same, and for the same reason: line-height > font-size. What version of Firefox are you using?

[mgeier]

What version of Firefox are you using?

72.0.1 (64-bit)

One possibility (which I just briefly tested out) is to give the colored spans a top and bottom border

That sounds like an unnecessarily clunky and brittle work-around, there must be a better way!

This, for example, seems to have decent interline spacing, but it still works in Chromium:

https://nbsphinx.readthedocs.io/en/material-theme/code-cells.html#ANSI-Colors

[ggbhat]

Issue is due to the line height is being added for pre tag

tt, code, kbd, samp, pre {
    font-family: var(--jp-code-font-family);
    font-size: var(--jp-code-font-size);
    line-height: var(--jp-code-line-height);
}

Since pre preserves both spaces and line breaks we can set line height to normal.

 .jp-RenderedText pre,
.jp-RenderedJavaScript pre,
.jp-RenderedHTMLCommon pre {
  color: var(--jp-content-font-color1);
  font-size: var(--jp-code-font-size);
  border: none;
  margin: 0px;
  padding: 0px;
line-height:normal;
}

If you look at https://nbsphinx.readthedocs.io/en/material-theme/code-cells.html#ANSI-Colors also the line-height is set to normal.