Timeline LongText wrap

[0xshellming]

Description

Timeline text will display out of the color block when it is too long

Steps to reproduce

input long text timeline

Screenshots

Code Sample

timeline
    title History of Social Media Platform
    2002 : LongLongLongLongLongLongLongLongLongLongLongLongLongLong
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : LongLongLongLongLongLongLongLongLongLongLongLongLongLong

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

Automatically wrap lines and display inside the color block

Additional Context

No response

[nour0205]

Bug confirmation : Timeline Text Overflow Issue

Hi @0xshellming
Thank you for reporting this issue! I've thoroughly investigated it and can confirm that the bug exists. Below are the detailed steps i followed, along with additional observations and environment details

Steps to Reproduce
1. Opened the Mermaid Live Editor.
2. Used the following code snippet:

	`	
	timeline
	    title Evolution of Programming Languages
	    1950 : Assembly
	    1970 : LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLong
	    1980 : C
	         : Smalltalk (Object-Oriented Programming introduced)
	    1991 : Python (Readable, Versatile, Popular in AI and Data Science)
	    1995 : JavaScript (Web Revolution LongLongLongLongLongLongLong)
	         : Java (Write Once, Run Anywhere)
	    2000 : LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
	    2010 : Kotlin (Android Development) and Swift (iOS Development)
	    2020 : WebAssembly (New Era for Browsers)`

3. Rendered the timeline chart.
4. Observed the issue: Long text overflows outside the color block, making it hard to read and visually unaligned.

Here is a screenshot of the issue as observed in my testing:

I also tested the timeline in the demo

Key Observations
• The text for the entry "JavaScript (Web Revolution LongLongLongLongLongLong)" overflows the block, which disrupts the layout and alignment of the timeline.

• In the first example the entries for 1991 and 2010 experience inconsistent text overflow issues, with the text for 1991 spilling above the block and for 2010 underfilling the block

Environment Details
• Mermaid Version: 0.2.4
• Browsers Tested:
Mozilla Firefox (Version: 134.0.2)
Microsoft Edge (Version: 132.0.2957.115)
• Operating System: (Windows 11)

Additional Observations
• The bug occurs consistently across all tested browsers.
• The issue is more noticeable with extremely long text entries.
• Shorter text entries do not exhibit this problem.
• Multiple timeline entries for the same year are unaffected unless the text is long.

Thank you for reporting this issue! I hope the additional details provided here help the maintainers reproduce and categorize it further. Let me know if any other information or testing is required!

[nour0205]

Hi @0xshellming

I've investigated and fixed the issue where Timeline Diagram text did not automatically wrap when the text is too long.

Fix Summary:

Updated the wrap function in svgDrawer.js to handle long text properly.
Ensured long words are split into smaller chunks to prevent overflow.

Results:
Long text wraps within nodes, ensuring no overflow or misalignment.
The background adjusts dynamically to the text size.
The timeline remains visually consistent and readable.

Modified Files:
packages/mermaid/src/diagrams/timeline/svgDrawer.js – Improved text wrapping logic for timeline diagrams.

Resulting Fix:

Here’s the updated Timeline Diagram after applying the fix:

Mermaid Version: 11.4.1

I have submitted a PR to address this: #6258.
Please review it when you get the chance!

Let me know if you have any feedback or suggestions.

Thanks! 😊

[0xshellming]

Hi @0xshellming

I've investigated and fixed the issue where Timeline Diagram text did not automatically wrap when the text is too long.

Fix Summary:

Updated the wrap function in svgDrawer.js to handle long text properly. Ensured long words are split into smaller chunks to prevent overflow.

Results: Long text wraps within nodes, ensuring no overflow or misalignment. The background adjusts dynamically to the text size. The timeline remains visually consistent and readable.

Modified Files: packages/mermaid/src/diagrams/timeline/svgDrawer.js – Improved text wrapping logic for timeline diagrams.

Resulting Fix:

Here’s the updated Timeline Diagram after applying the fix:

Mermaid Version: 11.4.1

I have submitted a PR to address this: #6258. Please review it when you get the chance!

Let me know if you have any feedback or suggestions.

Thanks! 😊

Great! thank you for solving this problem.