The ‘badge’ annotation type places a circular badge with a single-character label in its center. The badge is an indicator used in conjunction with related text content. See the badge annotations in the following screenshot.
The ‘badge’ annotation type uses the annotation mask to place an invisible mask over the target element. UserDocs places the badge on the mask. The badge can be moved around the mask using CSS or the orientation fields. To create a badge annotation, pick ‘Badge’ from the annotation type field on the annotation subform.
The default CSS recommended by UserDocs will create a badge that scales with the font size. Examine the default CSS for inspiration.
- Label This is the label text inside the badge. The badge holds a single character. This character is the innerText of the
- Size The diameter of the badge, in pixels. Set the default width of your annotations using CSS and use this field to override it. This field will set the
2 * size.
- X Offset Specifies a positive, or negative x offset, in pixels. This field is used in conjunction with the x orientation field to calculate a total
leftadjustment in %. This adjustment is
- Y Offset Specifies a positive, or negative y offset, in pixels. This field is used in conjunction with the y orientation field to calculate a total
topadjustment in %. This adjustment is
- Font Size Specifies the font size in pixels. The badge will resize according to the font size.
- X Orientation Specifies a
leftproperty of 0% (left), 50% (middle), or 100% (right). Badges will use the CSS-defined
leftvalue if this field isn’t filled. If
leftis absent from CSS, the element will inherit behavior from its parent. In most cases, the badge will render in the top left corner of the target element.
- Y Orientation Specifies a
topproperty of 0% (top), 50% (middle), or 100% (bottom).
- Color Sets the background color of the badge. Can use hex or plain English colors. If it works in HTML, it works here.