Visual bug for Chinese characters

[zhiqiangxu]

Description

It seems mermaid didn't correctly calculate the width of Chinese characters. And " doesn't help here.

Steps to reproduce

Here's the snippet to reproduce:

timeline
    title 正常情况下Epoch的构成
    section Epoch
        Active Period : 此时上个Epoch应该已经成功结算，<br>验证者可以通过链上合约加入或退出
        Frozen Period : 此时开始结算当前Epoch，<br>结算范围是上个Epoch的Frozen Period到当前Epoch的Active Period

Screenshots

Code Sample

No response

Setup

• Mermaid version: latest, https://mermaid.live/
• Browser and Version: [Chrome]

Suggested Solutions

No response

Additional Context

No response

[FutzMonitor]

I can confirm that this issue persists in the current v10.8.0 build of Mermaid. Additionally, it seems that this visual bug isn't constrained to just the time period box. It happens in the event and section boxes as well.


And it's not restrict to just Chinese characters. English characters also don't wrap nicely and either overlap with another box or move under it.

It would be nice if the boxes were either dynamic and began to grow vertically to account for the text and to wrap it automatically as well.

[FutzMonitor]

After further testing in the live editor, you can force new lines by using <br> as noted in the documentation. Consider the following example:

timeline
    title 正常情况下Epoch的构成
    section Epoch
        Active Period : 此时上个Epoch应该已<br>经成功结算，<br>验证者可以通过链上合约<br>加入或退出
        Frozen Period : 此时开始结算当前Epoch，<br>结算范围是上个<br>Epoch的Frozen Period到当前<br>Epoch的Active Period

This produces the following diagram.

I will note that characters refusing to break into new lines seems to be an issue with any letters from any alphabet. If there's no spaces then line breaks don't seem to work. Consider the following diagram:

timeline
    title 正常情况下Epoch的构成
    section Epoch
        Active Period : 此时上个Epoch应该已经 成功结算验证者可以 通过链上合约加入或退出
        Frozen Period : 此时开始结算当前 Epoch，结算范围是 上个Epoch的Frozen Period到当前Epoch 的Active Period

A similar result is achieved without <br> because there are spaces present.

The answer now is whether this functionality should be changed. I personally think it would be nice if longer strings of characters without spaces were forced to break into a new line, but I don't know if that could break any functionality. Could a maintainer weigh in on this issue?

[sidharthv96]

@FutzMonitor can you try using the functions in https://github.com/mermaid-js/mermaid/blob/841ae15fb5561526bd9d9c64cc2817d17b0cba35/packages/mermaid/src/rendering-util/splitText.ts ?