Document Solutions PDF Viewer Overview / Edit PDF / Features / Align
Align

DsPdfViewer allows you to align annotations and form fields with each other. The snap alignment feature, which is enabled by default, can be used to align fields to the left, top, right, center or bottom edge.

For example, consider a PDF document containing an annotation or a form field and a new one is also added. While moving or resizing the new field, a dashed line will appear when it approaches the existing field's edge or center point. It indicates the alignment of new field with respect to existing field.

Align annotations or form fields in PDF Viewer

Margin

Apart from aligning the fields, DsPdfViewer allows you to define margins by using snap margin feature. These margins are the extra spaces before or after the edge of a field or page. The default margin between two elements or page edges is 10 points.

Set margins for annotations or form fields in PDF Viewer

Using Keyboard Shortcuts

You can also fine tune the location and size of fields annotation and form fields by using keyboard shortcuts:

Note: Alt key temporarily disables the Snap alignment feature during resize or move action.

Using Code

You can disable or customize snap alignment feature by using snapAlignment option in API.

The full specification for snapAlignment option is:

Index.cshtml
Copy Code
snapAlignment: true | false |
    {
        tolerance: number | { horizontal: number | false, vertical: number | false },
        margin: false | true | number | { horizontal: number | boolean, vertical: number | boolean },
        center: false | true | { horizontal: boolean, vertical: boolean },
    }

The description of above settings:

By default, snap tolerance is 5 points, snap margin is 10 points, snap to center is true.

The tolerance value of snap alignment feature can be set by using below code:
Index.cshtml
Copy Code
var viewer = new DsPdfViewer("#root", { snapAlignment: { tolerance: 25 }, supportApi: 'api/pdf-viewer' });

The tolerance value of vertical and horizontal alignment can be set separately by using below code:
Index.cshtml
Copy Code
var viewer = new DsPdfViewer("#root", { snapAlignment: { tolerance: { vertical: 10, horizontal: 50 } }, supportApi: 'api/pdf-viewer' });

The snap alignment feature to the center of an element can be disabled by using below code:
Index.cshtml
Copy Code
var viewer = new DsPdfViewer("#root", { snapAlignment: { center: false }, supportApi: 'api/pdf-viewer' });

The snap alignment feature to the center of an element for vertical alignment can be enabled by using below code:
Index.cshtml
Copy Code
var viewer = new DsPdfViewer("#root", { snapAlignment: { center: { vertical: true, horizontal: false, } }, supportApi: 'api/pdf-viewer' });

The snap alignment feature can be disabled by using below code:
Index.cshtml
Copy Code
var viewer = new DsPdfViewer("#root", { snapAlignment: false, supportApi: 'api/pdf-viewer' });
The horizontal snap margin can be disabled and vertical snap margin value can be set by using below code:
Index.cshtml
Copy Code
var viewer = new DsPdfViewer("#root", { snapAlignment: { margin: { vertical: 50, horizontal: false }, supportApi: 'api/pdf-viewer' } });

The horizontal alignment can be disabled by using below code:
Index.cshtml
Copy Code
var viewer = new DsPdfViewer("#root", { snapAlignment: { tolerance: { horizontal: false } }, supportApi: 'api/pdf-viewer' });