Not trimming white space from textblock content

GoJS
#1

Could not find a way to avoid trimming white space from the text set for a TextBlock. This bothered my panel showing output in mono-space font. I worked around it with an extra prefix character to preserve the formatting. Would be nice to have an option to preserve the spaces when you don’t let TextBlock wrap the lines for you.

Go JS Text Block Style
#2

Use a zero-width space or a soft hyphen:
Zero-width space - Wikipedia
Soft hyphen - Wikipedia

JavaScript:

{ text: "\u200B    indented text", … }
#3

Hmm… I must be doing something wrong. I have even tried to replace all spaces by \u00a0 but it still does not fly. When I replace by ‘*’ it does space nicely (but obviously does not look well).
line = line.replace(/ /g, ‘\u00A0’);

#4

If I modify the model for the Minimal sample to be:

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "\u00AD        Alpha", 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 }
    ]);

And use this node template:

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

I get this result:

Are you using version 1.7?

#5

Yep, 1.7.17. It’s a node with multiple lines of text, joined by ‘\n’ where subsequent lines have leading spaces.
Can’t get the editor here retain formatting, so here is a stand-alone HTML pages of it: github.com/rvdheij/pdweb/blob/test/gojs-pdw-5.html
The template is at line 108 and the instance is born at line 363. The messing with the text is just underneath.

Rob

#6

Why did I read \u00a0 at least a dozen times… ;-) The \u00ad does it, and takes no space (no pun intended)

#7

When I first replied with what is now marked as the “Solution”, I had a reference to the wrong Wikipedia page about non-breaking space rather than soft hyphen, even though my JavaScript code was using the correct character, #0AD. Sorry for the confusion.

I have fixed the reference to Wikipedia.

#8

Actually, #0A0 or \u00A0 does work within lines, just not at line breaks.

#9

Thank you for clarifying, that makes sense.

#10

I recently had to get rid of the \u00AD again because a good friend was using Palemoon and that showed some garbage overlay the first character. Decided to use a "> " in front of the text, which works fine for me in this case.

Trimming white space on a link label