feat(typography): add JUSTIFIED horizontal alignment for bounded text in 2D renderer

src/core/constants.js

@@ -1053,11 +1053,22 @@ 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';
 export const _DEFAULT_LEADMULT = 1.25;
 export const _CTX_MIDDLE = 'middle';
+export const JUSTIFIED = 'justified';
 
 // VERTICES
 /**

src/core/p5.Renderer.js

@@ -49,6 +49,9 @@ class Renderer extends p5.Element {
     this._textAlign = constants.LEFT;
     this._textBaseline = constants.BASELINE;
     this._textWrap = constants.WORD;
+    this._justifyActive = false;
+    this._justifyWidth = 0;
+    this._justifyIsLastLine = false;
 
     this._rectMode = constants.CORNER;
     this._ellipseMode = constants.CENTER;
@@ -351,6 +354,9 @@ class Renderer extends p5.Element {
             testLine = `${line + words[wordIndex]}` + ' ';
             testWidth = this.textWidth(testLine);
             if (testWidth > maxWidth && line.length > 0) {
+              this._justifyActive = this._textAlign === constants.JUSTIFIED;
+              this._justifyWidth = maxWidth;
+              this._justifyIsLastLine = false;
               this._renderText(
                 p,
                 line.trim(),
@@ -359,12 +365,16 @@ class Renderer extends p5.Element {
                 finalMaxHeight,
                 finalMinHeight
               );
+              this._justifyActive = false;
               line = `${words[wordIndex]}` + ' ';
               y += p.textLeading();
             } else {
               line = testLine;
             }
           }
+          this._justifyActive = this._textAlign === constants.JUSTIFIED;
+          this._justifyWidth = maxWidth;
+          this._justifyIsLastLine = true;
           this._renderText(
             p,
             line.trim(),
@@ -373,6 +383,7 @@ class Renderer extends p5.Element {
             finalMaxHeight,
             finalMinHeight
           );
+          this._justifyActive = false;
           y += p.textLeading();
         }
       } else {
@@ -446,6 +457,7 @@ class Renderer extends p5.Element {
 
       // Renders lines of text at any line breaks present in the original string
       for (let i = 0; i < lines.length; i++) {
+        this._justifyActive = false;
         this._renderText(
           p,
           lines[i],

src/core/p5.Renderer2D.js

@@ -1217,7 +1217,41 @@ class Renderer2D extends p5.Renderer {
     p.push(); // fix to #803
 
     if (!this._isOpenType()) {
-      // a system/browser font
+      if (
+        this._textAlign === constants.JUSTIFIED &&
+        this._justifyActive &&
+        !this._justifyIsLastLine &&
+        this._justifyWidth > 0
+      ) {
+        const words = line.split(/\s+/).filter(s => s.length > 0);
+        if (words.length > 1) {
+          const widths = words.map(s => this.textWidth(s));
+          const sum = widths.reduce((a, b) => a + b, 0);
+          const extra = this._justifyWidth - sum;
+          if (extra > 0) {
+            const gap = extra / (words.length - 1);
+            let cx = x;
+            if (this._doStroke && this._strokeSet) {
+              for (let i = 0; i < words.length; i++) {
+                this.drawingContext.strokeText(words[i], cx, y);
+                cx += widths[i] + (i < words.length - 1 ? gap : 0);
+              }
+            }
+            cx = x;
+            if (!this._clipping && this._doFill) {
+              if (!this._fillSet) {
+                this._setFill(constants._DEFAULT_TEXT_FILL);
+              }
+              for (let i = 0; i < words.length; i++) {
+                this.drawingContext.fillText(words[i], cx, y);
+                cx += widths[i] + (i < words.length - 1 ? gap : 0);
+              }
+            }
+            p.pop();
+            return p;
+          }
+        }
+      }
 
       // no stroke unless specified by user
       if (this._doStroke && this._strokeSet) {
@@ -1272,7 +1306,10 @@ class Renderer2D extends p5.Renderer {
     this.drawingContext.font = `${this._textStyle || 'normal'} ${this._textSize ||
       12}px ${fontNameString}`;
 
-    this.drawingContext.textAlign = this._textAlign;
+    const _ta = this._textAlign === constants.JUSTIFIED
+      ? constants.LEFT
+      : this._textAlign;
+    this.drawingContext.textAlign = _ta;
     if (this._textBaseline === constants.CENTER) {
       this.drawingContext.textBaseline = constants._CTX_MIDDLE;
     } else {

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>

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);
+}

test/unit/visual/cases/typography.js

@@ -17,4 +17,46 @@ visualSuite('Typography', function() {
       screenshot();
     });
   });
+
+  visualSuite('JUSTIFIED alignment', function() {
+    visualTest('WORD wrap justified non-final lines', function (p5, screenshot) {
+      p5.createCanvas(300, 160);
+      p5.textSize(16);
+      p5.textAlign(p5.JUSTIFIED, p5.TOP);
+      p5.textWrap(p5.WORD);
+      const s = 'This is a line of text that should justify on non-final lines.';
+      p5.text(s, 10, 10, 280, 140);
+      screenshot();
+    });
+  });
+
+  visualSuite('PRETTY/BALANCE wrap', function() {
+    visualTest('PRETTY wrap LEFT', function (p5, screenshot) {
+      p5.createCanvas(300, 160);
+      p5.textSize(16);
+      p5.textAlign(p5.LEFT, p5.TOP);
+      p5.textWrap(p5.PRETTY);
+      const s = 'Balanced wrapping aims to reduce raggedness of lines.';
+      p5.text(s, 10, 10, 280, 140);
+      screenshot();
+    });
+    visualTest('BALANCE wrap RIGHT', function (p5, screenshot) {
+      p5.createCanvas(300, 160);
+      p5.textSize(16);
+      p5.textAlign(p5.RIGHT, p5.TOP);
+      p5.textWrap(p5.BALANCE);
+      const s = 'Balanced wrapping aims to reduce raggedness of lines.';
+      p5.text(s, 290, 10, 280, 140);
+      screenshot();
+    });
+    visualTest('PRETTY wrap with JUSTIFIED', function (p5, screenshot) {
+      p5.createCanvas(300, 160);
+      p5.textSize(16);
+      p5.textAlign(p5.JUSTIFIED, p5.TOP);
+      p5.textWrap(p5.PRETTY);
+      const s = 'Pretty wrapping combined with justification for non-final lines.';
+      p5.text(s, 10, 10, 280, 140);
+      screenshot();
+    });
+  });
 });