Use vawy line instead of background decoration?

[krassowski]

Vawy lines are the default way of highlighting errors in modern text editors. This extension however, uses the vim-like background styling (which is also nice), but might not be intuitive for some users; I find it a little bit distracting and would prefer the red vawy line instead.

I managed to get vawy lines by modifying the styles.css:

.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-tag):not(.cm-word) {
     text-decoration-line: underline;
     text-decoration-style: wavy;
     text-decoration-color: red;
     /* For Chrome */
     text-decoration-skip-ink: none;
}

A more browser-independent version could use background images, but the above one is probably more light-weight and performant. Currently the text-decoration styling is supported for 75-89% of users globally (thouh the figure should be higher for people who work with Jupyter as I expect such users to be aware of risks of using outdated browsers).

If I open a PR, would you consider merging it, or are there reasons for keeping the current red background instead?

[ijmbarr]

Hi @krassowski

The only reason I can think of (other than no one has asked yet) is that it might interact badly with custom themes, like in #9 , but that's already an issue. A good compromise might be to make it easier for uses to change the style from the front end. I will have a think about the best way to do this.

[krassowski]

Just heads up that the proposed solution will cause some issues in Chrome, see: https://stackoverflow.com/questions/57559588/how-to-make-the-wavy-underline-extend-cover-all-the-characters-in-chrome

[stevenlis]

I think it might be better to increase the alpha of the background color a bit since it is a little bit hard to see while using the dark theme in jupyter lab

[krassowski]

For the text decoration styling the support is now at the level of 80.54% (unprefixed) and 93.21% (prefixed).

Re-themes - different colours can be set easily for different themes. For dark theme only, it suffices to use body[data-jp-theme-light='false'] .cm-spell-error selector

[krassowski]

Thinking about it, there could be a setting which would change a class which would be added to the CodeMirror editor. Then there would be a few options for the user to choose from: background (default), underline, wavy underline in the settings. This would make it easy to customize, and should not impact performance nor affect existing users in any way.

PS. As for today it's 81.37% (unprefixed) and 93.6% (prefixed).

[vnijs]

Just started using this excellent extension and also @krassowski's jupyterlab-lsp extension. Question: Where exactly does the styles.css file live? I don't see it in this repo.

[krassowski]

It was renamed to style/index.css I think.

[vnijs]

Thanks @krassowski. Just tried your CSS suggestion and it looks great on a dark background!

[meshlogic]

I managed to get vawy lines by modifying the styles.css:

It was renamed to style/index.css I think.

Please, where is the file styles.css or index.css located? I can't find it anywhere in my home folders like .jupyter. I just found some Theme Settings in JupyerLab like this, but can't get this working to change the spell check color.

// Theme CSS Overrides
// Override theme CSS variables by setting key-value pairs here
"overrides": {
    "code-font-size": "12px",
    "content-font-size1": "12px",
    "content-font-family": "DejaVu Serif",
},

I like to use the Solarized Dark theme for JupyterLab, but the spell checking background is almost invisible there.

[krassowski]

See: https://github.com/ijmbarr/jupyterlab_spellchecker/pull/45