Underline Annotation in ASP.NET Core PDF Viewer

14 Aug 20267 minutes to read

This guide explains how to enable, apply, customize, and manage Underline text markup annotations in the Syncfusion ASP.NET Core PDF Viewer. You can underline text using the toolbar or context menu, programmatically invoke underline mode, customize default settings, handle events, and export the PDF with annotations.

Enable Underline in the Viewer

In the ASP.NET Core PDF Viewer, annotation modules such as Underline annotation are enabled by default.
This minimal setup enables UI interactions like selection and underlining.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>

Add Underline Annotation

Add Underline Using the Toolbar

  1. Select the text you want to underline.
  2. Click the Underline icon in the annotation toolbar.
    • If Pan Mode is active, the viewer automatically switches to Text Selection mode.

Underline tool

Apply underline using Context Menu

Right-click a selected text region → select Underline.

Underline Context

To customize menu items, refer to Customize Context Menu documentation.

Enable Underline Mode

Switch the viewer into underline mode using setAnnotationMode('Underline').

<script>
function enableUnderline() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('Underline');
}
</script>

Exit Underline Mode

Switch back to normal mode using:

<script>
function disableUnderlineMode() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}
</script>

Add Underline Programmatically

Use addAnnotation() to insert an underline at a specific location.

<script>
function addUnderline() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.annotation.addAnnotation('Underline', {
    bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
    pageNumber: 1
  });
}
</script>

Customize Underline Appearance

Configure default underline settings such as color, opacity, and author using underlineSettings.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>
<script>
window.onload = function () {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  viewer.underlineSettings = {
    author: 'Guest User',
    subject: 'Important',
    color: '#00aa00',
    opacity: 0.9
  };
}
</script>

Manage Underline (Edit, Delete, Comment)

Edit Underline

Edit Underline Appearance (UI)

Use the annotation toolbar:

  • Edit Color tool
    Edit color
  • Edit Opacity slider
    Edit opacity

Edit Underline Programmatically

Modify an existing underline programmatically using editAnnotation().

<script>
function editUnderlineProgrammatically() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  var coll = viewer.annotationCollection || [];
  for (var i=0;i<coll.length;i++){
    var annot = coll[i];
    if (annot.textMarkupAnnotationType === 'Underline') {
      annot.color = '#0000ff';
      annot.opacity = 0.8;
      viewer.annotation.editAnnotation(annot);
      break;
    }
  }
}
</script>

Delete Underline

The PDF Viewer supports deleting existing annotations through both the UI and API. For detailed behavior, supported deletion workflows, and API reference, see Delete Annotation.

Comments

Use the Comments panel to add, view, and reply to threaded discussions linked to underline annotations. It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation–related notes within the PDF Viewer.

Set properties while adding Individual Annotation

Set properties for individual annotations when adding them programmatically by supplying fields on each addAnnotation('Underline', …) call.

<script>
function addMultipleUnderlines() {
  var viewer = document.getElementById('pdfviewer').ej2_instances[0];
  // Underline 1
  viewer.annotation.addAnnotation('Underline', {
    bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
    pageNumber: 1,
    author: 'User 1',
    color: '#ffff00',
    opacity: 0.9
  });
  // Underline 2
  viewer.annotation.addAnnotation('Underline', {
    bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
    pageNumber: 1,
    author: 'User 2',
    color: '#ff1010',
    opacity: 0.9
  });
}
</script>

Disable TextMarkup Annotation

Disable text markup annotations (including underline) using the enableTextMarkupAnnotation property.

<div style="width:100%;height:650px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:650px"
                   enableTextMarkupAnnotation="false"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib">
    </ejs-pdfviewer>
</div>

Handle Underline Events

The PDF viewer provides annotation life-cycle events that notify when underline annotations are added, modified, selected, or removed. For the full list of available events and their descriptions, see Annotation Events.

Export and Import

The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer. For full details on supported formats and steps to export or import annotations, see Export and Import Annotation

See Also