Load all fonts before rendering

[remcohaszing]

📑 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

📏 Design Decisions

This preloads all fonts in the document.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted master branch

[MindaugasLaganeckas]

Thank you! LGTM :)

[aloisklink]

Amazing! That bug has been bugging me for a while :)

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

Unfortunately, I don't think that would be possible, since that library uses Playwright instead of Puppeteer.

Although, it would be cool if there was some way of making something like a @mermaid-js/mermaid-isomorphic-puppeteer library that shared all of the same code as the mermaid-isomorphic package, with the exception of playwright, but that might get pretty convoluted.

[remcohaszing]

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]

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]

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.