diff --git a/src/type/textCore.js b/src/type/textCore.js index 11c863d650..9519b5495b 100644 --- a/src/type/textCore.js +++ b/src/type/textCore.js @@ -755,6 +755,9 @@ function textCore(p5, fn) { * * For example, if the text contains multiple lines due to wrapping or explicit line breaks, textWidth() * will return the width of the longest line. + * + * **Note:** In p5.js 2.0+, leading and trailing spaces are ignored. + * `textWidth(" Hello ")` returns the same width as `textWidth("Hello")`. * * @method textWidth * @for p5 @@ -821,6 +824,48 @@ function textCore(p5, fn) { *
* function setup() {
+ * createCanvas(200, 160);
+ * background(235);
+ * noLoop();
+ *
+ * textSize(18);
+ * textAlign(LEFT, TOP);
+ *
+ * const x = 12, h = 24;
+ * const s1 = 'Hello';
+ * const s2 = 'Hello '; // 2 trailing spaces
+ * const s3 = 'Hello '; // many trailing spaces
+ *
+ * // draw text
+ * fill(0);
+ * text(s1, x, 12);
+ * text(s2, x, 56);
+ * text(s3, x, 100);
+ *
+ * // measure and draw tight boxes (all same width)
+ * noFill(); stroke(255, 0, 0);
+ * const w1 = textWidth(s1);
+ * const w2 = textWidth(s2);
+ * const w3 = textWidth(s3);
+ * rect(x, 10, w1, h);
+ * rect(x, 54, w2, h);
+ * rect(x, 98, w3, h);
+ *
+ * // small captions show the actual strings (spaces as ·)
+ * textSize(10); noStroke(); fill(30);
+ * text('"' + s1.replace(/ /g, '·') + '" w=' + w1.toFixed(1), x, 10 + h + 2);
+ * text('"' + s2.replace(/ /g, '·') + '" w=' + w2.toFixed(1), x, 54 + h + 2);
+ * text('"' + s3.replace(/ /g, '·') + '" w=' + w3.toFixed(1), x, 98 + h + 2);
+ *
+ * describe('Three lines: Hello with 0, 2, and many trailing spaces. Red boxes use textWidth and are identical. Captions show spaces as dots.');
+ * }
+ *
+ *
+ * function setup() {
* createCanvas(100, 100);
*
* background(200);
diff --git a/test/unit/type/attributes.js b/test/unit/type/attributes.js
index 01d9a39551..c6b1f26697 100644
--- a/test/unit/type/attributes.js
+++ b/test/unit/type/attributes.js
@@ -50,6 +50,10 @@ suite('Typography Attributes', function() {
test('should return a number for number input', function() {
assert.isNumber(myp5.textWidth(100));
});
+ test('should ignore leading and trailing spaces', function() {
+ assert.strictEqual(myp5.textWidth(' Hello '), myp5.textWidth('Hello'));
+ assert.strictEqual(myp5.textWidth(' Hello '), myp5.textWidth('Hello'));
+ });
});
suite('textAscent', function() {