Text overflow

[no-gravity]

Sometimes the text overflows the bounding box. Example:

digraph {
  node  [shape = record];
  "thistextoverflowstheboundingbox"
}

Renders like this here:

PS: Thank you for fixing the last issue so quick. This is a very interesting project.

[mstefaniuk]

I cannot reproduce it. It works on any browser on macOS. I suppose it is a local font issue (SVG generated uses locally installed). Could you confirm if it recreates on http://mdaines.github.io/viz.js/ ?

[no-gravity]

I see the overflow in Firefox 50.1.0 on Linux. Chromium renders it correctly. On http://mdaines.github.io/viz.js/ both browsers render it correctly.

[mstefaniuk]

Could you attach PNG generated on the page (using top right button option Store PNG on disk) in both browsers? I want to verify if it is font size or font variant issue.

[no-gravity]

That does not work in Firefox. The event handler of the click on "#savePNGonDisk a" executes normally, but the img.onload function is never called. So no save dialog appears.

In Chromium, it works as expected.

[mstefaniuk]

I confirm it is not working on Firefox also on Windows. I have suspicion on that topic.

[mstefaniuk]

Site has been upgraded and generating PNG version should work now. Please attach comparable versions of problematic diagram.

[no-gravity]

Here we go:

Firefox:

Chromium:

[mstefaniuk]

Thanks, it looks as a matter of size not a font face.

[mstefaniuk]

I cannot reproduce that. I've checked on old FF (45) on SauceLabs. Could you also compare, using dom inspector, what size is attribute font size in both cases and what is actual calculated size?

[no-gravity]

SauceLabs does not have Linux support I guess? You can check on crossbrowsertesting.com. When chosing Ubuntu+Firefox, I get the textoverflow on crossbrowsertesting too.

The html is exactly the same in both browsers:

<div id="graph"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.2 45" height="45pt" width="212.2pt"><style type="text/css">.dashed {stroke-dasharray: 5,5} .dotted {stroke-dasharray: 1,5} .overlay {fill: none; pointer-events: all}</style><g><g transform="translate(4,41)scale(1,1)"><polygon stroke="#fffffe" stroke-opacity="0" fill="#ffffff" points="-4,4 -4,-45 212.2,-45 212.2,4"></polygon><g class="node" style="opacity: 1;"><title>thistextoverflowstheboundingbox</title><path stroke="#000000" fill="none" d="M 0,-0.5 L 0,-36.5,204.2,-36.5,204.2,-0.5 Z"></path><text font-family="'Times-Roman',serif" font-size="14" fill="#000000" text-anchor="middle" y="-14.3" x="102.1">thistextoverflowstheboundingbox</text></g></g></g></svg></div>

The above html is enough to reproduce the problem. It has overflow in FF and no overflow in Chromium. So further investigation should be possible with simple page rendering via browsershots.org or alike.

[mstefaniuk]

I'm not expecting huge differences in source itself but rather in actual calculated size. There is no unit attached and maybe Linux FF assumes different pixel size so different ratio is used.

Sauce has browsers on Linux but very old ones. What version of Ubuntu / FF you used on CBT to reproduce this issue?

[no-gravity]

Both browsers assign a computed size of 14px to the text.

I see the overflow on Ubuntu 15.04 / Firefox 44 at 1024x768 on CBT.

The font size changes a lot when changing the font family. For example with "arial" it easily fits into the bounding box. I also tried two web fonts (Open Sans and Roboto) and both cause the overflow to happen. To different degrees though.

[magjac]

I also get overflow when pasting the DOT source below to http://graphviz.it (Firefox 48.0 on Ubuntu 14.04.5 LTS).

Graphviz itself generates an ok PNG:

Saved PNG from graphviz.it:

DOT source:

sofia.txt

[mstefaniuk]

I've found some text differences between Graphviz versions. Current version used on the page is quite outdated so maybe it will fix it. Stay tuned.

[magjac]

It doesn't seem to be the text that is the problem. Attached is a screenshot from Firefox 48.0 on Ubuntu 14.04 LTS. The top graph is generated with graph-viz-d3-js and the bottom graph with dot - graphviz version 2.36.0 (20140111.2315). It shows that it is the box that is too small

[magjac]

It seems that the problem occurs already in the xdot. Attached are xdot outputs from two versions of graphviz and one from graph-viz-d3-js by logging the xdot at this line https://github.com/mstefaniuk/graph-viz-d3-js/blob/master/src/js/transformer.js#L6

tmp-graphviz-2.36.0-graph-viz-d3-js-bug.xdot.txt tmp-graphviz-2.38.0-graph-viz-d3-js-bug.xdot.txt graph-viz-d3-js-bug.xdot.txt

grep width .txt graph-viz-d3-js-bug.xdot.txt: width=2.4167]; tmp-graphviz-2.36.0-graph-viz-d3-js-bug.xdot.txt: width=2.7222]; tmp-graphviz-2.38.0-graph-viz-d3-js-bug.xdot.txt: width=2.7083]; grep height .txt graph-viz-d3-js-bug.xdot.txt: height=0.51389, tmp-graphviz-2.36.0-graph-viz-d3-js-bug.xdot.txt: height=0.51389, tmp-graphviz-2.38.0-graph-viz-d3-js-bug.xdot.txt: height=0.5,

graph-viz-d3-js uses viz.js version 1.5.1 which in turn uses graphviz 2.38.0 (same as one of the above).

This indicates that there seems to be something wrong with the width in viz.js version 1.5.1 or in the way it is used.

[mstefaniuk]

Xdot output is generated directly from viz.js but I assume it can depend on system installed fonts. Main issue is that it is hard to reproduce so hard to fix it on my machine. Maybe upgrading will help.

[magjac]

As I said, I don't think it's a problem with the text (font). It has the correct size. It's the text boxes that have a too small width.

Why is it hard to reproduce? Just paste bug.dot.txt into http://graphviz.it. The problem is present with Firefox and Chrome, both on Windows and on Ubuntu 14.04.

[magjac]

I upgraded to viz.js version 1.7.1. It didn't help.

I also tested to use viz.js directly in my project by calling Viz(dotSrc) and it didn't help either. I guess this means that graph-viz-d3-js is no longer a suspect and this issue is invalid.

I will open a new issue on viz.js.

[magjac]

Filed issue https://github.com/mdaines/viz.js/issues/81