Trimming white space on a link label

GoJS
#1

Hi, so goJs by default trims any preceding white space on labels and I was wondering if there was a way around that? I saw an older post about the same issue, but the solution was only for labels with no line breaks. I have to use the “\n” character several times to separate information from one another, but I also want to indent to display information more clearly. Would there be a way to ignore trimming white space in this way?

The solution I saw earlier came from here : Not trimming white space from textblock content - #10 by rvdheij

#2

The solution from that post seems to work for multiline text as well. Just use the soft-hyphen character before your white space.

Node template:

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "RoundedRectangle", { strokeWidth: 0 },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );

Model:

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha\n\u200B  line2\n\u200B    line3", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);

Result:

#3

So the issue with this approach is that the diagram then add the following symbol before the space indentation “ë”. Before it wasn’t even doing that and was just ignoring the spaces all together, I’m not really sure what changed since I think I’m doing the exact same thing. Any idea on how to get rid of the “ë” symbol?

#4

I was also looking at another solution to the whit space problem which assigned the white-space property to pre in css, however when I try to edit the template css using the {}, I get yelled at by my ide since it doesn’t like the - between white and space. Any idea how I could assign this css property to my label?

#5

TextBlocks don’t use the CSS white-space property, so I don’t think you’ll be able to use that. What happens if you replace \u00AD with \u200B? It is the unicode character for a zero width space. I suppose different fonts and browsers will have different levels of support for various unicode characters.

#6

that fixed the issue, thanks so much!