Font metrics

[luiscastro193]

Apparently, Graphviz doesn't have access to font metrics other than Courier, Times, Helvetica, and Arial. Is there a way to fix this?

[GordonSmith]

If you had an example I could look at that would be very usefull.

FWIW I am building with the "fontconfig" library which should give it some additional font support, but for the metrics I think it would normally scan the HD for ttf fonts and read from them (which it can't do in a browser).

Have you tried setting the "fontnames" attribute for the graph?

fontnames : string, default: ""
Allows user control of how basic fontnames are represented in SVG output.

If fontnames is undefined or svg, the output will try to use known SVG fontnames.

For example, the default font Times-Roman will be mapped to the basic SVG font serif. This can be overridden by setting fontnames to ps or hd. In the former case, known PostScript font names such as Times-Roman will be used in the output. In the latter case, the fontconfig font conventions are used. Thus, Times-Roman would be treated as Nimbus Roman No9 L. These last two options are useful with SVG viewers that support these richer fontname spaces.

Valid for: Graphs. Note: svg only

https://graphviz.org/doc/info/attrs.html#d:fontnames

[GordonSmith]

This is also interesting: http://www.hep.caltech.edu/~piti/share/graphviz/doc/fontfaq.txt

Graphviz has historically supported some ``standard'' Postscript
fonts, initially, Times-Roman, Helvetica, Courier and Symbol.
This list was later enlarged by Adobe to include 35 fonts, which are:
	AvantGarde-Book AvantGarde-BookOblique AvantGarde-Demi
	AvantGarde-DemiOblique Bookman-Demi Bookman-DemiItalic
	Bookman-Light Bookman-LightItalic Courier Courier-Bold
	Courier-BoldOblique Courier-Oblique Helvetica
	Helvetica-Bold Helvetica-BoldOblique Helvetica-Narrow
	Helvetica-Narrow-Bold Helvetica-Narrow-BoldOblique
	Helvetica-Narrow-Oblique Helvetica-Oblique NewCenturySchlbk-Bold
	NewCenturySchlbk-BoldItalic NewCenturySchlbk-Italic
	NewCenturySchlbk-Roman Palatino-Bold Palatino-BoldItalic
	Palatino-Italic Palatino-Roman Symbol Times-Bold Times-BoldItalic
	Times-Italic Times-Roman ZapfChancery-MediumItalic ZapfDingbats

[luiscastro193]

for the metrics I think it would normally scan the HD for ttf fonts and read from them (which it can't do in a browser).

That's probably the issue. I am using 'Lexend Deca' with font size 11px, which luckily is close enough to 'Helvetica' with font-size 12px. Therefore, I use:

node [fontname = "Helvetica"];
node [fontsize = 12];

Then I use CSS to override that config in the svg. Still, it's very hacky and it's not a perfect fit. Would some "fontnames" value fix the issue?

[luiscastro193]

A basic demo for reference: https://luiscastro193.github.io/graph/

If the node is long enough, it starts overflowing.

[GordonSmith]

That demo page is empty - I added that font / size to: https://observablehq.com/@gordonsmith/church and it looks ok there?

[luiscastro193]

Yeah, you have to write something in the textarea. Helvetica is one of the few which look fine, that's why I am "using it". But then I change it to 'Lexend Deca' with CSS, which is the one I actually want to use.

I forked it here: https://observablehq.com/@luiscastro193/church

It can be rendered differently if you don't have Lexend Deca installed, but my previous demo imports it from Google Fonts, you can write a very long sentence there to test it (it works better since the hack I mentioned is enabled).

[GordonSmith]

Given the c++ Graphviz will try and load the nominated font at runtime and use it to calculate the actual sizes, I suspect we are out of luck.

Technically we could add some known TTFs to the wasm in a virtual file system, which would mean they would even work when producing Jpeg output, but suspect the added size would be unpalatable to most (not to mention the potential copyright issues...), now if we could coax the virtual filesystem to reuse the fonts from the web page that might be interesting (but I suspect I won't really get a chance to look at this any time soon).

[luiscastro193]

if we could coax the virtual filesystem to reuse the fonts from the web page that might be interesting (but I suspect I won't really get a chance to look at this any time soon).

Exactly, that would be awesome. Maybe through an API call to load the file into the virtual file system... I understand it is quite complex though but it was worth mentioning.

[danopia]

So, how feasible would it be to load a TTF file into the plugin, then? I'm testing this for a server role and I have the .ttf I want on disk, and it also seems reasonable to do in-browser if this was used in a proper web application that can be a bit heavier.

I'm using a narrow font (Archivo Narrow Regular) so that nodes can be sized smaller, to help make wide dot graphs more reasonable.

Packing a set of extra fonts into the WASM binary doesn't seem like the best solution to me for size reasons as already mentioned above.

Using fonts from the webpage (or more precisely, accepting a CanvasRenderingContext2D to call measureText() on) would be super cool for browser contexts but doesn't help a ton with server contexts.