p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

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

Open Vansh0204 opened this issue 1 month ago • 4 comments

PR 1

  • Adds textAlign(JUSTIFIED) support in the 2D renderer for bounded text(...) .
  • Distributes inter-word spacing to fill maxWidth on non-final lines; final line remains ragged.
  • Canvas2D maps JUSTIFIED to LEFT internally; WEBGL remains left-aligned for now.
  • Lint/build pass locally. Follow-up PR will add textWrap(PRETTY) and BALANCE .

Addresses #7712

Vansh0204 avatar Nov 25 '25 21:11 Vansh0204

@Vansh0204 have you created tests for this feature?

dhowe avatar Nov 27 '25 18:11 dhowe

Thanks for reviewing, sir! I haven't added tests yet – I'll add comprehensive unit tests for JUSTIFIED alignment in the 2D renderer covering inter-word spacing distribution and edge cases. I'll push them shortly.

Vansh0204 avatar Nov 28 '25 06:11 Vansh0204

a good place to start would be the alignment tests in https://github.com/processing/p5.js/blob/dev-2.0/test/manual-test-examples/type/index.html

image

eventually we will also need pixel-based tests like those here: https://github.com/processing/p5.js/blob/dev-2.0/test/unit/visual/cases/typography.js

dhowe avatar Nov 28 '25 18:11 dhowe

Hi @dhowe, sir! I've updated the PRs to include the necessary tests. Screenshot 2025-12-01 at 12 05 08 AM

Vansh0204 avatar Nov 30 '25 19:11 Vansh0204