Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
Vansh0204 wants to merge4 commits intoprocessing:main
base:main
Choose a base branch
Loading
fromVansh0204:feat/justified-align-pr1
Open
Show file tree
Hide file tree
Changes from1 commit
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
NextNext commit
feat(typography): add JUSTIFIED alignment for bounded text in 2D rend…
…erer- Justifies non-final lines in bounded text()- Keeps final line ragged- Maps Canvas2D textAlign to LEFT when JUSTIFIED is set- WEBGL remains left-aligned for nowRefs#7712
  • Loading branch information
@Vansh0204
Vansh0204 committedNov 27, 2025
commit05aa09ae48f8fe43f7198a1fdb7e4cd82a1fcf58
1 change: 1 addition & 0 deletionssrc/core/constants.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1058,6 +1058,7 @@ export const WORD = 'WORD';
export const _DEFAULT_TEXT_FILL = '#000000';
export const _DEFAULT_LEADMULT = 1.25;
export const _CTX_MIDDLE = 'middle';
export const JUSTIFIED = 'justified';

// VERTICES
/**
Expand Down
12 changes: 12 additions & 0 deletionssrc/core/p5.Renderer.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
Expand DownExpand Up@@ -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(),
Expand All@@ -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(),
Expand All@@ -373,6 +383,7 @@ class Renderer extends p5.Element {
finalMaxHeight,
finalMinHeight
);
this._justifyActive = false;
y += p.textLeading();
}
} else {
Expand DownExpand Up@@ -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],
Expand Down
41 changes: 39 additions & 2 deletionssrc/core/p5.Renderer2D.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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) {
Expand DownExpand Up@@ -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 {
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp