search

mermaid-js / mermaid-cli

Command line tool for the Mermaid library
MIT License
2.53k stars 243 forks source link

Load all fonts before rendering #660

Closed remcohaszing closed 8 months ago

remcohaszing commented 8 months ago

:bookmark_tabs: Summary

Whether or not the used fonts have been loaded, affects the layout of the boxes that Mermaid renders. For consistent results, fonts must be loaded before the diagrams are rendered.

This was taken from mermaid-isomorphic. You may want to leverage that package instead.

Resolves #539

:straight_ruler: Design Decisions

This preloads all fonts in the document.

:clipboard: Tasks

Make sure you

MindaugasLaganeckas commented 8 months ago

Thank you! LGTM :)

remcohaszing commented 8 months ago

Another factor that causes similar issues is the use of a default font that’s not available everywhere. IIRC it’s helvetica? To solve that, mermaid-isomorphic defaults to arial,sans-serif.

I don’t know how much more work it would be to support Puppeteer in mermaid-isomorphic additionally, or if it’s actually worth it. I don’t like how often they make semver major releases.

aloisklink commented 8 months ago

helvetica

Close, it's "trebuchet ms", verdana, arial, sans-serif;. But even Arial is hard to get on Linux, on Debian/Ubuntu, you need to install ttf-mscorefonts-installer .

If I have time, I might make a PR to @mermaid-js to change the official font to something like arial,arimo,"Liberation Sans", since all of those fonts are supposed to have the exact same width/height, so they should look almost identical. And both Arimo/Liberation Sans are available under open-source licenses (they even come with OpenOffice/LibreOffice), so you can use an npm install @fontsource/arimo to add them to your site for every OS!

I don’t know how much more work it would be to support Puppeteer in mermaid-isomorphic additionally

Probably quite a bit from an infrastructure standpoint, unfortunately :(. There needs to be two different packages with different dependencies/peerDependencies.

I don’t like how often they make semver major releases.

I know what you mean. I can't wait until https://github.com/servo/servo (or another browser engine) is advanced enough that we no longer need puppeteer/playwright!

remcohaszing commented 8 months ago

The test fixtures for mermaid-isomorphic are generated on my Linux laptop and they match pixel perfect with the tests in CI. I don’t have ttf-mscorefonts-installer installed. The fixtures are only a few millipixels off from testing in Windows or macOS, and it’s similarly different between those OSes or other browsers. So I’m quite confident arial is safe to use for this. Depending on a third party font probably less so, as it requires the user to include that font in the place the resulting SVG is viewed.