search

openreferral / specification

The Human Services Data Specification - a data exchange format developed by the Open Referral Initiative
https://openreferral.org
Other
117 stars 49 forks source link

ERD Diagram - text overlaps the box #266

Closed odscjames closed 2 years ago

odscjames commented 2 years ago

On some computers, the ERD diagram appears like this:

overlapping

This is maybe because Graphhviz on the computer that builds it (so, in production this is a ReadTheDocs server) looks up the font that is set for the diagram and calculates the widths each box needs based on that.

But if the computer the viewer uses does not have that font, the web browser will use another font. And that font might have a different width & spacing, and thus the overlap happens.

For the ERD diagrams we use Helvetica. Ubuntu Linux does not have Helvetica.

If I rebuild the docs on my laptop explicitly telling the ERD drawing tool to use a font I have (DejaVu Serif) then view them on my laptop, it comes out fine.

The thing that is puzzling me is that as far as I can tell, ReadTheDocs servers don't have Helvetica installed either. So I'm not sure how it comes out ok for some viewers? Luck of what font it does pick?

Helvetica is the default choice of the tool we forked and hacked on, so I don't think it was a conscious choice. I think that means we should feel free to choose something else here.

odscjames commented 2 years ago

If you go to https://readthedocs.org/projects/openreferral/builds/14983508/ and open the last box you can see a list of the fonts that RTD do have on their build servers

odscjames commented 2 years ago

Think I've found a solution - the sphinx_rtd_theme includes and uses the Lato font. Clients can load it from the docs site, so all web browsers will have it. ReadTheDocs has it on it's build servers.

So if we use the lato font we should:

odscjames commented 2 years ago

Final part of this: http://docs.openreferral.org/en/latest/hsds/logical_model/

On all computers, clicking through to the full diagram works fine.

(This problem is because the Lato font is referenced as an external font in the SVG. This does not work with img tags - so doesn't work on the page - but does work when viewing the SVG directly)