Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gaps between plain text cell output lines in Chromium #7760

Closed
mgeier opened this issue Jan 9, 2020 · 5 comments · Fixed by #9617
Closed

Gaps between plain text cell output lines in Chromium #7760

mgeier opened this issue Jan 9, 2020 · 5 comments · Fixed by #9617
Labels
enhancement good first issue pkg:rendermime status:resolved-locked tag:Design System CSS
Milestone

Comments

@mgeier
Copy link
Contributor

@mgeier mgeier commented Jan 9, 2020

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:

image

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:

image

Context

  • Operating System and version: Linux (Debian Testing)
  • Browser and version: Chromium Version 79.0.3945.79
  • JupyterLab version: 9d2e616
@telamonian
Copy link
Member

@telamonian telamonian commented Jan 10, 2020

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:

.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?

@telamonian telamonian added tag:Design System CSS good first issue pkg:rendermime enhancement labels Jan 10, 2020
@mgeier
Copy link
Contributor Author

@mgeier mgeier commented Jan 10, 2020

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
Copy link
Member

@telamonian telamonian commented Jan 10, 2020

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

@mgeier
Copy link
Contributor Author

@mgeier mgeier commented Jan 11, 2020

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
Copy link
Member

@ggbhat ggbhat commented Jan 28, 2020

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.

saulshanabrook added a commit that referenced this issue Mar 20, 2020
@saulshanabrook saulshanabrook added this to the 2.1 milestone Mar 20, 2020
@lock lock bot added the status:resolved-locked label Apr 25, 2020
@lock lock bot locked as resolved and limited conversation to collaborators Apr 25, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement good first issue pkg:rendermime status:resolved-locked tag:Design System CSS
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants