parallax/jsPDF

Centering a multiline rotated text isn't working

Open

#3206 opened on Jul 9, 2021

View on GitHub
 (6 comments) (1 reaction) (0 assignees)JavaScript (28,280 stars) (4,596 forks)batch import
Bugdifficulty:mediumhacktoberfesthelp wanted

Description

Hi,

In an Ionic/Angular app, I have a multiline text that is rotated with 45 degree, and when the text has the property align: 'left', the export is working fine. But once I change this property to align: 'center', the result is inappropriate, and the second line of the text moves to the very bottom-left corner of the page.

This is a stackblitz example, where the text has the property align: 'center', and rotated with 45 degree.

Please note that:

  • The same problem happens when the alignment is set to right.
  • With non rotated text, everything works fine, whatever the value of align is.
  • In my example I am using the version 2.2.0 of jspdf since 2.3.1 isn't working on stackblitz. But in my development environment I am using 2.3.1, and I am facing the same problem.

Thanks!

Contributor guide

Tech stack
javascript
Domain
frontendapi
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
Understanding of PDF text layoutFamiliarity with jsPDF text API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Investigate how rotation transforms are applied to text position calculations for multi line text with center alignment. Look at the code in source files (e.g., src/modules/Text.js) responsible for computing text offsets when both rotation and alignment are set. Use the provided StackBlitz example to reproduce the bug and trace the coordinate calculations.