processing · Vansh0204 · Nov 26, 2025 · Nov 30, 2025 · Dec 1, 2025
diff --git a/src/core/constants.js b/src/core/constants.js
@@ -1053,6 +1053,16 @@ export const CHAR = 'CHAR';
  * @final
  */
 export const WORD = 'WORD';
+/**
+ * @property {String} PRETTY
+ * @final
+ */
+export const PRETTY = 'PRETTY';
+/**
+ * @property {String} BALANCE
+ * @final
+ */
+export const BALANCE = 'BALANCE';
 
 // TYPOGRAPHY-INTERNAL
 export const _DEFAULT_TEXT_FILL = '#000000';

diff --git a/src/core/p5.Renderer.js b/src/core/p5.Renderer.js
@@ -375,6 +375,66 @@ class Renderer extends p5.Element {
           );
           y += p.textLeading();
         }
+      } else if (
+        textWrapStyle === constants.PRETTY ||
+        textWrapStyle === constants.BALANCE
+      ) {
+        const nlines = [];
+        for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+          const wordsArr = lines[lineIndex]
+            .split(' ')
+            .filter(s => s.length > 0);
+          const spaceW = this.textWidth(' ');
+          const N = wordsArr.length;
+          const widths = wordsArr.map(s => this.textWidth(s));
+          const dp = new Array(N + 1).fill(Infinity);
+          const next = new Array(N + 1).fill(-1);
+          dp[N] = 0;
+          for (let i = N - 1; i >= 0; i--) {
+            let sum = 0;
+            for (let j = i; j < N; j++) {
+              sum += widths[j];
+              const gaps = j - i;
+              const total = sum + gaps * spaceW;
+              if (total > maxWidth) break;
+              const slack = maxWidth - total;
+              const cost = (j === N - 1 ? 0 : slack * slack) + dp[j + 1];
+              if (cost < dp[i]) {
+                dp[i] = cost;
+                next[i] = j + 1;
+              }
+            }
+          }
+          let i = 0;
+          while (i < N) {
+            const j = next[i] > 0 ? next[i] : i + 1;
+            nlines.push(wordsArr.slice(i, j).join(' '));
+            i = j;
+          }
+        }
+
+        let offset = 0;
+        if (this._textBaseline === constants.CENTER) {
+          offset = (nlines.length - 1) * p.textLeading() / 2;
+        } else if (this._textBaseline === constants.BOTTOM) {
+          offset = (nlines.length - 1) * p.textLeading();
+        }
+
+        for (let i = 0; i < nlines.length; i++) {
+          this._justifyActive = this._textAlign === constants.JUSTIFIED;
+          this._justifyWidth = maxWidth;
+          this._justifyIsLastLine = i === nlines.length - 1;
+          this._renderText(
+            p,
+            nlines[i],
+            x,
+            y - offset,
+            finalMaxHeight,
+            finalMinHeight
+          );
+          this._justifyActive = false;
+          y += p.textLeading();
+        }
       } else {
         let nlines = [];
         for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {

diff --git a/test/manual-test-examples/type/index.html b/test/manual-test-examples/type/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <script language="javascript" type="text/javascript" src="../../../lib/p5.js?v=123456"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js?v=123456"></script>
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <script>console.log("HTML loaded");</script>
+</body>
+
+</html>
diff --git a/test/manual-test-examples/type/sketch.js b/test/manual-test-examples/type/sketch.js
@@ -0,0 +1,88 @@
+function setup() {
+  console.log('Setup called');
+  createCanvas(1000, 1200);
+  background(255);
+  textSize(14);
+  textFont('sans-serif');
+
+  let alignments = [LEFT, CENTER, RIGHT];
+  let vertAlignments = [BASELINE, BOTTOM, CENTER, TOP];
+  // Using string literals as constants might not be exposed in this build environment yet
+  let wrapModes = ['PRETTY', 'BALANCE'];
+  console.log('window.PRETTY:', window.PRETTY);
+  let sampleText = 'text gonna wrap when it gets too long and is then breaking.';
+
+  let xStart = 50;
+  let yStart = 50;
+  let boxWidth = 200;
+  let boxHeight = 80;
+  let xGap = 220;
+  let yGap = 100;
+
+  // Test PRETTY and BALANCE with different alignments
+  for (let w = 0; w < wrapModes.length; w++) {
+    let mode = wrapModes[w];
+    let modeName = (mode === PRETTY) ? 'PRETTY' : 'BALANCE';
+
+    fill(0);
+    noStroke();
+    text(`textWrap(${modeName})`, xStart, yStart - 20);
+
+    for (let i = 0; i < vertAlignments.length; i++) {
+      for (let j = 0; j < alignments.length; j++) {
+        let x = xStart + j * xGap;
+        let y = yStart + i * yGap;
+
+        let horiz = alignments[j];
+        let vert = vertAlignments[i];
+
+        let horizName = (horiz === LEFT) ? 'LEFT' : (horiz === CENTER) ? 'CENTER' : 'RIGHT';
+        let vertName = (vert === BASELINE) ? 'BASELINE' : (vert === BOTTOM) ? 'BOTTOM' : (vert === CENTER) ? 'CENTER' : 'TOP';
+
+        stroke(255, 0, 0);
+        noFill();
+        rect(x, y, boxWidth, boxHeight);
+
+        noStroke();
+        fill(0);
+        textAlign(horiz, vert);
+        textWrap(mode);
+        text(`${horizName} ${vertName} ${sampleText}`, x, y, boxWidth, boxHeight);
+      }
+    }
+    yStart += 500;
+  }
+
+  // Test JUSTIFIED
+  fill(0);
+  noStroke();
+  text('textAlign(JUSTIFIED)', xStart, yStart - 20);
+
+  let justifiedText = 'This is a longer text that should be justified when it wraps to multiple lines. It should look clean and aligned on both sides.';
+
+  stroke(255, 0, 0);
+  noFill();
+  rect(xStart, yStart, boxWidth, boxHeight * 2);
+
+  noStroke();
+  fill(0);
+  textAlign(JUSTIFIED, TOP);
+  textWrap(WORD);
+  text(justifiedText, xStart, yStart, boxWidth, boxHeight * 2);
+
+  stroke(255, 0, 0);
+  noFill();
+  rect(xStart + xGap, yStart, boxWidth, boxHeight * 2);
+
+  noStroke();
+  fill(0);
+  textAlign(JUSTIFIED, TOP);
+  textWrap(PRETTY);
+  text(justifiedText, xStart + xGap, yStart, boxWidth, boxHeight * 2);
+
+  fill(0);
+  noStroke();
+  textAlign(LEFT, TOP);
+  text('WORD', xStart, yStart + boxHeight * 2 + 10);
+  text('PRETTY', xStart + xGap, yStart + boxHeight * 2 + 10);
+}