Custom TextBlock font with auto panel

GoJS
1

On our node template we currently have an Auto panel consisting of a RoundedRectangle shape as the main object with a Table panel inside it. Within this table panel we declare 3 columns, on row 0 each column has a TextBlock element or TextBlock nested within a button. These TextBlock elements consist of a single character and have a custom font set to "900 3em serif" allowing them to be much bolder and bigger than other text on the node template.
The second row has a single TextBlock spanning all three rows which does not have a customised font
The result of this is something looking like this:
image

The issue we now have is that we wish to add a shape to surround the last TextBlock element on the top row. I assumed this would be easily achieve by just adding an auto panel and shape. i.e. this code

$(go.TextBlock,
                    {
                        row: 0, column: 2, font: "900 3em serif", spacingBelow: -5,
                        flip: go.GraphObject.FlipHorizontal, stroke: cssStyles.foreground,
                        text: "¬"
                    }
                )

by this code

$(go.Panel, "Auto",
                    { row: 0, column: 2 },
                    $(go.Shape, "RoundedRectangle", { fill: "blue" }),
                    $(go.TextBlock,
                        {
                            font: "900 3em serif", spacingBelow: -5,
                            flip: go.GraphObject.FlipHorizontal, stroke: cssStyles.foreground,
                            text: "¬"
                        }
                    )
                )

however the custom font seems to result in a background shape and fill that is both too narrow and too tall for the text within it.
image
If I remove the custom font it appears to work correctly
image

I’ve also tried putting the auto panel code directly inside the node template auto panel (in other words not inside the table panel) and I get the same result.

What is causing the blue shape I am trying to surround my TextBlock in to not grow/shrink to the right size for the TextBlock

2

We’re looking into this text measurement problem.

3

Thank you for the quick feedback, is there an issue I can track or a workaround for this issue?

4

This forum topic can serve that purpose.

Do you need to use “em” font sizing? Or any other relative font sizing?

5

The fundamental problem is that we measure text with an in-memory HTML canvas, (CanvasRenderingContext2d.measureText) as opposed to any particular Diagram’s canvas (because it may not have one, or the Diagram may not be in the DOM, or there may not be a diagram at all yet). When the browser measures text on an in-memory canvas, it gets a different result for em sizing:

ctx.font = "3em sans-serif"; // this context's <canvas> is in the DOM
tempCtx.font = "3em sans-serif"; // this context's <canvas> is not in the DOM

// Internally when setting context.font, these canvases are converting em to px
// so when we query:

console.log(ctx.font);     // returns "48px sans-serif"
console.log(tempCtx.font); // returns "30px sans-serif"

If you use pixel sizing instead, it will remain consistent.

We are exploring workarounds for this browser behavior, but cannot guarantee that we will find a suitable one.