Rich Text in PDF Annotations Using JavaScript

Rich text editing is supported for text annotations.

When you paste rich text into an annotation from an external source, in some cases, the text in the annotation might not visually match the external source. We constantly aim to improve this feature. If you encounter any issues, please contact our Support team.

Rich text editing in text annotations means that you can select parts of an annotation’s text and do the following:

Make it bold, italic, or underlined.
Change the color and the background color.

Enabling Rich Text Editing in Annotations

Rich text editing in annotations is disabled by default. To enable rich text editing, use the enableRichText property when loading PSPDFKit:

PSPDFKit.load({
  ...configuration,
  enableRichText: () => true
});

Creating a Rich Text Annotation

The code below creates a new text annotation with rich text content:

PSPDFKit.load({
  ...configuration,
  enableRichText: () => true
}).then(async (instance) => {
  const newAnnotation = new PSPDFKit.Annotations.TextAnnotation({
    pageIndex: 0,
    boundingBox: new PSPDFKit.Geometry.Rect({
      left: 100,
      top: 200,
      width: 150,
      height: 75
    }),
    text: {
      format: "xhtml",
      value: "<p>Welcome to <b><i>PSPDFKit</i></b></p>"
    }
  });
  instance.create(newAnnotation);
});

Use valid XHTML syntax in rich text annotations. For example, always wrap blocks of text in p tags.

Supported HTML tags

You can use the following tags in rich text annotations:

 Bold
<body> Body
<html> HTML
 Italic
 Span. Use this tag to set the font color, background color, and underline using the style attribute — for example, Hello.
 Paragraph. Use this tag for blocks of text and to add empty lines between paragraphs.

Annotation-Level Text Configuration

Irrespective of whether rich text editing in annotations is enabled or disabled, you can only configure the following for the whole of a text annotation and not parts of the text:

Alignment
Font size
Font type