parallax / jsPDF

Client-side JavaScript PDF generation for everyone.
https://parall.ax/products/jspdf
MIT License
29.28k stars 4.67k forks source link

Text centers incorrectly with nonzero charSpace #3406

Open avelican opened 2 years ago

avelican commented 2 years ago
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?

avelican commented 2 years ago

Attempted to work around this manually with pdf.getStringUnitWidth(); and discovered that this function always returns the same value regardless of the charSpace given:

pdf.getStringUnitWidth("hello there", { charSpace: 0 }); // gives 4.63
pdf.getStringUnitWidth("hello there", { charSpace: 1 }); // gives 4.63
avelican commented 2 years ago

Added a workaround to my print function:

if(options.align == 'center'){
    let x_coord = page_center_x;
    // workaround for charspace alignment bug
    if(options.charSpace && options.charSpace != 0){
        let adjustment = options.charSpace * pdf.getStringUnitWidth(text);
        pdf.text(text, x_coord - adjustment, y_coord, options);
    }else{
        pdf.text(text, x_coord, y_coord, options);
    }
}

Arrived at this through trial and error and with a little help from WolframAlpha's formula simplification feature :)

HackbrettXXX commented 2 years ago

Thanks for the report. Could you prepare a pull request?