search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.49k stars 6.3k forks source link

Initial Render with FontAwesome Icons overflows labels #2651

Open RickStrahl opened 2 years ago

RickStrahl commented 2 years ago

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.

image

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.

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:

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:

image

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 commented 2 years ago

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

RickStrahl commented 2 years ago

For me it fails in FireFox too:

image

dougwaldron commented 2 years ago

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

Yoshanuikabundi commented 2 years ago

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 commented 2 years ago

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.

image
fireproofsocks commented 2 years ago

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

sidharthv96 commented 2 years ago
image

Issue is also present in mermaid docs.

dschrempf commented 1 year ago

I can confirm this issue: image (The word is "Alignment")

dschrempf commented 1 year ago

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

emanuel-quix commented 1 month ago

Do you guys have any workaround for this? I get the same issue, even with the version 10.9.1.

fireproofsocks commented 1 month ago

Do you guys have any workaround for this? I get the same issue, even with the version 10.9.1.

Unfortunately the only workaround I found was to pad extra characters around the labels, e.g. underscores or something because extra space characters seem to get clipped

emanuel-quix commented 1 month ago

Do you guys have any workaround for this? I get the same issue, even with the version 10.9.1.

Unfortunately the only workaround I found was to pad extra characters around the labels, e.g. underscores or something because extra space characters seem to get clipped

&#8205 seems to work btw, at least is not visible