Cannot center-justify text in nodes

[elenigen]

Describe the bug
I'm basically reopening this issue: #397 because the original solution is no longer working and the discussion thread has been blocked.

To Reproduce
Steps to reproduce the behavior:

graph LR;

A[<center>My centered text</center>]-->B[<center>Some other text<br>with a line break</center>]

Try here

Expected behavior
We can see that <br> html tag was properly rendered, but the <center> tag isn't. We would need a native solution (without <script> tag) to allow this to work (not necessarily <center>, it could be done with style operation for instance.

Screenshots

Desktop/Mobile

• Browser: All (chrome, firefox, safari, brave,...)
• Version: Latest (https://mermaidjs.github.io/mermaid-live-editor/)

[IOrlandoni]

Note that the <center> tag has been deprecated latest versions of HTML so I'm not sure if you will get the expected result but, if you want to avoid escaping and actually have a tag, you have to change the security level.

See here.

[elenigen]

Sounds like a broken feature, if you have to disable the security, no?

If we are not supposed to use <center>, then it should not be the solution. Why not allowing this through the style operation as I recommended?

[elenigen]

Just to be clear, I use mermaid in my github wikis and there's no way to put this extra config, specially I use a Chrome plugin to render it dynamically. It really sounds like a missing/broken feature.

[IOrlandoni]

Hey, my answer was only directed to the fact that the tag gets written as text in the node instead of actually being a tag. This is because you are working on strict security level.

Also the fact that the <center> tag is not in use, so you might not get the desired results.

This does not provide a solution to how to center-justify text in nodes and, it appers to be, there is none. It's just a missing feature. Even when using the text-align on a style operation, it sets it but it does not work. See here.

[knsv]

I think we should investigate this one further. Maybe something like this:

graph LR;

A[My centered text].center

What needs to be investigated is if there is some nifty css to align the text. When using htmlLabels this should be possible. Note that the dot notation means tha the class is attached to the node.

[IOrlandoni]

I think the issue lays in the fact that style properties are applied only to the "node" (rect, box, etc...) and so they don't affect the label which is not inside the "node".

Sample with textAlign center style:

[KoljaTM]

The "color" property is already applied at the text node level. I added that for text-align as well in a PR.