Large wavy underline after update

[gbatagian]

Hello vscode-spell-checker,

Congrats on your amazing extension!

I have an issue after updating to the latest version, the wavy underline highlighting for spelling mistakes has become significantly larger than before. It’s a bit more distracting than the previous style, which had a more subtle, less intrusive wave.

E.g. now:

Previous style example:

Is there a way to revert to the previous, smaller wave style?

I’m using:

Code Spell Checker Version: 4.0.19 System: Ubuntu 24.04.1 LTS

Thanks for your time, and keep up with the good work!

[Jason3S]

I guess it varies from OS to OS:

Please try changing cSpell.textDecorationThickness. The default is auto, maybe from-font is better.

If you find a good value, please let me know.

[gbatagian]

Thank you for pointing me to the Appearance settings of the extension - I wasn't aware of these options. While cSpell.textDecorationThickness did not resolve the larger waves issue with any value that I tried, I found an affective workaround through the cSpell.textDecorationStyle parameter. By setting it to:

"cSpell.textDecorationStyle": "dotted",

the highlighting is much less distracting for my environment. I appreciate the help!

[geekley]

Interesting. I have the same issue on Kubuntu (Codium snap). Thickness really controls only the stroke thickness, not the wave amplitude.

Using the dev tools inspector to understand why it's different, turns out VSCode diagnostics squiggles are not done via wavy underline CSS decorations, but through a background SVG image CSS (presumably a dynamically generated one).

To see it, you have to inspect the line with e.g. a warning squiggle. But instead of looking at div.view-lines, go to the equivalent line in div.view-overlays. In there, I see a div class="squiggly-warning", with this CSS:

.monaco-editor .squiggly-warning {
  background: url(data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23cca700'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E
    ) repeat-x bottom left;
}

The data URL SVG is a yellow ~ image (on my machine). So I guess VSCode dynamically generates a ~ image using the color theme and font size, and sets it as a repeated background image so it shows like ~~~~~~.

Sadly, that means an extension is probably unable to replicate this (I don't think it can set a CSS class to decorations?), unless there's some workaround involving font-size maybe?

I think it would be best to just set the default value to either dotted or dashed, to avoid this issue.

[geekley]

It might be valid to also report this upstream as a VSCode bug. The fact they used this SVG solution could mean they had to use a workaround (Ubuntu-specific?) for this exact issue. If so, maybe they should apply such workaround to extension decorations as well?

[Jason3S]

@geekley,

It is probably an issue they saw with Electron rendering and they went with the .svg approach because it was more predictable.

It is possible to go back to the old behavior by setting cSpell.useCustomDecorations to false.

[Jason3S]

I might set the default of cSpell.useCustomDecorations to false. Since this issue has created a bunch of issues.