From cb655eab2a0d2c3b982b22d5efb28915c3bff8f3 Mon Sep 17 00:00:00 2001 From: Maikel Brons Date: Wed, 22 Jan 2025 10:05:11 +0100 Subject: [PATCH] Correct width of text ending with space --- examples/tests/text-dimensions.ts | 10 ++++++++++ .../SdfTextRenderer/internal/layoutText.ts | 7 ++++++- .../chromium-ci/text-dimensions-6.png | Bin 0 -> 2196 bytes .../chromium-ci/text-dimensions-7.png | Bin 0 -> 1385 bytes 4 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 visual-regression/certified-snapshots/chromium-ci/text-dimensions-6.png create mode 100644 visual-regression/certified-snapshots/chromium-ci/text-dimensions-7.png diff --git a/examples/tests/text-dimensions.ts b/examples/tests/text-dimensions.ts index 8167a3da..b2fd2c72 100644 --- a/examples/tests/text-dimensions.ts +++ b/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 diff --git a/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts b/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts index ea638c09..992ab04e 100644 --- a/src/core/text-rendering/renderers/SdfTextRenderer/internal/layoutText.ts +++ b/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, diff --git a/visual-regression/certified-snapshots/chromium-ci/text-dimensions-6.png b/visual-regression/certified-snapshots/chromium-ci/text-dimensions-6.png new file mode 100644 index 0000000000000000000000000000000000000000..c894c0229bcf0173f20251c2ec17af3303433c9f GIT binary patch literal 2196 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 U8JM94EIS!IUHx3vIVCg!0H(u}RR910 literal 0 HcmV?d00001