Annotations & Comments

DocRaptor supports PDF text annotations through Prince's custom CSS extensions. Text annotations allow you to create notes or text markup that display inside the PDF reader but do not appear in a website browser or the document's actual content.

We support five different types of annotations. The screenshots below are from macOS Preview; each PDF reader may implement the annotations differently.

Notes / Comments

Notes are clickable icons within the reader that expand to show the comment. By default, the annotation icon is a note, but that can be changed as well.

Note Icon

<style>
.annotation {
  -prince-pdf-annotation-title: attr(data-title);
  -prince-pdf-annotation-contents: attr(data-contents);
  -prince-pdf-annotation-type: text;
  -prince-pdf-annotation-icon: note;
}
</style>

<span 
  class="annotation"
  data-title="PDF Annotation Title"
  data-contents="This is a PDF annotation.">
  Annotation with a note icon.
</span>

Comment Icon

Same code as the above, except use comment for the -prince-pdf-annotation-icon property.

Key Icon

Same code as the above, except use key for the -prince-pdf-annotation-icon property.

Help Icon

Same code as the above, except use help for the -prince-pdf-annotation-icon property.

New-Paragraph Icon

Same code as the above, except use new-paragraph for the -prince-pdf-annotation-icon property.

Paragraph Icon

Same code as the above, except use paragraph for the -prince-pdf-annotation-icon property.

Insert Icon

Same code as the above, except use insert for the -prince-pdf-annotation-icon property.

Highlight

<style>
.annotation {
 -prince-pdf-annotation-type: highlight;
 }
</style>

Highlight <span class="annotation">annotation</span>.

Underline

<style>
.annotation {
 -prince-pdf-annotation-type: underline;
 }
</style>

Underline <span class="annotation">annotation</span>.

Wavy / Squiggly

<style>
.annotation {
 -prince-pdf-annotation-type: wavy;
 }
</style>

Wavy <span class="annotation">annotation</span>.

Line-Through / Strikeout

<style>
.annotation {
 -prince-pdf-annotation-type: line-through;
 }
</style>

Line-through <span class="annotation">annotation</span>.