doc: CJS/ESM switch label is truncated

[mscdex]

Affected URL(s)

any

Description of the problem

The CJS/ESM switch label seems to be truncated. Specifically the lower part of the J in CJS is cut off, so it looks like CIS. It seems to be an issue with the SVG itself as it looks the same way when i open the SVG by itself and when I look at it in both Firefox and Chrome (on Linux).

[Trott]

@mscdex I'm not seeing this problem.

Is there anything unusual about your setup that might be a factor? Normally, I'd ask if it was browser-specific but you've already indicated that you're seeing this in Firefox and Chrome.

[mscdex]

Is there anything unusual about your setup that might be a factor?

No, just plain old Chrome and Firefox.

[mscdex]

I'm guessing it's related to the font being selected since the SVG is using "sans-serif" for the font (which in Chrome translates to "DejaVu Sans"). If I change it to something like "monospace" instead, then nothing gets cut off (although it looks a bit different obviously due to the change in font, which translates to "DejaVu Sans Mono").

[benjamingr]

Do you also see it if you open the SVG directly? https://nodejs.org/api/assets/js-flavor-cjs.svg

[mscdex]

@benjamingr the problem still exists when opening it directly, which is what I meant earlier. The text labels and the font family references are in the SVG itself.

I think the best solution that will work everywhere going forward is to convert the text to SVG paths, so that the letters are drawn the same, no matter what system fonts the browser is using.

[mscdex]

I took a quick stab at converting the letters to paths using the FreeSans font as the basis for the shapes:

I don't know what font the author of the original SVG used so it may not look 100% the same as that, but this looked reasonable to me. The SVG size is doubled, but that's not too bad I think and I've already run them through SVGO. If we serve up gzipped versions of the SVGs, then they should be about the same size as the current SVGs (~700 bytes).

Thoughts?

[benjamingr]

Thoughts?

LGTM

[aduh95]

I don't know what font the author of the original SVG used

That was me, and I didn't use any particular font, so FreeSans SGTM – to be honest I'm even surprised it took so long so someone to complain. Thanks for putting the effort.