Text that overflows its container - solving CSS spacing issue
-
A subtle and often overlooked issue can arise when setting
word-spacing
orletter-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
orword-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
orword-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 likeletter-spacing
andword-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 browsersHave you encountered this bug before? Let us know in the comments how you handled it!