Initial Render with FontAwesome Icons overflows labels

[RickStrahl]

When rendering charts with wide FontAwesome icons, on initial render text that follows the icons often overflows the space allocated for the text resulting in truncated labels.

Breaking into the code and slightly delaying the render process has no effect. What appears to be happening is that Mermaid renders the labels without the icons (or the square placeholders) and then the icons get loaded afterwards essentially pushing the text out of the allocated render box. Delaying even for several seconds to ensure fontawesome has completely loaded seems to have no effect on this behavior.

• Content loads
• Mermaid renders and renders correctly without FontAwesome icons (fixed squares show)
• Then the icons pop in after and push the content out of its box

My first thought was that FA isn't yet loaded, but even delaying execution by several seconds did not fix this so it has to be something inside of Mermaid that happens with the FA font rendering.

Additionally, it looks like this only occurs on first render. If you reload charts dynamically in the page (ie. replacing or updating chant content without reloading the entire page) and then render again the icons and labels render correctly (see JsFiddle and steps below). It all feels like a timing issue of when the FA icons become available, not just to the page but within Mermaid.

Reproduce

I've put together a JsFiddle that basically does what MM does in a more simplified way:

https://jsfiddle.net/rstrahl/h7gL4b0m/14/

To see the problem in the fiddle:

• Load the page once (see cut off labels - FAIL)
• Make a change and save or re-run (labels not cut off - GOOD)
• Now refresh the browser
• Page re-loads completely (see cut of labels - FAIL)

No matter how long the timeout I put the font-awesome icons push the text out of the graphic label space.

The JsFiddle Change and save apparently doesn't reload the entire page, but just replaces the base content, so the Mermaid initialization script code doesn't run again which is similar to my application that is hosting Mermaid.

Re-rendering when nothing has changed in the document does not work. So if setTimeout(renderMermaid,10000); that doesn't actually refresh because it looks like Mermaid tracks what it has rendered already.

Platform: Windows

Update

This behavior can also be seen in the Mermaid Live Editor:

Sample on Mermaid Live Editor

Add a [fa:fa-reply-all label] into the chart and you can see the same behavior. it works upon initial editing (page is updated dynamically), but if you then reload the entire page with a Browser Refresh you see the truncated label as per image above.

[dougwaldron]

In case it helps, I'm seeing this behavior on Edge (chromium) but not Firefox.

[RickStrahl]

For me it fails in FireFox too:

[dougwaldron]

Ok, I'm seeing the same thing as you now. I must have triggered a redraw somehow without realizing it.

[Yoshanuikabundi]

I'm getting this too, but without FA, just with a change of font (and font size): https://openff-interchange--428.org.readthedocs.build/en/428/using/intro.html

Text is only cut off the first time the page is loaded; refreshing seems to fix the issue, and clearing the cache seems to bring it back.

Edit: Source: https://github.com/openforcefield/openff-interchange/blob/docs-rearrange/docs/using/intro.md

[dmoore247]

I'm also seeing the label overflow too with FontAwesome icons,
it's cutting off the 3 periods when the generated HTML is displayed.
Chrome browser. It's aways there.

[fireproofsocks]

I'm experiencing this too. Mermaid v9.1.4. Padding the labels with #nbsp; does not seem to help.

[sidharthv96]

Issue is also present in mermaid docs.

[dschrempf]

I can confirm this issue:

(The word is "Alignment")

[dschrempf]

I just saw that the mermaid-cli issue tracker is full of reated issues:

• mmdc truncate content when outputFormat is png mermaid-cli#463
• Using fontawesome (fa) icons clips text or icon from the end mermaid-cli#539