I'm using JsPDF to generate some documents. I need a piece of text to be rotated 180. It has a max width so it's multiple lines. It also needs to be center aligned.

Currently i'm doing this:

doc.text(description, x, y, {
 angle: 180,
 maxWidth: 80,
 align: 'center',
});

The result is that only the first line of text gets rendered on the PDF. All the other lines don't appear.

Does anyone know how to fix this?

I'm using JsPDF to generate some documents. I need a piece of text to be rotated 180. It has a max width so it's multiple lines. It also needs to be center aligned.

Currently i'm doing this:

doc.text(description, x, y, {
 angle: 180,
 maxWidth: 80,
 align: 'center',
});

The result is that only the first line of text gets rendered on the PDF. All the other lines don't appear.

Does anyone know how to fix this?

• javascript
• html
• css
• typescript
• jspdf

1 Answer 1

This is a known problem that multiline cannot work with both angle and alignment thus the angled lines are set to their default left if rotated.

We can see that in this example, where the single line is centred but the multiple line is "left set"

var doc = new jsPDF()
, lines
, description = 
'Lorem ipsum dolor sit amet,... Lorem ipsum,'
+'                Lorem ipsum dolor sit amet,...            '
+'                Lorem ipsum dolor sit amet,...            '
+'                Lorem ipsum dolor sit amet,...            '
+' Lorem ipsum dolor sit amet,... Lorem ipsum dolor sit amet, ... Lorem ipsum dolor sit amet, ...'

lines =  doc.setFont('Times','Italic')
            .setFontSize(12)
            .splitTextToSize(description, 80)

doc.text(lines, 150, 50, {
 angle: 180,
});
doc.line(150,60,150,10);
doc.text("Hello again", 150, 60, null , "center", 10);