Independent font setting for notebook output

[DonJayamanne]

@chungmoklee commented on Wed May 05 2021

As far as know, there is no separate setting for notebook output font setting now.
(Correct me if I am mistaken about this)
I often want to reduce the font size and line space in the notebook output so that condensed information can be displayed.

Thanks in advance!

---

@DonJayamanne commented on Thu May 06 2021

Thanks for filing this issue, I don't think we have plans on supporting this at our end.
With the new Native Notebooks VS Code owns the output and the font settings.
Transferring issue to VS Code.

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• When I changed the font size of the editor, the font of the Output window was also changed, which is not good, but I also can't find a configuration to change the font of the Output window (#118411)
• Native Notebooks - Editor + Output font size do not match (Add setting to change output font size) (#119214)

[IanMatthewHuff]

Something to mention related here. Non-monospaced fonts can look really bad in dataframe output in particular. microsoft/vscode-jupyter#6546

[Dr-Irv]

Another issue is that the line spacing is inconsistent in code and the notebook output and the terminal. See this example:

[bicycle1885]

Also, the font of Notebook output seems to be inconsistent on my platform: the font of the output (middle) is different from that of editor (top) and terminal (bottom):

I took this screenshot on VS Code 1.59 for Linux. No font settings are applied.

[stevenlis]

Another issue is that the current font used in HTML (from Jupyter) does not display the same-length strings to have the same length in a dataframe.

[aldanor]

Starting from today, for whatever reason, in all of my vscode notebooks, the output is no longer rendered as monospace; rather, it's the default browser font (some sans):

I've triple-checked all of my user/workspace settings, and there's nothing related to this. What could have cause this and how does one change it back to monospace?..

(It makes it extremely hard to work with any notebooks)

[aldanor]

For anyone else affected, you can temporarily set styles in your notebooks sort of like so:

from IPython.core.display import HTML
HTML(r"""
<style>
    .output-plaintext, .output-stream, .output {
        font-family: Monaco, Menlo, monospace !important;
        line-height: 1.2 !important;
        font-size: 12px !important;
    }
</style>
""")

But this is an ugly hack, works for one notebook only, and I hope someone can answer what's the current story with notebook output fonts?

[JohnnyFoulds]

PLEASE change the font behaviour back to what it was in the previous version. And may I please ask the team to see if they can improve their QA procedures before releasing a new version as I instantly picked up this issue the second I had to re-open VS Code, so in my view, this is not acceptable. It might seem like a minor nuisance to some, but when you have been working for weeks on a series of notebooks and suddenly your work looks messed up for no logical reason at all, it becomes a major annoyance.

[aldanor]

PLEASE change the font behaviour back to what it was in the previous version.

Since it would need to be fixed anyway, the best way to go would be to move 2 steps forward and finally allow users to set notebook.output.fontSize and notebook.output.fontFamily (and for extra kicks, notebook.output.lineHeight).

IIUC, if it can be done via a triivial CSS hack, it should also be trivial to add it to the settings? (and keep the default font-family the same as the terminal font / editor font / whichever - most importantly, monospace)

[JohnnyFoulds]

Since it would need to be fixed anyway, the best way to go would be to move 2 steps forward and finally allow users to set notebook.output.fontSize and notebook.output.fontFamily (and for extra kicks, notebook.output.lineHeight).

IIUC, if it can be done via a triivial CSS hack, it should also be trivial to add it to the settings? (and keep the default font-family the same as the terminal font / editor font / whichever - most importantly, monospace)

You might be right, and I might just be confused, but I am not sure it is quite the same as the trivial hack. For example, compare the .show() output of a PySpark vs a Pandas DataFrame .head() in 1.64.2. The one needs monospace, the other doesn't use (or need) it. And then more subtle things, like if you show your spark session with simply spark there is a mix in the output of monospace for the warnings and then the specific formatting for the actual SparkContext display.

The trivial CSS hack just forces everything to monospace and equally makes it "ugly" but at least everything is aligned. Things were perfect (in my opinion) before, so for now I just went back to the old version, and if this font issue stays I guess I will be stuck on this version until some fancy new feature arrives I just have to have.

[aldanor]

You might be right, and I might just be confused, but I am not sure it is quite the same as the trivial hack. For example, compare the .show() output of a PySpark vs a Pandas DataFrame .head() in 1.64.2. The one needs monospace, the other doesn't use (or need) it. And then more subtle things, like if you show your spark session with simply spark there is a mix in the output of monospace for the warnings and then the specific formatting for the actual SparkContext display.

The trivial CSS hack just forces everything to monospace and equally makes it "ugly" but at least everything is aligned. Things were perfect (in my opinion) before, so for now I just went back to the old version, and if this font issue stays I guess I will be stuck on this version until some fancy new feature arrives I just have to have.

There's separate CSS classes, e.g. .output-stream or .output-plaintext, for when you print() stuff or for output results if it's not a rich-repr object - it's this part that should be configurable. Please let us configure fonts (and most importantly, font size! and maybe line-height) of output-stream and output-plaintext. It's not a cosmetic thing for stdout-heavy notebooks.

DataFrames and the like are more like overrides (their custom reprs output HTML, for dataframes it's .dataframe inside .output_container > .output) and should be formatted as they previously were - i.e. as long as .output is untouched, it should be all fine. You can try experimenting by removing .output in the css hack above and see what it does.

[stevenlis]

@aldanor Thanks for the hack. Is there any way to make the monospaced font sans-serif? I tried a couple of different fonts, but they are all serif.

[amunger]

verification steps:
create some output for a notebook or an interactive window
change the settings notebook: output line height, notebook: output font size, notebook: output font family and the corresponding fallback editor options and verify the output uses them