Comments Sample

PDF comments are a new feature introduced in PDFreactor 7. This feature enables you to create certain PDF annotations from contents of your HTML document.

As this feature relies purely on the capabilities of the viewer to display comments, results may vary across different PDF viewers. Also, not every viewer may be able to display the full range of annotations.

What are the basic kinds of comments?

Notes

Notes are represented by small icons in the document and are usually displayed by clicking the icon. This is a note:

Markups

Markups modify the appearance of the text in some way. There are four different kinds of markups: highlight, underline, strikeout and squiggly. Please note that not all kinds of markup may be supported in your PDF viewer.

.markup-highlight {
    -ro-comment-style: highlight;
    -ro-comment-title: "Markup";
    -ro-comment-content: "I am highlighted.";
}

.markup-underline {
    -ro-comment-style: underline;
    -ro-comment-title: "Markup";
    -ro-comment-content: "I am underlined.";
}

.markup-strikeout {
    -ro-comment-style: strikeout;
    -ro-comment-title: "Markup";
    -ro-comment-content: "I am struck out.";
}

.markup-squiggly {
    -ro-comment-style: squiggly;
    -ro-comment-title: "Markup";
    -ro-comment-content: "I am underlined squiggly.";
}

Invisible Comments

Comments can also be turned invisible when setting the type to invisible. Contrary to markups and note, invisible comments are not visually present in the text content of the document. They are however displayed in the viewer's comment sidebar.

span.invisible-comment {
    -ro-comment-content: "I am an invisible comment and only visible in the sidebar";
    -ro-comment-style: invisible;
}

What are common use-cases?

In HTML documents shown in the browser or on websites, you sometimes have annotations like tooltips, comments or notes which give the user additional information.

Comments may also be interactive so that multiple users can add notes or other annotations to the text. Such interactivity can also be translated into PDF by using interactive PDF comments which can be edited by users and saved in the PDF file.

How do I create comments in PDFreactor?

Comments can be created from nearly any element of your document. The entire functionality of the comment can be customized by simply using CSS.

Creating a note

Notes are usually created from empty elements that have certain attributes containing the data for the comment. Let's assume your document structure looks like this:

<p>Hello, my name is Jimmy.<span class="note" data-content="Please use your full name"></span></p>

The span would normally not appear in the PDF since it is empty. However, you may not wish to loose the information stored in the attributes of the span. So you can convert it into a comment like this:

span.note {
    -ro-comment-content: ro-attr(data-content);
    -ro-comment-title: "Note";
    -ro-comment-style: note;
}

Creating a markup

Markups highlight sections of text in some way, so they are best created from elements that have some text content. Let's assume your document structure looks like this:

<p>
    The following information is
    <span class="note" data-author="john.smith@inbrew.com" title="Why is it important?">
        very important
    </span>
    !
</p>

span.comment {
    -ro-comment-content: ro-attr(title);
    -ro-comment-title: ro-attr(data-author);
    -ro-comment-style: underline;
}

Advanced Comments

In certain situations it is necessary that the comment consists of a start and an end element. In this case, these start and end elements have to be connected to let PDFreactor know that these belong to the same comment. If you have the following example:

<p>
    This comment <commentstart title="My comment" comment="I am an advanced comment." uid="c1"/> spans 
</p>
<p>
    multiple <commentend uid="c2"/> paragraphs.
</p>

To connect the start and end elements, you have to specify a identifier. This identifier is the value either the -ro-comment-start or the -ro-comment-end property which will define the element as either a start or end element, respectively. Should the identifier not be unique for the whole document (possibly different elements share the same identifier), you can optionally specify a type which will help to match start and end elements.

The following example connects the start and end elements via the "uid" attribute which these two elements share. It is possible that the value of the "uid" attribute is not unique for these elements, so an optional type "my-comment-type" is specified. Here is what the style sheet looks like:

commentstart {
    -ro-comment-content: ro-attr(comment);
    -ro-comment-title: ro-attr(title);
    -ro-comment-style: highlight;
    -ro-comment-start: ro-attr(uid) my-comment-type;
}

commentend {
    -ro-comment-end: ro-attr(uid) my-comment-type;
}

This comment spans

Multiple paragraphs.

How Can I Customize Comments?

Comments can also be customized in many ways. Besides of course the content and the title, you can also customize the following:

The Position

When using the comment style "note", the PDF viewer generates icons which can usually be clicked or hovered to show the comment. However, depending on the comment's location in the document, these icons may sometimes cover other text content which is often undesired.

In this case you can automatically move the note icons to either side of the page using the -ro-comment-position property.

I have a note icon but it covers some text.

The Color

By default, the color depends on the style of comment. The styles "underline" and "squiggly" are green, "strikeout" is red and "highlight" and "note" are yellow.

The color can be customized using the "-ro-comment-color" property. As a value, you can use all colors supported by PDFreactor as well as the keyword "currentColor". This keyword sets the color of the comment to the same value as the color of the text.

My comment color is "currentColor".

I have a cyan highlight.

The Date

When no date is specified, today's date will always be used. You can customize the date by using the -ro-comment-date property. However, you should also specify a date format via the -ro-comment-dateformat property. This defaults to the standard ISO 8601 date format which is "yyyy-MM-dd'T'HH:mm:ss". The syntax is similar to Java's SimpleDateFormat.

Understanding Comments