Correct width of text ending with space (#491)

Author: wouterlucas

examples/tests/text-dimensions.ts

@@ -102,6 +102,16 @@ export default async function test(settings: ExampleSettings) {
       text1.text = 'SDF 2nd';
       text1.textRendererOverride = 'sdf';
     },
+    () => {
+      // Test when text ends with space for correct width
+      text1.text = 'Canvas ';
+      text1.textRendererOverride = 'canvas';
+    },
+    () => {
+      // Test when text ends with space for correct width
+      text1.text = 'SDF ';
+      text1.textRendererOverride = 'sdf';
+    },
   ];
   /**
    * Run the next mutation in the list

src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts

@@ -121,13 +121,18 @@ export function layoutText(
     xStart: -1,
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const shaper = trFontFace.shaper;
 
   const shaperProps: FontShaperProps = {
     letterSpacing: vertexLSpacing,
   };
 
+  // HACK: The space is used as a word boundary. When a text ends with a space, we need to
+  // add an extra space to ensure the space is included in the line width calculation.
+  if (text.endsWith(' ')) {
+    text += ' ';
+  }
+
   // Get glyphs
   let glyphs = shaper.shapeText(
     shaperProps,