Truncated text and custom font families

[fabiospampinato]

Describe the bug

I can't get Mermaid to not truncate any part of any rendered text. For some context I'm mainly interested in getting Mermaid to work properly inside Notable, of which you can find a version shipping with Mermaid v8.5.2 here, but I can also reproduce some of these issues in the official live editor.

Issue

First of all let's take the following graph as an example:

graph LR
    A{Some Long Text}
    A -->|option number one| B[option number one]
    A -->|option number two| C[option number two]

Loading

This is what it looks like under my Windows VM:

The padding is completely off, and for some reason inside the app (which you can kind of see there in the background) the issue is more accentuated 🤷‍♂️.

Inside Notable under macOS or Linux this particular graph looks almost ok though (the "o" in "two" is still partially truncated though):

I think this might be an issue related to the font family, as when comparing the SVG rendered in the live editor and inside the app I've noticed a different font family is being used.

So I've explicitly set the same exact font family I'm using in the rest of the app via the following settings object:

{
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif'
}

And this is the result:

For some reason the fonts that end up being used are different, even though the default ones seem to be inferred from the app anyway, perhaps the logic behind that isn't quite right.

Anyway you can see how pretty much everything gets truncated now for some reason.

Another issue is that using the same font family in the live editor changes nothing, making the live editor useless for testing different font families.

Here there's a more comprehensive corpus of diagrams rendered inside Notable looks like, in case you want to test them yourself, most of them are fine with the default settings under my macOS machine, but under my Windows 10 VM the padding used is absurd:

# Mermaid bug

## One

```mermaid
graph LR
    A{Some Long Text}
    A -->|option number one| B[option number one]
    A -->|option number two| C[option number two]
```

## Two 

```mermaid
graph LR
a[Attitude] --> i[Intention]
sn[Subjective norm] --> i
pbc[Perceived behavioral control] --> i
i --> b[Behavior]
pbc --> b
```

## Three

```mermaid
graph LR
  sys{"System II (deliberative) decision"} -->|yes| act[Attitude activation] --> inf[Attitude influences behavior]
  sys -->|no| acc{Attitude accessibility} -->|low| noact[No attitude activation] --> noinf[Attitude does not influence behavior]
  acc -->|high| act
```

## Four

```mermaid
graph TD
  subgraph Coupling
    A-->B
    C-->B
    B-->D
    D-->B
  end
```

## Five

```mermaid
graph LR
Power_Supply --> Transmitter_A
Power_Supply --> Transmitter_B
Transmitter_A --> D
Transmitter_B --> D
```

## Six

```mermaid
graph TB
  start-->step_one
  start-->testing_a_long_string
  step_one-->step_four
  start-->step_four
  step_four-->finish
  testing_a_long_string-->finish
```

Result:

When using the custom font family provided above way more texts get truncated:

Bottom line is Mermaid seems to handle font families in a very brittle manner, it should always render properly with a default configuration and it should still work properly when custom font families are set.

Any idea on how I can get it to not truncate texts?

[knsv]

Thanks for reporting this. They method to get the width of the label is to render it and get the bounding box. After that the width if the box is calculated based in that initial width. If the font for some reason differs between the initial rendering and the final svg the text can be cut. I will try to replicate this error and investigate.

This might be related to issue #1485.

[knsv]

I can see the issue inside Notable. Very nice note application btw! I will start looking into #1485 and see if that gives any insights into this as well.

I am available for close collaboration to get this working properly in Notable. If you are interested in that you can join our slack and ping me, knsv.
(https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)

[pentacular]

I've come across this problem in 8.7.0.

I'm using the example to have marked generate output with .mermaid class and then using Mermaid.init(undefined, '.mermaid'); to apply that, given import Mermaid from 'mermaid';

Any idea what's missing here?

[trusktr]

I wonder why this happens. I would love to use Mermaid, but it is unusable with this issue.

I tried with all my CSS disabled except for Mermaid's, and it still happens.

I really would love to make some node/flow graphs with this!

[trusktr]

This is what I see directly on the Mermaid site:

I am using Chromium in Manjaro Linux.

[jgreywolf]

@knsv Can you follow up on this item, as well as #651

[shatadrusaha]

I am having similar issue, when I use mermaid in Rmarkdown. When I run the code as a chunck on RStudio, the image is fine.

