> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/annotation/annotationmanager/annotation-alignment.md).

# Aligning annotations with Annotation Manager

Aligning annotations overview.

Starting in WebViewer version `10.10`, you can now align your annotations through a set of APIs. The `AnnotationManager` enables the alignment of annotations within the loaded document, taking into consideration the computed rotation of the current view. For instance, if the page is rotated by 90 degrees and the alignment of annotations is set to `Left`, the alignment will adjust based on what is considered Left with respect to the orientation of the page.

## How do we calculate alignments?

Alignment functions are based on the encompassing bounding box of the annotations passed into the respective Alignment API. After an Alignment API has been called, the annotation positions will be updated with respect to that bounding box.

## How to align through the UI

Alignment can be performed through the UI by selecting 2 or more `Annotations`. When the Annotation context menu appears, click the `Align` option. Then, from the `Align` options, select your desired `Alignment`.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-8dd180b52b7e71d04ff21b1123b3c555dc972252%2F0b0dc78a0895d2bdfd182ba68529d98ac055f00e-600x600.gif?alt=media)

Alignment being performed through the UI.

## Standard Alignments

The available options for standard alignments are Left, Right, Top, and Bottom. Alignments can be provided as a String, but the preferred approach is to utilize the Enum, `Core.annotationManager.Alignment.StandardAlignmentTypes`.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-f6564066e30ca8f8045db97bb0c689d2cce1da17%2Fdd71b44d7e0cef93653cbfa5843c27edf84f928e-400x352.gif?alt=media)

A sample left alignment.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

const { LEFT, RIGHT, TOP, BOTTOM } = instance.Core.annotationManager.Alignment.StandardAlignmentTypes;
// Select all of the Annotations on the page
const selectedAnnotations = annotationManager.getSelectedAnnotations();

if (selectedAnnotations) {
  // Align Annotations to the left
  annotationManager.Alignment.alignAnnotations(selectedAnnotations, LEFT);
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.Alignment.alignAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.Alignment.html#alignAnnotations__anchor) [StandardAlignmentTypes](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#.StandardAlignmentTypes)

## Center Alignments

The available options for center alignments are Center, Center Vertical, and Center Horizontal. Alignments can be provided as a String, but the preferred approach is to utilize the Enum, `Core.annotationManager.Alignment.CenterAlignmentTypes`.

Below is an example of center alignment:

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-c2b0cf1cf803e32a4f1596103367110f968a8b27%2F61a61af40870595e0c70e397e0a2acec3f4aaa0a-600x600.gif?alt=media)

Below is an example of center vertical alignment:

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-1dfbf99d659d716029dee9085babbb5fc57a9d02%2F2ca9d5722fae72216562a4ed48a02503a27ae0a3-600x600.gif?alt=media)

Below is an example of center horizontal alignment:

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-837a00970e98c22189edd8c3af2c983abcb9f5ef%2Fdadcfc7b1e33e7058427f3b9bfa850d2f5d80310-600x600.gif?alt=media)

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

const { CENTER_VERTICAL, CENTER_HORIZONTAL, CENTER } = instance.Core.annotationManager.Alignment.CenterAlignmentTypes;
// Select all of the Annotations on the page
const selectedAnnotations = annotationManager.getSelectedAnnotations();

if (selectedAnnotations) {
  // Center Annotations Vertically
  annotationManager.Alignment.centerAnnotations(selectedAnnotations, CENTER_VERTICAL);
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.Alignment.centerAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.Alignment.html#centerAnnotations__anchor) [CenterAlignmentTypes](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#.CenterAlignmentTypes)

## Distribution Alignments

Distributions work by utilizing the allotted space of the bounding box from the selected annotations, ensuring even spacing between each annotation. This results in the axis of the bounding box being completely utilized. The available options for distribute alignments are Horizontal and Vertical. Alignments can be provided as a String, but the preferred approach is to utilize the Enum, Core.annotationManager.Alignment.DistributeAlignmentTypes.

Below is an example of vertical distribution:

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-c74c175ff436b5ef78767dd8a10affbd163e3b51%2F7b3d744a25ac9599295548d178f71aebe0548ba1-600x600.gif?alt=media)

Below is an example of horizontal distribution:

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-03b5d981442c80d4fd50d4f8fe51ae1984a05327%2Fc999bcc59666099bc9e6e1b48bac9d2378ad3ee5-600x600.gif?alt=media)

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const { annotationManager } = instance.Core;

const { DISTRIBUTE_VERTICAL, DISTRIBUTE_HORIZONTAL } = instance.Core.annotationManager.Alignment.DistributeAlignmentTypes;
// Select all of the Annotations on the page
const selectedAnnotations = annotationManager.getSelectedAnnotations();

if (selectedAnnotations) {
  // Distribute annotations vertically
  annotationManager.Alignment.distributeAnnotations(selectedAnnotations, DISTRIBUTE_VERTICAL);
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

[AnnotationManager.Alignment.distributeAnnotations](https://sdk.apryse.com/api/web/Core.AnnotationManager.Alignment.html#distributeAnnotations__anchor) [DistributeAlignmentTypes](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#.DistributeAlignmentTypes)

## Invalid Annotations

### TextMarkup Annotations

Most types of annotations can be aligned, except those in the `Core.Annotations.TextMarkupAnnotation` family. These annotations are tied directly to the text characters they are associated with. Therefore, if a set of annotations includes any from the `TextMarkupAnnotation` category, these specific annotations will be filtered out prior to the alignment process. The remaining annotations will still undergo alignment and be adjusted accordingly.

* Highlight
* Underline
* Strikeout
* Squiggly

### NoMove Annotations

Another exception to alignment involves annotations with the `NoMove` property set to `True`. These annotations are explicitly configured to restrict movement. Therefore, if an alignment function is invoked with an annotation that has `NoMove` set to `True`, this Annotation will be omitted from the alignment calculation.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/annotation/annotationmanager/annotation-alignment.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.