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, contact our Support team.

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

Change the color and the background color.
Adjust font family and font size.
Make it bold, italic, or underlined.

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 Nutrient:

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

Creating a rich text annotation

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

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

XHTML format and compatibility

When writing HTML for rich text annotations, you can apply the following:

No need to include the XML declaration (<?xml version="1.0"?>).
No need to include <!DOCTYPE> declarations.
No need to include <html> and <body> tags with namespaces.
Always wrap blocks of text with  or <div> for your content.
Use semantic tags like , , or  for basic formatting.
Use  with style attributes for more specific styling control.

The conversion to XHTML happens automatically, so you don’t need to worry about the complex XHTML structure in most cases. Instead, use the simplified format:

text: {
  format: "xhtml",
  value: "<p>Welcome to <b>Nutrient</b></p>"
}

Under the hood, it’ll be automatically converted to a fully compatible XHTML format that looks like this:

<?xml version="1.0"?>
<body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/" xfa:spec="2.0.2">
  <p style="font-size:18px;font-family:Helvetica">
    <span style="font-weight:normal;font-style:normal;text-decoration:none;color:#000000;background-color:transparent;font-size:18px;font-family:Helvetica;text-align:initial">
      Welcome to
    </span>
    <span style="font-weight:bold;font-style:italic;text-decoration:none;color:#000000;background-color:transparent;font-size:18px;font-family:Helvetica;text-align:initial">
      Nutrient
    </span>
  </p>
</body>

Text styling properties

When using the  tag, you can apply various styling properties using the style attribute. Below is a table with all the supported properties and their default values:

Property	Default value	Description	Example
`color`	`#000000`	Sets text color	`<span style="color: red">Colored text</span>`
`background-color`	`transparent`	Sets background text color	`<span style="background-color: yellow">Highlighted text</span>`
`font-family`	`Helvetica`	Sets font family	`<span style="font-family: Arial">Different font</span>`
`font-size`	`18px`	Sets font size	`<span style="font-size: 20px">Larger text</span>`
`font-weight`	`normal`	Controls text boldness	`<span style="font-weight: bold">Bold text</span>`
`font-style`	`normal`	Controls text italics	`<span style="font-style: italic">Italic text</span>`
`text-decoration`	`none`	Controls text underline	`<span style="text-decoration: underline">Underlined text</span>`

Supported HTML tags

Use the following tags in rich text annotations:

<html> — HTML document container
<body> — Body
 or  — Bold text
 or  — Italic text
 — Underline text
 — Use this tag for blocks of text and to add empty lines between paragraphs.
<div> — Can be used as an alternative to  for grouping content, though  is recommended for text blocks.
 — Use this tag to apply styling to inline text as shown in the table above.

Annotation-level text configuration

Some properties can only be applied to the annotation text as a whole, and not just to isolated parts of it, both for rich text and plain text annotations:

Horizontal alignment
Vertical alignment
Opacity

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!