Rendering issue with nomnoml

[arisolt]

The following code renders correctly on https://www.nomnoml.com/, but not on kroki, so I assume this is a kroki specific issue.

#font: iA Writer Duo V
[construct|abstraction of higher degree] <- [abstraction]

[ggrossetie]

This is a font discrepancy issue, similar to #1345
nomnoml.com runs in your browser using fonts available on your system. When you are using Nomnoml server-side it will use fonts available on the server (where "iA Writer Duo V" is not available).

On my system the same definition renders as:

The root cause is that <text> elements in SVG are rendered client-side (using fonts available on your system) whereas Nomnoml computes box sizes using fonts available server-side.

The only workaround is to convert <text> to <path> (for instance using https://github.com/shrhdk/text-to-svg) but this change must be done upstream.

[arisolt]

Nomnoml computes box sizes using fonts available server-side.

I am getting the same outcome on https://kroki.io/, which continues to work (i.e editing the definition updates the rendering preview accordingly) even after blocking Internet access to the browser via firewall. This suggests that kroki.io computes everything client-side, with the rendering issue persisting.

I also identified a second rendering issue for the following definition. The #edges directive appears to be ignored on kroki.io, while on nomnoml.com it works as expected. I'm not sure if the two issues are related. Perhaps nomnoml might be using a different version of the library which added support for the edges directive + enhanced support for local fonts?

#edges: rounded
#spacing: 50

[a] -> [b]
[a] -> [c]
[a] -> [d]
[a] -> [e]
[a] -> [f]

[ggrossetie]

I am getting the same outcome on kroki.io, which continues to work (i.e editing the definition updates the rendering preview accordingly) even after blocking Internet access to the browser via firewall. This suggests that kroki.io computes everything client-side, with the rendering issue persisting.

Images are cached by your browser.
kroki.io does not compute anything client-side.

You can see the same effect on nomnoml.com when the SVG is generated server-side: https://nomnoml.com/image.svg?source=%23font%3A%20iA%20Writer%20Duo%20V%0A%5Bconstruct%7Cabstraction%20of%20higher%20degree%5D%20%3C-%20%5Babstraction%5D

I also identified a second rendering issue for the following definition. The #edges directive appears to be ignored on kroki.io, while on nomnoml.com it works as expected. I'm not sure if the two issues are related. Perhaps nomnoml might be using a different version of the library which added support for the edges directive + enhanced support for local fonts?

Probably, we are currently using version 1.5.1. The latest version is 1.5.2

[ggrossetie]

I also identified a second rendering issue for the following definition. The #edges directive appears to be ignored on kroki.io, while on nomnoml.com it works as expected. I'm not sure if the two issues are related. Perhaps nomnoml might be using a different version of the library which added support for the edges directive + enhanced support for local fonts?

I take it back, it seems that this feature is only supported client-side. See: https://nomnoml.com/image.svg?source=%23edges%3A%20rounded%0A%23spacing%3A%2050%0A%0A%5Ba%5D%20-%3E%20%5Bb%5D%0A%5Ba%5D%20-%3E%20%5Bc%5D%0A%5Ba%5D%20-%3E%20%5Bd%5D%0A%5Ba%5D%20-%3E%20%5Be%5D%0A%5Ba%5D%20-%3E%20%5Bf%5D

[arisolt]

oh ok. will reach out to nomnoml then and see why the inconsistency between client/server-side rendering. thanks for looking into it!