Add `fontFamily` and `fontSize` to CodeEditor configuration. #4673

AlbertHilb · 2018-06-01T13:22:22Z

This PR intends to fix issue #4139.
I'm new to jupyterlab code, so the way I implemented this feature can be completely wrong.
If that is the case, feel free to move it to trash. 😊
Otherwise, I'll be happy to add any change you request.

Cheers

bollwyvl · 2018-06-01T16:48:14Z

This is very cool, and definitely answers #4139! I'm really excited about this, and have even started some of the stuff on the repo linked over on jupyterlab-fonts.

I'll do some more thorough review comments, and then swing back around with some more summary stuff...

bollwyvl · 2018-06-01T16:50:46Z

packages/codeeditor/src/editor.ts

@@ -602,6 +612,8 @@ namespace CodeEditor {
   */
  export
  let defaultConfig: IConfig = {
+    fontFamily: '\'Source Code Pro\', monospace',


I am -1 on moving this (and almost only this) to having a canonical value in the source code... perhaps leaving these as null such that the theme layer can carry it's preferred font, and these settings are really an end-user override.

bollwyvl · 2018-06-01T16:52:34Z

packages/codeeditor/src/editor.ts

@@ -602,6 +612,8 @@ namespace CodeEditor {
   */
  export
  let defaultConfig: IConfig = {
+    fontFamily: '\'Source Code Pro\', monospace',
+    fontSize: 13,


The other thing that contributes significantly to code readability is line-height... this has a variable, --jp-code-line-height, and is particularly fickle with respect to which font a user might pick.

bollwyvl · 2018-06-01T16:55:16Z

packages/codemirror/src/editor.ts

+      tabSize,
+      readOnly,
+      ...otherOptions
+    } = config;


Having to enumerate all of these seems like it will be easy to miss when something changes... perhaps explore going back to Partial...

I agree that this is easy to miss things if something changes. I don't think it's too bad though.

I thought it might be nice to annotate bareConfig as a CodeMirror.EditorConfiguration object so that the typescript compiler could catch some of that stuff. However, when I tried that I found that the CodeMirror typings were not quite up to snuff. That being the case, I think this is a fine solution.

bollwyvl · 2018-06-01T16:58:33Z

packages/codemirror/style/index.css

@@ -23,8 +23,6 @@

 .CodeMirror {
  line-height: var(--jp-code-line-height);
-  font-size: var(--jp-code-font-size);


as mentioned, leaving this managed by default by the theme would be nicer for theme implementers...

bollwyvl · 2018-06-01T19:44:23Z

packages/fileeditor-extension/schema/plugin.json

@@ -9,6 +9,12 @@
        "autoClosingBrackets": {
          "type": "boolean"
        },
+        "fontFamily": {


permitting this to be null and handling that explicitly, with some doc suggesting that it will delegate to the CSS theme if left blank might be more robust... just deleting the key might not be sufficient if the style is already set, for example.

bollwyvl · 2018-06-01T19:44:43Z

packages/fileeditor-extension/schema/plugin.json

@@ -39,6 +45,8 @@
      "$ref": "#/definitions/editorConfig",
      "default": {
        "autoClosingBrackets": true,
+        "fontFamily": "'Source Code Pro', monospace",


And here use default null...

AlbertHilb · 2018-06-08T12:48:50Z

Hi @bollwyvl,
thank you for reviewing my code.

I wiped out the CSS piece of code related to editor font properties because I'm not convinced font settings are just a matter of style for a text editor.
It seems I'm not the only one thinking so. 😊
Both Atom and VSCode don't put editor font properties in themes but store them in different config files (Atom: here, and VSCode: here and here).

Anyway, if we keep setting default editor font properties via stylesheets, then we have to make a choice, we should decide what values settingeditor has to show as default for them.
There are two possibilities:

null as you suggested or
actual values as established in the CSS code.

The latter one is my preferred solution. Trying to increase font size, for example, without knowing current size, it's like walking blindly.
However this is not achievable at moment, option default values in settingeditor are read from plugin.json static files. Should we change that, allowing to calculate them dynamically?

If we opt for the first solution, instead, we have to clearly explain to users why font properties are unset. This requires to add description fields to them.
Unfortunately, currently, settingeditor shows description field only for top level schema properties and they are not, they are nested in the editorConfig property.
So, should we give up showing description right above the associated property and move all of them in the top level editorConfig description?
Should we promote editorConfig children to top level properties removing editorConfig altogether?
Or should we modify the way property descriptions are handled by settingeditor?

Let me know your ideas.

bollwyvl · 2018-06-09T02:27:22Z

thank you for reviewing my code.

thanks for submitting it!

I'm not convinced font settings are just a matter of style for a text editor.

Agreed, and absolutely needs to be directly accessible to the user. In fact, I would like to see this PR take a stab at adding commands/menu items to modify these values so we can flush out some of the limitations, as "go hack some JSON" isn't going to jump out and show someone they have that kind of agency.

Both Atom and VSCode don't put editor font properties in themes

Jupyter frontends live in a weird place, as they aspire to not just be code editors, but show code in more contexts than standard editors, become the first place people will compute, and be more hackable than a traditional editor.

For giggles, one can already change the two values proposed thus far with, e.g. an IPython console:

%%html
<style>body {--jp-code-font-size: 48px; --jp-code-font-family: "Comic Sans"; }</style>

It will make all code basically unusable... but in a way that it is consistently unusable.

By keeping everything in CSS variables, these values are available to higher-order style concerns like vertical rhythm, coordinated character width and others... though it would be even better to yet more font metrics available for these purposes.

I look forward to the day when we have a letter-perfect, archival-grade, css-powered static representation from nbconvert without $LaTeX$. Whether the existing theme system is powerful enough to also power that remains to be seen, but I wouldn't want to start the precedent of "themes work for everything except..." and require some JS shim to achieve. Looking through the current code base, there are 23 instances of touching .style., of which most could probably be delegated to stylesheets, with the remainder being mouse-related positioning. Every time one of those is added, it increases the arms race between the ability to be themed vs coded, which leads to !important... which leads to violence, suffering, etc.

SHAME 🔔 Of course, over on jupyterlab-fonts, I'm directly going to some dark places with JSS, and not even generating intermediate CSS, but that's the nice thing about proof-of-concept extensions. :P

Should we change that, allowing to calculate them dynamically?

I think at the data layer (JSON, without comments), null is appropriate. I would ❤️ more dynamic declarative UI which could look around at things and interpret values. I would not like to see the settings schema system get more complicated/special and introduce interpreted javascript, templates, s-expressions, etc. as these things encode into JSON poorly, can't be schema validated, etc.

Trying to increase font size, for example, without knowing current size, it's like walking blindly.

Again, if you're hacking the scary-sounding Advanced Settings Editor, you're not particularly uninformed that the lights are off. I am thinking a suitable Increase Font Size command would accept a value parameter, which if left blank could go off and pull the default value off the DOM.

Set property default values to `null`. Use style from theme as default.

AlbertHilb · 2018-06-11T10:00:27Z

Hi @bollwyvl, please take a look at changes I made.

I think the only thing left over is deciding if we should add descriptions for the new properties in the settingeditor, and in such a case how to do so.

dhirschfeld · 2018-06-11T10:41:54Z

xref: #4648

Add `fontFamily`, `fontSize` and `lineHeight` configuration options to editors used in notebook cells.

AlbertHilb · 2018-06-14T10:20:57Z

I added some comment on use of new properties to editorConfig description and I enabled fontFamily, fontSize and lineHeightoptions also for editors used in notebook cells.

Cheers

ian-r-rose

Thanks for all the hard work @AlbertHilb (and thanks for the reviews @bollwyvl)! I think this is in really good shape. I had a couple of questions, but overall this is a great contribution, and I think we should move forwards with it.

@bollwyvl, anything to add about how the current implementation will interact with your experiments with juptyerlab-fonts?

ian-r-rose · 2018-06-27T19:28:49Z

packages/codemirror/src/editor.ts

@@ -981,7 +990,7 @@ namespace CodeMirrorEditor {
     * (it will default to be to the right of all other gutters).
     * These class names are the keys passed to setGutterMarker.
     */
-    gutters?: ReadonlyArray<string>;
+    gutters?: string[];


What is the reason for changing this?

Without that change I get:

../codemirror/src/editor.ts(1127,8): error TS2345: Argument of type '{ mode?: string | IMode; theme?: string; smartIndent?: boolean; electricChars?: boolean; keyMap?:...' is not assignable to parameter of type 'EditorConfiguration'. Types of property 'gutters' are incompatible. Type 'ReadonlyArray<string>' is not assignable to type 'string[]'. Property 'push' is missing in type 'ReadonlyArray<string>'.

Ah, I see. It's another example of the CodeMirror typings being slightly different from ours. I think this is fine, in that case. Thanks!

ian-r-rose · 2018-06-27T20:19:37Z

packages/codemirror/src/editor.ts

+      tabSize,
+      readOnly,
+      ...otherOptions
+    } = config;


I agree that this is easy to miss things if something changes. I don't think it's too bad though.

I thought it might be nice to annotate bareConfig as a CodeMirror.EditorConfiguration object so that the typescript compiler could catch some of that stuff. However, when I tried that I found that the CodeMirror typings were not quite up to snuff. That being the case, I think this is a fine solution.

ian-r-rose · 2018-06-27T20:20:27Z

packages/fileeditor-extension/schema/plugin.json

+        "fontSize": {
+          "type": ["integer", "null"],
+          "minimum": 1,
+          "maximum": 100


Is there any particular reason you chose this maximum number?

I think an upper limit to fontSize helps catching typos early.
But no, there is no particular reason to choose 100, except for being a round number, the same chosen by Atom editor and big enough to be confident no one wants larger fonts.

ian-r-rose · 2018-06-28T15:08:36Z

Thanks @AlbertHilb, I think this is great. It would be nice to have some sort of UI to increase and decrease the font size for the file editor, but I think we can do that in a follow-up.

Add fontFamily and fontSize to CodeEditor configuration.

b32d6de

bollwyvl reviewed Jun 1, 2018

View reviewed changes

Add lineHeight to the properties users can override.

27254c1

Set property default values to `null`. Use style from theme as default.

matanox mentioned this pull request Jun 14, 2018

Uninstallation deathbeds/jupyterlab-fonts#3

Closed

Add some comment on use of new properies to editorConfig description.

149e97e

Add `fontFamily`, `fontSize` and `lineHeight` configuration options to editors used in notebook cells.

jasongrout added this to the Beta 3 milestone Jun 27, 2018

ian-r-rose reviewed Jun 27, 2018

View reviewed changes

ian-r-rose merged commit 05a2089 into jupyterlab:master Jun 28, 2018

AlbertHilb deleted the FontSetting branch June 28, 2018 15:22

ian-r-rose mentioned this pull request Jun 28, 2018

Add setting to increase editor font size #4139

Closed

dhirschfeld mentioned this pull request Jun 28, 2018

Feature Request: Ability to configure fonts in the settings #4648

Closed

AlbertHilb mentioned this pull request Jun 29, 2018

Add command to change fileeditor font size. #4811

Merged

ian-r-rose mentioned this pull request Jul 20, 2018

Changelog for 0.33 #4622

Closed

blink1073 mentioned this pull request Sep 11, 2018

Jupyterlab text rendering in notebooks #3899

Closed

lock bot added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Aug 8, 2019

lock bot locked as resolved and limited conversation to collaborators Aug 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `fontFamily` and `fontSize` to CodeEditor configuration. #4673

Add `fontFamily` and `fontSize` to CodeEditor configuration. #4673

AlbertHilb commented Jun 1, 2018

bollwyvl commented Jun 1, 2018

bollwyvl Jun 1, 2018

bollwyvl Jun 1, 2018

bollwyvl Jun 1, 2018

ian-r-rose Jun 27, 2018

bollwyvl Jun 1, 2018

bollwyvl Jun 1, 2018

bollwyvl Jun 1, 2018

AlbertHilb commented Jun 8, 2018

bollwyvl commented Jun 9, 2018

AlbertHilb commented Jun 11, 2018

dhirschfeld commented Jun 11, 2018

AlbertHilb commented Jun 14, 2018

ian-r-rose left a comment

ian-r-rose Jun 27, 2018

AlbertHilb Jun 28, 2018

ian-r-rose Jun 28, 2018

ian-r-rose Jun 27, 2018

ian-r-rose Jun 27, 2018

AlbertHilb Jun 28, 2018

ian-r-rose commented Jun 28, 2018

Add fontFamily and fontSize to CodeEditor configuration. #4673

Add fontFamily and fontSize to CodeEditor configuration. #4673

Conversation

AlbertHilb commented Jun 1, 2018

bollwyvl commented Jun 1, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AlbertHilb commented Jun 8, 2018

bollwyvl commented Jun 9, 2018

AlbertHilb commented Jun 11, 2018

dhirschfeld commented Jun 11, 2018

AlbertHilb commented Jun 14, 2018

ian-r-rose left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ian-r-rose commented Jun 28, 2018

Add `fontFamily` and `fontSize` to CodeEditor configuration. #4673

Add `fontFamily` and `fontSize` to CodeEditor configuration. #4673