parallax/jsPDF

Text centers incorrectly with nonzero charSpace

Open

#3406 opened on Apr 7, 2022

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (28,280 stars) (4,596 forks)batch import
Bugdifficulty:mediumhelp wanted

Description

let pdf = new jspdf.jsPDF();
let page_height = pdf.internal.pageSize.getHeight();
let page_width = pdf.internal.pageSize.getWidth(); 
let x_center = page_width / 2;
let y1 = page_height / 3;
let y2 = y1 + 12;
let y3 = y1 + 24;
let txt = "The quick brown fox jumps over the lazy dog."; 

pdf.text(txt, x_center, y1, { align: 'center', charSpace: 0 });
pdf.text(txt, x_center, y2, { align: 'center', charSpace: -1 });
pdf.text(txt, x_center, y3, { align: 'center', charSpace: 1 });

pdf.save('charspace_bug.pdf');

Expectation: All lines are centered around x_center.

Result: Only the { charSpace: 0 } line is centered. Other lines are left-aligned to that line's left edge.

Hypothesis: jsPDF calculates the starting coordinate before the charSpace transformation is applied?

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptjsPDF text alignmentPDF coordinate systemgeometry of text positioning
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the jsPDF source code, specifically the text drawing functions (likely in src/libs/text.js or similar). Focus on how the align option is calculated and how charSpace modifies the x coordinate. The hypothesis suggests that the starting coordinate is computed before applying charSpace, so verifying the order of operations is crucial. Check if there are any existing test cases for text alignment with charSpace.