Repository navigation
doc: CJS/ESM switch label is truncated #41878
Description
Activity
Is there anything unusual about your setup that might be a factor?
No, just plain old Chrome and Firefox.
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").
Do you also see it if you open the SVG directly? https://nodejs.org/api/assets/js-flavor-cjs.svg
@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.
Reacted by Benjamin GruenbaumI 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?
Thoughts?
LGTM
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.
- added a commit that references this issue
on Feb 10, 2022 - added 2 commits that reference this issue
on Feb 21, 2022 - added a commit that references this issue
on Apr 21, 2022
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).