mermaid-js/mermaid

Label texts in flowcharts are not centered horizontally with "htmlLabels" disabled

GDFaber opened this issue · 4 comments

GDFaber commented

Describe the bug
If htmlLabels is set to false in the flowchart configuration, the multiline texts for nodes and lines are not horizontally centered.

To Reproduce
Steps to reproduce the behavior:

  1. Go to minimal example in live editor
    -> label text is centered
  2. set htmlLabels to false
    -> label text is aligned left

Expected behavior
Multiline texts should be centered for non-html labels as well.

Additional context
Maybe the SVG text attribute text-anchor can be used here, but I have not looked into it enough to be sure about that.

HansOMartinsen commented

Hi. Anyone looking at this bug. Any workaround sugested? It is enough of an error that we are not using the awesome power of Mermeid yet. :-/

  • 👍1
nanoant commented

Hi all. The solution is simple rather simple. Currently SVG generated by Mermaid for labels looks like this:

<g class="label" style="" transform="translate(-18.234375, -11.5)">
	<text style="">
		<tspan xml:space="preserve" dy="1em" x="0" class="row">volume</tspan>
		<tspan xml:space="preserve" dy="1em" x="0" class="row">0</tspan>
	</text>
</g>

Since all the labels start from the center of the node, we use explicit translate(-18.234375, -11.5) to move them to the top left corner. But if we simply don't translate them to left, and add text-anchor="middle" to <text> then we have all the labels centered nicely:

<g class="label" style="" transform="translate(0, -11.5)" >
	<text style="" text-anchor="middle">
		<tspan xml:space="preserve" dy="1em" x="0" class="row">volume</tspan>
		<tspan xml:space="preserve" dy="1em" x="0" class="row">0</tspan>
	</text>
</g>

I think this is relatively trivial change, that can be easily implemented, I just need to make NPM package out of it. Unless some existing contributor e.g. @jgreywolf has everything in place I can send a PR for it.

jgreywolf commented

@nanoant Are you still willing to submit a PR on this?

I would say - never wait, if an issue is not assigned say you are working on it and we will ensure you are assigned and then "bug" you accordingly :)

FutzMonitor commented

I tried recreating this bug in the live editor and the text continues to be aligned center. Does this issue persist for anyone else?
image