Document Solutions for PDF
Document Solutions PDF Viewer Overview / Edit PDF / Features / Align
In This Topic
    Align
    In This Topic

    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' });