Wrong font used when rendering Pikchr diagrams

pbendersky commented 2 years ago

The following Pikchr diagram renders properly in https://kroki.io:

box "main"

However, the resulting URL renders with a different font (which appears to be a default serif, like Times New Roman or something):

https://kroki.io/pikchr/svg/eNpLyq9QUMpNzMxTAgATDwNT

Is there a chance the default font can be changed to match the one in Pikchr samples page? https://pikchr.org/home/doc/trunk/doc/examples.md

ggrossetie commented 2 years ago

The <text> element in the <svg> has no font declared;

<text x="122" y="56" text-anchor="middle" fill="rgb(0,0,0)" dominant-baseline="central">pikchr.y</text>

The font is inherited from the HTML document. On https://pikchr.org the font is defined on the <body> in https://pikchr.org/home/style.css

body {
  margin: 0 auto;
  background-color: white;
  font-family: sans-serif;
  font-size: 14pt;
     -moz-text-size-adjust: none;
      -mx-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

When using https://kroki.io/pikchr/svg/eNpLyq9QUMpNzMxTAgATDwNT the <svg> is not embed in an HTML document so the font is the default/built-in browser font "Times New Roman".

Not sure if it's possible to define the font-family using Pikchr syntax so you will probably need to provide your own style if/when the SVG is embed in an HTML page.

pbendersky commented 2 years ago

@Mogztter the problem is that when using Kroki, the image gets embedded externally (<img src="https://kroki.io/pikchr/svg/eNpLyq9QUMpNzMxTAgATDwNT">) so I can't change any CSS style from the "caller" site.

ggrossetie commented 2 years ago

the problem is that when using Kroki, the image gets embedded externally so I can't change any CSS style from the "caller" site.

Unfortunately, that's how things are working and, as far as I know, there's nothing we can do, you should open an issue upstream.

yuzutech / kroki

Wrong font used when rendering Pikchr diagrams #993