Merge pull request #219 from codedex-io/curr/pretext-review

curr(pretext): Review for the Pretext library PT

Author: exrlla

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 
 
@@ -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:
 
@@ -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. 
@@ -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)