Pptxgenjs: Rotate working incorrectly

[michaelcbrook]

When I rotate text, it becomes skewed on LibreOffice, and in MS Office, it gets rotated completely in a different direction. I've checked that I'm doing it right, but not getting the expected result.

The expected result:

The actual result (in LibreOffice):

Can also provide a screenshot with MS Office if necessary. Just cumbersome for me to get it.

Thank you!

[gitbrent]

Hi @michaelcbrook

What code are you using and can you provide a screenshot of the expected result in PPT?

[michaelcbrook]

Yes, you can duplicate the issue with the code below (I automatically generate these measurements):

const pptx = new PptxGenJS();

const slide = pptx.addNewSlide();

slide.addText("This is a test This is a test This is a test", {
  w: 3.915895061728395,
  h: 0.2022839506172839,
  x: 3.76929012345679,
  y: 4.322916666666667,
  rotate: 306,
  align: 'center',
  fontSize: 12.888888888888888,
  isTextBox: true,
  inset: 0,
  margin: 0,
  valign: 'middle'
});

//send file to output
pptx.save("https", (data) => {
  const headers = {
    'Content-Type': 'application/vnd.openxmlformats',
    'Content-Disposition': 'attachment; filename=Test.pptx',
    'Content-Length': data.length
  };
  res.writeHead(200, headers);
  res.end(new Buffer(data, "binary"));
});

Expected output:

Actual output (using MS Office PowerPoint):

Actual output (using LibreOffice):

I'm using the 2010 version of MS Office PowerPoint here, but I've verified with a colleague that the same result happens on more recent versions of PowerPoint.

[gitbrent]

Thanks @michaelcbrook !

The incorrect rotation angle issue has been fixed in the current codebase. This also should fix the skewing you reported in LibreOffice. Let me know if that issue persists.

[michaelcbrook]

Awesome. Thank you! Any chance you could push this change to NPM also? I haven't tested the new change yet since I'm still trying to use the NPM package.

[gitbrent]

Sure, it'll be in the upcoming 2.3.0 release.

[michaelcbrook]

Hate to open this back up, but it looks like this issue isn't totally resolved. The angle of the rotated text seems right, but its position is not. The same code given above results in the text starting off the page.

Should be more or less centered on the page:

The code again:

const pptx = new PptxGenJS();

const slide = pptx.addNewSlide();

slide.addText("This is a test This is a test This is a test", {
  w: 3.915895061728395,
  h: 0.2022839506172839,
  x: 3.76929012345679,
  y: 4.322916666666667,
  rotate: 306,
  align: 'center',
  fontSize: 12.888888888888888,
  isTextBox: true,
  inset: 0,
  margin: 0,
  valign: 'middle'
});

//send file to output
pptx.save("https", (data) => {
  const headers = {
    'Content-Type': 'application/vnd.openxmlformats',
    'Content-Disposition': 'attachment; filename=Test.pptx',
    'Content-Length': data.length
  };
  res.writeHead(200, headers);
  res.end(new Buffer(data, "binary"));
});

I appreciate your help with this!

[gitbrent]

Hi @michaelcbrook

Your example comes out correctly using the latest build (2.3.0-beta.20180706).

var pptx = new PptxGenJS();
pptx.setLayout('LAYOUT_WIDE');
var slide = pptx.addNewSlide();

slide.addText("This is a test This is a test This is a test", {
  w: 3.915895061728395,
  h: 0.2022839506172839,
  x: 3.76929012345679,
  y: 4.322916666666667,
  rotate: 306,
  align: 'center',
  fontSize: 12.888888888888888,
  isTextBox: true,
  inset: 0,
  margin: 0,
  valign: 'middle'
});

Result:

[michaelcbrook]

I'm afraid it doesn't because your code is different. You've added pptx.setLayout('LAYOUT_WIDE'); If you remove that part, it comes out like mine.

I've essentially created a script that translates object properties drawn in a canvas into PPT objects using this library. My first inclination is that maybe I got the translation wrong, but everything else aligns perfectly, except for rotated objects. Rotated images don't work at all.

Expected output:

Actual output:

It's difficult to post all the code, but here are the object properties for the rotated text element:

{ w: 2.797067901234568,
 h: 0.2022839506172839,
 x: 5.44753086419753,
 y: 4.099151234567901,
 rotate: 270,
 align: 'center',
 bold: false,
 color: '181818',
 fontFace: 'Open Sans',
 fontSize: 12.888888888888888,
 isTextBox: true,
 italic: false,
 underline: false,
 inset: 0,
 margin: 0,
 valign: 'middle' }

And canvas is set to size: LAYOUT_16x9

I hope this helps, and thank you!

[ACPrice]

I think this issue does need to be reopened, unfortunately. I'm seeing the same (incorrect) rotation behavior. I'm on 2.5.0. Also: thanks for the very useful library!

I'm adding a slide like so:

slide.addText('Text Here', {
      shape: pptx.shapes.RECTANGLE,
      x: 0,
      y: 0,
      w: 5,
      h: 5,
      align: 'left',
      valign: 'top',
      line: '000000',
      line_size: 1,
      font_size: fontSize,
      rotate: -90
})

One other note: I'm setting the layout _after_ adding several slides. I'm not sure if setting layout after adding a rotated slide is a possible issue.

If useful, I can provide actual output, but it's similar to @michaelcbrook. The text is rotated, but into the wrong position. It's doesn't seem to be rotating about the center of the text box nor about any other obvious point (i.e. top left corner of box).

[ACPrice]

@gitbrent Thanks again for the fantastic repo. I'm curious if this issue is likely to get another look in the foreseeable future. Trying to figure out if I should implement a workaround on a project.

[gitbrent]

Hi @ACPrice

There must be something about your process flow that is causing this as normal test cases work correctly.

Regarding the Aug 2018 comment, whether setLayout is used or not the result is a rotated object at 306*

Your current code works as well - resulting in an object rotated -90*