demo.svg looks wired in my environment

[acevif]

demo.svg(https://github.com/wader/fq/blob/master/doc/demo.svg) looks wired in my browser.

I think that the font specified in demo.svg (monospace) and the coordinate of SVG text elements don't match in my environment.

environment:

• macOS Ventura 13.3.1（22E261）
• Google Chrome 112.0.5615.137

[wader]

Thanks for reporting! yeah that does not look great :) the svg:s are generated using https://github.com/wader/ansisvg and it has a bunch of test cases so maybe we can find a simple case or a case that works better to understand more what is going on.

Generated svg output for test cases can be found at https://github.com/wader/ansisvg/tree/master/ansitosvg/testdata

Maybe try https://github.com/wader/ansisvg/blob/master/ansitosvg/testdata/fontname.ansi.svg (uses font "Monaco") and https://github.com/wader/ansisvg/blob/master/ansitosvg/testdata/oneline.ansi.svg

They look like this for me:

Any idea how i could reproduce myself? i'm running macOS and Chrome also so maybe i can add some localization profile etc?

[wader]

Hi again, did some tests. Think i can kind of reproduce the rendering by replacing font: ... style with font-family: sans-serif. So a guess is there are two issues, why is not a monospace font picked? and if no monospace is picked can we still "force" the width to be fixed?

Does monospace work on other websites for you? or just not in svg:s? any local browser settings that might affect this?

[acevif]

@wader, thank you for reviewing my issue!

I discovered that Chrome's default monospace font for Japanese is not actually monospace, which appears to be a bug in Chromium that has persisted for over a decade (see https://bugs.chromium.org/p/chromium/issues/detail?id=75585).

As a workaround, I've changed the monospace font setting to a true fixed-width font. However, I'm concerned that other users may also encounter rendering problems like this.

This is just an idea, but would it be possible to change the file format to PNG to avoid any potential rendering issues?

[wader]

@wader, thank you for reviewing my issue!

I discovered that Chrome's default monospace font for Japanese is not actually monospace, which appears to be a bug in Chromium that has persisted for over a decade (see https://bugs.chromium.org/p/chromium/issues/detail?id=75585).

Aha nice find, interesting!

As a workaround, I've changed the monospace font setting to a true fixed-width font. However, I'm concerned that other users may also encounter rendering problems like this.

Yeap will have to figure something out

This is just an idea, but would it be possible to change the file format to PNG to avoid any potential rendering issues?

That could be a workaround, the only real reason i use SVG at the moment is because i wanted to see if it could work and a little bit to get nice scaling :) but i probably want to try fix this in ansisvg either way.

Know if there any common non-broken monospace font names we could use? maybe can give it priority and fallback to font family monospace etc?

[acevif]

@wader "Osaka-mono" worked well for me!

I also tested "Courier New" and "Monaco" in my environment, and they seem to work. However, please note that these fonts are not specifically designed for Japanese language, so I would not recommend using them.

monospace:

Osaka-mono:

Courier New:

Monaco:

[wader]

Thanks for testing. When i use "monospace" the font "courier" seems to be select in my env ("courier new" is a tiny bit thiner). Does "courier" look ok for you? Thinking if "Courier, monospace" is a good compromise.

[acevif]

@wader "courier" also worked in my environment:

[wader]

Does this look ok https://github.com/wader/fq/blob/88be3a7f9fdc8fdeab3882d157724a978e7537f7/doc/demo.svg?

[wader]

btw had a look at other ANSI to SVG tools and use of courier is quite common, so let's try that

[acevif]

@wader It looks very beautiful!

[wader]

@acevif 🥳 thanks for researching and helping!

Fixed by #662