But, when I render the markdown document into an html file output the texts are truncated. I have tried chrome, IE and edge. same problem on all of them.

Is this issue same as #1540 or a different issue?

Can anyone comment and advise please?

[sliminality]

This is also happening in Notion, with lines getting cut off entirely:

The relevant markup:

flowchart LR
	start --> a1((a1))
	a1((a1)) --> 1("lock()\nold := new\nq := q->next") 
	--> a2((a2)) -->
	2[/if q != NULL/] -- TRUE --> a3((a3)) -->
	3("q->data := new\nunlock()\nnew++") --> a4((a4)) -->
	4[/if new != old/] -- FALSE --> a5((a5)) --> t5("unlock()")
	2 -- FALSE --> a4
	4 -- TRUE --> a1

Loading

Upon inspection, it appears that the <foreignObject> elements are sized significantly smaller than the text <div>s they contain.

[ggrossetie]

Maybe a simpler solution would be to be able to configure a padding to account for font rendering discrepancies (between a server and a client)?

[jgreywolf]

I am not able to repro this in the live editor any more, nor in my local site. Is the base issue reported still an issue?

[ggrossetie]

I believe that Mermaid live is using client side rendering?

It's still an issue when using Mermaid server-side because it will compute the size of the boxes using a different font rendering engine (or even font family) than the one used by the client.

[benhbell]

yea, still an issue, especially in notion. The font line breaks for labels especially, but looks fine in mermaid live

[LukaDarsalia]

I was able to overcome this issue in Notion by using <br/> like this and you can change size of the node by adding dots at the end:

graph TD
   f((<br/>f<br/><br/>....))
   x((<br/>x<br/><br/>....))
   y((<br/>y<br/><br/>....))
	 t2((<br/>t<br/><br/>....))
	 t1((<br/>t<br/><br/>....))

f --> x
f --> y
y --> t1
x --> t2

Before:

After:

[SkipperJK]

yea, still an issue, especially in notion. The font line breaks for labels especially, but looks fine in mermaid live

Use backticks to enclose text. like A["xxx"]

[d33bs]

Just wanted to mention that I witnessed this challenge as well (outside of Notion) and was able to move forward with non-truncated text rendering using @LukaDarsalia's workaround (adding <br/><br/> to the node, for ex: nodename["a clever description"] to nodename["a clever description<br/><br/>"])(many thanks for the comment about this!). In my case I didn't need the additional ... after the breaks.

[sidharthv96]

All the given examples are rendering properly now.

graph TD
f((f)) --> x((x))
f --> y((y))
y --> t1((t1))
x --> t2((t2))

Loading

Mermaid bug

One

graph LR
    A{Some Long Text}
    A -->|option number one| B[option number one]
    A -->|option number two| C[option number two]

Loading

Two

graph LR
a[Attitude] --> i[Intention]
sn[Subjective norm] --> i
pbc[Perceived behavioral control] --> i
i --> b[Behavior]
pbc --> b

Loading

Three

graph LR
  sys{"System II (deliberative) decision"} -->|yes| act[Attitude activation] --> inf[Attitude influences behavior]
  sys -->|no| acc{Attitude accessibility} -->|low| noact[No attitude activation] --> noinf[Attitude does not influence behavior]
  acc -->|high| act

Loading

Four

graph TD
  subgraph Coupling
    A-->B
    C-->B
    B-->D
    D-->B
  end

Loading

Five

graph LR
Power_Supply --> Transmitter_A
Power_Supply --> Transmitter_B
Transmitter_A --> D
Transmitter_B --> D

Loading

Six

graph TB
  start-->step_one
  start-->testing_a_long_string
  step_one-->step_four
  start-->step_four
  step_four-->finish
  testing_a_long_string-->finish

Loading

[s-h-a-d-o-w]

@sidharthv96

It looks like this was either not fully resolved or there has been a regression, see this example: https://codepen.io/the-real_s-h-a-d-o-w/pen/RNbejQq

It's running fine in CodePen but if you download it and open it locally, you will very likely see clipping.

This can be resolved easily by inserting the following in the render function between adding custom styles and rendering:

  await new Promise(resolve => {
    document.fonts.ready.then(() => {
      resolve()
    });
  })

I thought about just submitting a PR given the simplicity. But there should obviously also be a regression test created, which will take a bit of time. But I'm happy to contribute if you want me to.