multi-byte characters in labels take up twice as much space as in 'native' graphviz

[Nakilon]

Hello.
Looks like this repo is a fork. Is this bug fixed in it? sverweij/state-machine-cat#19
If so, how do I launch it similarly to http://viz-js.com/? Is there a Docker image or Dockerfile?

Original issue (link)

Steps taken

Render this digraph with viz.js (either version 1.8.x or 2.0.0)

digraph {
  node [shape=box]
  "Hello world" [label="Привет мир"]
}

... or this one that uses html style label formatting...:

digraph {
  rankdir=LR
  node [shape=plaintext]
  "Hello world" [label= < 
    <table border="1" cellborder="0">
      <tr><td>Привет мир</td></tr>
    </table>
  >]
}

Expected

This is the output from the 'native' graphviz dot (version 2.40.1) respectively:

Found

This is the viz.js output for both digraphs:

[aduh95]

Hey! I have forked the web app as well, you can find it at aduh95.github.io/viz.js-playground.
As you can see, the issue still exists in this fork unfortunately… I'll try to investigate it, but if anyone else knows what might be going on here, suggestions are welcome.

[aduh95]

After digging out, it seems to be related to a font issue, it's still unclear to me if that's easily fixable at the level of Viz.js.

Reference: https://gitlab.com/graphviz/graphviz/-/issues/1712

[Nakilon]

Graphviz relies on freetype, pango, or quartz to render text to estimate its size.

As I understand Graphviz uses one thing to estimate sizes and another thing to actually render. Seems like in that Gitlab issue it lacked some libs during compilation. You probably need to have it when you compile the thing for github.io

[aduh95]

Yes, although I don't know which libs, and at which step they are required. PR's welcome if anyone is able to get it working.

[christianvoigt]

Is this issue also related to measuring bold and italic text in html labels? See here for an example.

If not, I would open another issue.

I am pretty sure that there was once a version of Viz.js where this was not a problem. But on the current version of http://viz-js.com/ this is already occurring.

I tried to work around this by adding empty spaces between bold and non-bold text. But this does not work reliably.

[aduh95]

Well if it's not reproducible on native graphviz, it's probably the same issue – or rather, it's probably the same solution.

I think the way to move forward would be to build native graphviz removing external library one-by-one to identify which one is needed to solve the issue.

[sebbloc]

I made a workaround that works.
The principle is simple: since only the letters ascii work correctly, then I replace the texts in DOT by their equivalent of the same size.
I render and after I change to SVG with the original texts.
It's clearly heavy but it works.
Here is an illustraction:

You can play with there:
https://memodraw.com/?source=%D0%9C%D0%BB%D0%B5%D1%87%D0%BD%D1%8B%D0%B9_%D0%9F%D1%83%D1%82%D1%8C&sourceId=Q321&entry=ru.wdat&target=%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D1%8B%D0%B9&targetId=Q3142&margin=0.5
I am currently working to distribute a JS to you (my current version is not general enough)

[aduh95]

@sebbloc Thanks that looks promising :)

[sebbloc]

This is my fix there:
https://github.com/sebbloc/fixWebGraphvizAscii