The size of the label is not sized correctly #1007

Open nagyv opened 5 years ago

Describe the bug

Easier to show than to tell: https://vnagy-labeling-overview.about.gitlab-review.app/handbook/product-development-flow/

The last letters in the chart overflow the .label div.

To Reproduce Steps to reproduce the behavior:

add any mermaid code to the GitLab handbook

Expected behavior Letter don't overflow

Screenshots

Screenshot_2019-10-16 Product Development Flow

Desktop (please complete the following information):

OS: Mac
Browser: Firefox
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context

The problem is caused by mermaid's own css. If I comment out the font-family settings in #mermaid-1571243310767 .label then it renders fine.

The most likely cause for this is that the font is being loaded after mermaid runs. Could you confirm that this is not the case?

See here for the relevant doc part.

Actually, this is my guess too. How can I get mermaid to load after the fonts? What event should I listen to?

Nacho notifications@github.com ezt írta (időpont: 2019. okt. 16., Sze, 18:34):

The most likely cause for this is that the font is being loaded after mermaid runs. Could you confirm that this is not the case?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/knsv/mermaid/issues/1007?email_source=notifications&email_token=AAA65T5AVQ5VPIHGWZNPH4TQO47CLA5CNFSM4JBN7LV2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBNEK3I#issuecomment-542786925, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA65TZOPA2PXE4KABD6J5DQO47CLANCNFSM4JBN7LVQ .

@nagyv I edited my previous comment with a link to the documentation so I believe you have not seen it in your notification email. See here for the relevant doc part.

Question, what about for wiki? The solution in the link above shows how you could resolve for JS, but when used in a wiki, I do not think that is an option

Are you integrating mermaid into the wiki or are you using a wiki with mermaid support as a content provider or are you administrating a wiki with mermaid support?

Slightly different answers depending on which category you fall into.

Wiki support built into Azure DevOps @knsv

We are using font awesome very very much in our documentation for our support and maintenance tool nodinite, example

This also always happens when using font awesome

mermaid icon font error

@znxkznxk1030 This is irrelavent to mermaid, but i want to know what software you are using for documentation.

@znxkznxk1030 This is irrelavent to mermaid, but i want to know what software you are using for documentation.

It is not Irrelevant to us. This is a big problem (as is the lack of support for IE and other older browsers)

It is not Irrelevant to us. This is a big problem (as is the lack of support for IE and other older browsers)

@znxkznxk1030 you misunderstood, I need to write documentation for one of my software, I am planning to use mkdocs to Generate Static HTML site and host it on my server. I want to know what documentation tool did you use?

IE support has been an issue for a long time. I currently run Mac and have problems working with IE but would gladly support anyone that does.

What other browsers are problematic? Maybe IE11 will resolve it self when Microsoft stops supporting it. Does it work in Edge?

Similar issue here using fontawesome 4.7.0, bootstrap 4.4.1 and JQuery 3.4.1.

The size of elements in a flowchart are sometimes calculated without the size of the font-awesome icon, so the overflow on the right side get lost.

It seems to me, that it is depending on the icon itself as some are rendered correctly some not.

It seems independent to the length of the label.

Example:

Example code:

<div class="row mt-5">
    <div class="col">
        <div class="mermaid">
          graph TD
                SL([fa:fa-user second level]) --> L[solution]
                L -- solution email --> db[(mysql)]
                db --> X[automatic] 
                X --> CM([fa:fa-users first level])
              db -- Email --> c([fa:fa-user-o customer support]);
        </div>
    </div>
    </div>

Anyone able to verify?

Poke. Any updates here? I am running into this bug and was wondering if there was a workaround? Thanks.

I worked around it by adding unicode spaces until it fit

mermaid-js / mermaid

The size of the label is not sized correctly #1007