Graphviz Feature "HTML Like Tables" on Ubuntu 22.04 and Android

[ThomasJez]

The Graphviz feature "HTML Like Tables" doesn't work correctly with the preinstalled version of Firefox (the snap version) of the actual LTS (22.04) of Ubuntu. For boxes with text, the text is too large and partly misplaced outside the boxes (scrrenshot).

To reproduce, take a fresh install of Ubuntu 22.04 (or boot it from an installation media), go to https://observablehq.com/@gordonsmith/graphviz and scroll down to "HTML Like Tables".

The problem doesn't occur with the tarball version, the repo-version (ppa:mozillateam/ppa) or the flatpack version of Firefox and I coudn't find any other browser on Windows or Ubuntu where this problem occurs.

But I also tested it on two Android phones (Nexus 5X Android 8.1 with Firefox and Chrome and Mi A3 with Opera and Chrome) and on Pixel 5 API 30 emulator of Android Studio with Webview Browser Tester, there this problem also occurs (with all tested browsers).

[peterdd]

Sounds like the table cell width calculation uses another font/font-size then what the browser uses for displaying text.

[GordonSmith]

@ThomasJez could you grab the generated SVG from the broken Firefox and a working one and compare?

My assumption is that the SVG will be identical, which probably means that the issue may be with the browsers default "Times,Serif" font used when rendering the SVG?

[GordonSmith]

Also how does it look if you change the Default Font to Arial?

digraph structs {
    node [shape=plaintext fontname="Arial"]
    struct1 [label=<
...

[ThomasJez]

The SVG are identical and adding 'fontname="Arial"' fixes the error. (I have tested it in Chrome on Android too and there it works too.)

[ThomasJez]

Additionally I have generated a SVG from the dot from https://observablehq.com/@gordonsmith/graphviz (without the added font specification) with the dot app from the graphviz.

This uses the Times, serif font but works nonetheless in all browsers. The point positions and other numbers are diffent from the hpcc generated SVG.

Graphviz-original generated:

hpcc generated:

[ThomasJez]

But anyway, specifying the font solves the problem for me and making this hint part of the documentation probably solves it for everybody.

[GordonSmith]

Finally if you press F12 and select some overflowing text in a "broken" browser, what font is it using on the CSS Computed page?

Note: The command line dot program has the ability to check local folders for fonts and use the actual font info to calc the sizes, the wasm version can only do this for a handful of fonts that are included at build time...

[ThomasJez]

As there are a lot of font parameters I am just posting the screenshot:

[borango]

For your information: I have seen similar problems with too-large text an different browsers (or other user agents that can display SVG), just with using the dot binary (not even the Javascript ports). My findings were always that user agents take a lot of liberty in interpreting fonts. The root problem is: setting a font by name, style and size is not deterministic. There are variations at runtime. The case here does not seem to be caused by hpcc-wasm.