`show-whitespace` isn’t visually consistent on low-DPI displays #3985

This is a rendering/rounding issue. It’s because the dot SVG is rendered as text and then applied as a background image, so on low-resolution displays some shapes end up between pixels and appear blurry/lighter. The actual color is always the same everywhere.

A possible fix could be to use plain shapes in the SVG instead of text. If anyone has Illustrator, you can load the SVG in it and use “Convert text to outlines”

Is your zoom at 100%?

Is your zoom at 100%?

Yep, my zoom is at 100% in Chrome and I'm using monitors with 1080p resolution. It seems that when I have zoom set to 110%, the difference in color does no longer exist (or is too insignificant for me to notice):

I don't have Illustrator but I might look if there's something similar to this in Inkscape.

It’s because the dot SVG is rendered as text

This was incorrect, the SVG is already a plain path.

You might be able to still fix the issue by re-creating the SVG to use a simple circle (same size, fewer decimals)

<svg preserveAspectRatio="xMinYMid meet" viewBox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M4.5 11C4.5 10.1716 5.17157 9.5 6 9.5C6.82843 9.5 7.5 10.1716 7.5 11C7.5 11.8284 6.82843 12.5 6 12.5C5.17157 12.5 4.5 11.8284 4.5 11Z" fill="rgba(128, 128, 128, 50%)"/>
</svg>

Honestly I'm surprised it's so big, it's just a circle, the path should probably be <circle cy="12" cx="6" r="4"> or something. Testing and refinement needed. It should match the same size and position.

Hmm, I can't recollect why I chose to use <path> instead of <circle>.

But if I try to remember this one, it was Figma that does not support <circle> or other SVG tags, the only thing that Figma knows is <path> even for text, when you are exporting it as SVG.

Also I was using Inconsolata as reference for thing, using the same dot and tab character that VSCode was using. So the <path> you see there is indeed not a perfect circle.

This is just for space though, the tab character still has to stay a <path>.

---

It’s because the dot SVG is rendered as text

This was incorrect, the SVG is already a plain path.

It was originally text, until we changed that in #3292 to use background-image.

---

@jack1142 do you have any screenshots of this happening for the tab character on the same low resolution screen.

So the <path> you see there is indeed not a perfect circle.

This is why it is the way it is; However at this size it's irrelevant so it can be simplified

It’s because the dot SVG is rendered as text

This was incorrect, the SVG is already a plain path.

It was originally text, until we changed that in #3292 to use background-image.

Yeah, but it's not rendered as such in the browser because it has already been flattened/outlined into a <path>. In my first message I imagined this was happening because the SVG had <text>, but that's never been the case.

@jack1142 do you have any screenshots of this happening for the tab character on the same low resolution screen.

It doesn't seem to be very noticable, but I think arrow for fifth tab is a bit shorter on my display?

You don't really see Python projects with tabs used for indentation often, so if you want me to screenshot something else, with more tabs possibly, let me know.

// side note: saying 1080p is a "low resolution screen" sounds a bit fun to me, but I guess that it's not that big nowadays 😄

saying 1080p is a "low resolution screen" sounds a bit fun to me

Fixing the title 👇

The fix must ensure that:

• the background is displayed without being scaled, if possible, with its CSS size defined in px and matching the SVG attributes

I think that's about it. Rebuilding the SVGs with pixel-fitting in mind (as I had suggested a previous comment) could also be nice, but the fitting would be lost if the background is resized again.