From 814d2ef18f85816bee8b0bd63d7e8dc17119635f Mon Sep 17 00:00:00 2001 From: Goku-kun Date: Mon, 4 May 2026 23:33:26 +0530 Subject: [PATCH 1/4] curr(pretext): canvas pretext link fix --- .../build-a-canvas-typography-layout-with-pretext.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx index 6c3e6702..171e6fe9 100644 --- a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx +++ b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx @@ -34,7 +34,7 @@ The traditional way to find out is to literally render the text to the screen (e Pretext solves the problem of calculating the height of a paragraph of line-wrapped text without touching the DOM at all. -View demos of pretext here: https://chenglou.me/pretext/ +View demos of pretext here: [Pretext](https://www.pretext.cool/) ## Introduction From ec89d2b80b63b9e526377785c7db6ec81bd1c935 Mon Sep 17 00:00:00 2001 From: Goku-kun Date: Mon, 4 May 2026 23:48:30 +0530 Subject: [PATCH 2/4] curr(pretext-pt): link fix --- .../build-a-canvas-typography-layout-with-pretext.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx index 171e6fe9..04a67450 100644 --- a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx +++ b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx @@ -369,8 +369,8 @@ Huge shoutout to [Cheng Lou](https://chenglou.me/) for pioneering this engineeri Feel free to take a look at these resources and some ideas to expand on this current pretext project! -- [pretext GitHub](https://github.com/chenglou/pretext#js-repo-pjax-container) from @_chenglou -- [pretext demos](https://chenglou.me/pretext/) +- [pretext GitHub](https://github.com/chenglou/pretext) from @_chenglou +- [pretext demos](https://www.pretext.cool/) - [more! pretext demos](https://somnai-dreams.github.io/pretext-demos/) - [this](https://github.com/exrlla/pretext-scrollabe-project) project demo repo on GitHub - [x thread on pretext projects](https://x.com/_chenglou/status/2038497396033012131) From 51fb3f6739c2b11ef845eb2a5f40f4b9a8b66360 Mon Sep 17 00:00:00 2001 From: Goku-kun Date: Mon, 4 May 2026 23:49:05 +0530 Subject: [PATCH 3/4] fix(pretext-pt): ARTICLE doesn't exist in the code; add the sample file --- .../build-a-canvas-typography-layout-with-pretext.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx index 04a67450..bacddf96 100644 --- a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx +++ b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx @@ -201,7 +201,7 @@ const TEXT_WIDTH = CANVAS_WIDTH - PADDING * 2; const IMAGE_GAP = 20; ``` -After the setup, create a `const` variable called `ARTICLE`, and in quotes, paste your article or text. If you want some sample text you can use text from this repo [here](). +After the setup, create a `const` variable called `ARTICLE`, and in quotes, paste your article or text. If you want some sample text you can use text from this repo [here](https://raw.githubusercontent.com/codedex-io/projects/main/projects/build-a-canvas-typography-layout-with-pretext/sample-article.txt). Now, let's connect the JavaScript to the HTML elements we have: From 23538cafb3676df4a51d5b99029ccd77b3e48992 Mon Sep 17 00:00:00 2001 From: Goku-kun Date: Mon, 4 May 2026 23:50:12 +0530 Subject: [PATCH 4/4] fix(pretext-pt): rendering offset logic for text --- ...-canvas-typography-layout-with-pretext.mdx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx index bacddf96..05a7a164 100644 --- a/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx +++ b/projects/build-a-canvas-typography-layout-with-pretext/build-a-canvas-typography-layout-with-pretext.mdx @@ -258,11 +258,11 @@ let y = PADDING; const lines = []; while (true) { - let lineWidth = TEXT_WIDTH; - let xOffset = PADDING; + let leftCut = PADDING; + let rightCut = CANVAS_WIDTH - PADDING; ``` -We'll then check if each line overlaps an image. +We track the left and right edges of the available text band separately so multiple images on the same line can each tighten one side without overwriting each other. We'll then check if each line overlaps an image. ```js for (const obs of obstacles) { @@ -274,21 +274,21 @@ We'll then check if each line overlaps an image. const canvasCenter = CANVAS_WIDTH / 2; ``` -For the following lines of code, we're asking to detect if the image is on the right to then shrink line width, and If image is on the left to push text to the right. Depending on your desired layout or behaviour you want to execute, this could change. +For the following lines of code, we're asking to detect if the image is on the right to then tighten the right edge, and if the image is on the left to push the left edge inward. Depending on your desired layout or behaviour you want to execute, this could change. ```js if (obsCenter > canvasCenter) { - // Image on right → shrink width - const availableRight = obs.left - IMAGE_GAP; - lineWidth = Math.max(50, availableRight - PADDING); + // Image on right → tighten the right edge + rightCut = Math.min(rightCut, obs.left - IMAGE_GAP); } else { - // Image on left → push text right - const imgRight = obs.right + IMAGE_GAP; - xOffset = Math.max(PADDING, imgRight); - lineWidth = Math.max(50, CANVAS_WIDTH - PADDING - xOffset); + // Image on left → push the left edge inward + leftCut = Math.max(leftCut, obs.right + IMAGE_GAP); } } } + + const xOffset = leftCut; + const lineWidth = Math.max(50, rightCut - leftCut); ``` Now, we'll ask pretext for the next line that fits using `layoutNextLineRange()` and `materializeLineRange()` to then store it.