Text that overflows its container - solving CSS spacing issue

Wojtek Krzesaj

A subtle and often overlooked issue can arise when setting word-spacing or letter-spacing on the <canvas> element itself or one of its parent elements. This can cause the text drawn on the diagram to appear unexpectedly larger than intended.

In this post, we'll explore this bug, its root cause, and how to work around it.

The Bug: Growing Text on the Diagram

You might encounter this issue when applying CSS styles like this:

canvas {
  letter-spacing: 4px;
}

Or if a parent element of the <canvas> applies such styles:

.parent-container {
  word-spacing: 4px;
}

Expected Behavior

Normally, setting letter-spacing or word-spacing affects only regular HTML text elements (e.g., <p>, <span>, <div>). Since text inside a diagram or rather a <canvas> is drawn using JavaScript, we wouldn't expect it to be affected by CSS styles.

Observed Behavior

When letter-spacing or word-spacing is applied to the <canvas> or its parent, any text appears larger than expected. The scaling effect varies based on the spacing value and seems to grow proportionally.

Why Does This Happen?

The root cause of this issue lies in how the browser applies CSS styles before rendering. Although the <canvas> itself does not render text via the DOM, the browser includes inherited styles when computing layout.

How to Reproduce the Bug

To see this in action, try the following code:

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://cdn.jsdelivr.net/npm/gojs@3.0.19/release/go.js"></script>
    <div
      style="
        width: 100%;
        height: 100%;
        overflow: hidden;
        letter-spacing: 4px;
        padding: 0;
      "
    >
      <div
        id="diagram"
        style="
          border: solid 1px black;
          width: calc(100vw - 20px);
          height: calc(100vh - 20px);
        "
      ></div>
    </div>

    <script id="code">
      const diagram = new go.Diagram("diagram");
      const $ = go.GraphObject.make;

      diagram.nodeTemplate = $(
        go.Node,
        go.Node.Auto,
        $(
          go.Shape,
          {
            figure: "RoundedRectangle",
            strokeWidth: 0,
            fill: "black",
          },
          new go.Binding("fill", "color")
        ),
        $(
          go.TextBlock,
          {
            margin: 8,
            font: "bold 14px sans-serif",
            stroke: "#333",
            background: "yellow",
          },
          new go.Binding("text")
        )
      );

      diagram.model = new go.GraphLinksModel(
        [{ key: 1, text: "Alpha Text Simple Example", color: "lightblue" }],
        []
      );
    </script>
  </body>
</html>

The example was made using https://gojs.net/latest/samples/minimal.html as a starting point. You will notice that the text appears larger than expected. The picture below demonstrates the outcome.

Workarounds and Fixes

To prevent this issue, you need to reset properties on the <canvas> or on the diagram container. If styles are applied at a higher level, override them specifically for the canvas or the diagram container:

 <div
        id="diagram"
        style="
          ...
          letter-spacing: normal;
          word-spacing: normal;
        "
      ></div>

Conclusion

While HTML <canvas> text rendering is generally isolated from CSS styles, certain properties like letter-spacing and word-spacing can unexpectedly affect it, leading to enlarged text. The issue can be detected in Chromium-based browsers, and if you attempt to run it on Firefox, everything appears flawless. Please make sure to check your solution for the most commonly used browsers

Have you encountered this bug before? Let us know in the comments how you handled it!