Padding on labels

[maoberlehner]

Describe the bug
Prior to v8.1.0 it was possible to define .label div { padding: 6px 22px; } to add some padding around labels. The width and the height of the <foreignObject> around it was calculated accordingly. As of v8.1.0 the text is pushed outside of the node element if the padding is too large.

To Reproduce
Steps to reproduce the behavior:

1. Use v8.1.0
2. Create a default Flowchart with dark theme and themeCSS: '.label div { padding: 30px 30px; }'
3. Add a node
4. The text of the node is pushed outside of the center of the node by the padding, the node does not adapt its size to match the label with padding.

Expected behavior
Ideally it should be the same as it was with v8.0.0 and below, the size of the node is calculated so that it can contain a label with padding.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome 75
• Version v8.1.0

[knsv]

The phenomenon is not unkown to me and quite annoying. It is a font-thing... We had the same issue on our new documentation, http://knsv.github.io/mermaid/ until the themeCSS was added to the initialize call. In effect this matches the font of the flowcharts to the font in the page body which was used for meassuring the sie of the boxes. The themeCSS is still in effect and is applied.

mermaid.initialize({ logLevel:0, startOnLoad: false, themeCSS:'.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }' });

exctract from docs...

Labels out of bounds

If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the whole page to have been loaded (dom + assets, particularly the fonts file).

$(document).load(function() {
    mermaid.initialize();
});

or

$(document).ready(function() {
    mermaid.initialize();
});

Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering. Also note that when rendering the width of labels are calucated of what width it bening meassured at the time.

If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.

    div.mermaid {
        font-family: 'trebuchet ms', verdana, arial;
    }

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you are still interested in it, and it is still relevant, you can comment or remove the label to revive it.