简体中文
EnglishWhat annotation styles does RoughNotation support?
Updated
RoughNotation supports seven annotation styles: underline, box, circle, highlight, strike-through, crossed-off, and brackets. Each one draws a hand-drawn-looking mark around or over an element, and you pick the style by name when you create the annotation. The library also handles inline content that spans multiple lines, so a single annotation can wrap across a paragraph rather than breaking at the first line.
The seven styles
| Style | What it draws | Typical use |
|---|---|---|
| Underline | A sketchy underline below an element | Emphasize a word or phrase |
| Box | A box around the element | Call out a block or card |
| Circle | A circle around the element | Draw attention to a short label or number |
| Highlight | A highlighter-pen effect over the element | Mark text like you would with a marker |
| Strike-Through | A hand-drawn line through the element | Show something is removed or no longer valid |
| Crossed-Off | A crossed-out effect over the element | Signal rejection or "not this one" |
| Brackets | A hand-drawn bracket on one or more sides of a block | Group or set off a paragraph-sized block |
Underline
Draws a sketchy line beneath the element. This is the lightest-weight option and works well when you want emphasis without covering the content.
Box
Draws a box around the element. Use it when the thing you're marking is a self-contained block, like a card or a button.
Circle
Draws a circle around the element. It reads best on short, compact targets — a single word, a number, or a small badge — because the circle has to enclose the whole element.
Highlight
Creates a highlight effect as if marked by a highlighter. Unlike underline, this sits over the content, so it changes how the text reads. It's the closest match when you want the "I marked this in a book" look.
Strike-Through
Draws a hand-drawn line through the element, creating a strike-through effect. The natural fit is anything you want to present as cancelled or superseded.
Crossed-Off
Applies a crossed-off effect to the element to symbolize rejection. It's visually stronger than strike-through and reads as a deliberate "no" rather than a simple edit.
Brackets
Creates a hand-drawn bracket around a block — such as a paragraph of text — on one or multiple sides. This is the style to reach for when the annotation should frame a larger region instead of pointing at a single word.
Annotating content across multiple lines
RoughNotation can annotate inline content that spans multiple lines. That matters for underline, highlight, and strike-through in particular, since those are the styles you'd normally apply to a run of text that may wrap. Instead of the mark stopping at the end of the first line, the annotation follows the inline content across the line breaks.
Styling and animation are separate from the style choice
Picking a style is independent of how it looks and behaves. The annotation's appearance can be configured through properties such as color, strokeWidth, and animation duration. Animation is optional too — if you don't animate it, the annotation simply shows up when show is called.
If you want several annotations to appear in a specific sequence, RoughNotation lets you order them by creating an annotation group: you pass the list of annotations into the group, and when show is called on the group, the annotations animate in order.
All the code and documentation is available on GitHub, and the project can be reached on Twitter at @preetster.