Rotate PDF Fields in Adobe Acrobat Using JavaScript

Have you tried to rotate a field in a PDF form after it was created in Acrobat? If so, you may have scratched your head a bit.

Before we get to the how, let’s first talk about the why: When you have two different documents, one having a page rotation of 0 degrees, and the second one with a page rotation of 90 degrees (or, two different pages in the same document with different page rotations), and you copy a form field from one page to a page with a different page rotation, the form field will be rotated, and you will have to rotate it back in order to get the correct alignment and orientation. When you now try to rotate this field by setting it’s rotation property, you will very likely end up with something that looks nothing like what you expected (that is, if you’ve selected a rotation of 90 or 270 degrees, with 180 degrees things will look OK without having to do anything else).

Here is what happens when you do that:

The original form fields:

Screen shot showing differnet form field types (text box, button, dropdown and list control) in their unrotated state.

And the same after the fields are rotated by 90 degrees:

Screen shot showing the same form fields as before, but after a 90 degree rotation was applied, the content is rotated, but the fields are still in the same location as before, and have the same size. This means that the content is cut off.

It’s pretty obvious that there is something wrong here: The only thing that was rotated is the form field content, but the field’s location, width and height are the same as before. When we take a step back and look at how a rotated form field is placed in a form, that makes sense: We would first draw the outline of e.g. a text field, and that would very likely be taller than it’s wide:

Screen shot of a text field that is taller than it's wide

And, in a second step, you would then change the rotation of the field on it’s properties dialog:

Screen shot of a field properties dialog with the field rotation set to 90 degrees

This will then result in correctly aligned text in that text field. That is different when we have a text field that is meant for horizontal text, and then we rotate the field content as we’ve done in the first example. To make this work, we have to both rotate the field content (easily done by setting the rotation property) and we have to resize the field, which is a bit more complicated.

The first thing we have to decide is which corner of the field should stay where it is, which in turn identifies the three corners that need to change their location. In the following example, I skip this problem, it does add some complexity to the solution. For now, you would have to move the rotated form field into place manually – which is much simpler to do, compared with having to resize the field by hand and then setting the rotation flag. You can use this code as a custom command, or just run it in the JavaScript console. If you do run the code in the console, it’s very easy to run it four times and loop through the four different field rotations of 0, 90, 180 and 270 degrees.

for (var i = 0; i < this.numFields; i++) {
	var theName = this.getNthFieldName(i);
	var f = this.getField(theName);
	var rect = f.rect;
	var rot = f.rotation;

	var upperLeftX = rect[0];
	var upperLeftY = rect[1];
	var lowerRightX = rect[2];
	var lowerRightY = rect[3];

	rect[0] = upperLeftY;
	rect[1] = upperLeftX;
	rect[2] = lowerRightY;
	rect[3] = lowerRightX;

	f.rect = rect;
	rot = rot + 90;
	if (rot >= 360) {
		rot = rot - 360;
	f.rotation = rot;

The snippet first gets the currently set rotation (which may not be 0 degrees), and then applies a 90 degree rotation to whatever it found. In addition to that, it also swaps coordinate components. This is where you would need to make an adjustment for keeping one of the field corners constant.

There are of course no limits in how you can improve this snippet. The number one priority would probably be to keep the rotated field in the same area as the original field. You can also add some logic to only rotate certain fields by checking the field names again e.g. an array of fields to rotate. You can filter by field type and e.g. only rotate text fields and dropdown controls.

This entry was posted in Acrobat, JavaScript, PDF, Tutorial. Bookmark the permalink.

5 Responses to Rotate PDF Fields in Adobe Acrobat Using JavaScript

  1. krishan kumar says:

    I create a PDF file but more problem

  2. Karl Heinz Kremer says:

    Krishan, unfortunately I have no idea what you mean by your comment.

  3. Alan says:

    Hi Karl,
    I am scratching the surface of js and acrobat-js integration.
    when I ran your code in the acrobat pro dc js-debugger, i got an error:

    SyntaxError: syntax error

    somehow, my debugger doesn’t like the for-loop syntax. any idea why?

  4. JRB says:

    Great snippet.
    Thank you for sharing.

  5. Karl Heinz Kremer says:

    Alan, do you know how to execute a block of code in the JavaScript console? You need to select the whole block and then use the correct keys (depending on whether you are on a Mac or a windows computer) to execute it. Is that what you are doing?

Leave a Reply

Your email address will not be published. Required fields are marked *