Open RickStrahl opened 2 years ago
In case it helps, I'm seeing this behavior on Edge (chromium) but not Firefox.
For me it fails in FireFox too:
Ok, I'm seeing the same thing as you now. I must have triggered a redraw somehow without realizing it.
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
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.
I'm experiencing this too. Mermaid v9.1.4. Padding the labels with #nbsp;
does not seem to help.
Issue is also present in mermaid docs.
I can confirm this issue:
(The word is "Alignment")
I just saw that the mermaid-cli
issue tracker is full of reated issues:
Do you guys have any workaround for this? I get the same issue, even with the version 10.9.1.
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
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
‍ seems to work btw, at least is not visible
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.
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:
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.