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

Dynamic Font Loading

Nutrient Web SDK introduces a powerful dynamic font loading mechanism that allows you to dynamically load fonts when users enter text containing characters not supported by available fonts. This feature ensures that text is correctly displayed, even when the user’s language and character set aren’t known in advance. This feature can improve the rendered result in a number of use cases:

Office-to-PDF or PDF-to-Office conversions — Office or PDF documents frequently use fonts that aren’t available to the SDK. With dynamic font loading, Nutrient Web SDK can fetch the necessary fonts to render the document text with closer fidelity.
Text annotations — Text annotations can use non-standard fonts to render the text — a common use case which can now be automatically handled by making use of dynamically loaded fonts.
PDF forms — Similar to text annotations, form fields may also use fonts that the SDK doesn’t include by default. When dynamic font loading is used, we can ensure those forms will be correctly rendered.

To leverage dynamic font loading, provide a list of fonts in a JSON file, which will be loaded on demand.

Default fonts bundle

To use this feature, we provide a default, ready-to-use dynamic fonts bundle. Follow the steps below.

Extract the compressed file into a public folder accessible to your application, preferably in the same folder as the application so as to avoid CORS issues.
Set the dynamicFonts property in the configuration object passed to PSPDFKit.load() to a URL pointing to the JSON file with the dynamic fonts data as shown below:

PSPDFKit.load({
  ...configuration,
  dynamicFonts: "https://example.com/path/to/fonts.json"
});

The fonts.json file contains the information necessary for Nutrient Web SDK to download and make use of the fonts included in the bundle when needed.

Do you want to create your own font bundle? Contact our Support team and we’ll be happy to help!