Notation

Available as: Web ComponentShortcode

Annotate letters, words or whole sentences.

<spx-notation group> <p> I'm baby vice <span data-spx-notation="color: lightblue, type: highlight">keytar beard godard pitchfork stumptown</span> ugh meditation aesthetic shabby chic listicle meh. Leggings austin fanny pack readymade. Intelligentsia literally green juice pop-up glossier keffiyeh, actually portland enamel pin. </p> <p> Twee fam kogi swag banh mi before they sold out chillwave. <span data-spx-notation="color: red, type: box">8-bit sustainable stumptown</span> austin freegan, lyft godard vexillologist skateboard franzen shoreditch. Lo-fi cronut brooklyn put a bird on it gluten-free. </p> <p> Typewriter helvetica kombucha succulents. <span data-spx-notation="color: blue, type: underline">Brunch copper mug tote bag literally pok pok</span> succulents woke shaman wayfarers humblebrag pop-up. Mustache DIY health goth echo park lyft YOLO lomo. </p> </spx-notation>

I'm baby vice keytar beard godard pitchfork stumptown ugh meditation aesthetic shabby chic listicle meh. Leggings austin fanny pack readymade. Intelligentsia literally green juice pop-up glossier keffiyeh, actually portland enamel pin.

Twee fam kogi swag banh mi before they sold out chillwave. 8-bit sustainable stumptown austin freegan, lyft godard vexillologist skateboard franzen shoreditch. Lo-fi cronut brooklyn put a bird on it gluten-free.

Typewriter helvetica kombucha succulents. Brunch copper mug tote bag literally pok pok succulents woke shaman wayfarers humblebrag pop-up. Mustache DIY health goth echo park lyft YOLO lomo.

<p> I'm baby vice keytar beard godard pitchfork stumptown ugh meditation aesthetic shabby chic listicle meh. Leggings austin fanny pack readymade. Intelligentsia literally green juice pop-up glossier keffiyeh, actually portland enamel pin. </p> <p> <spx-notation color="#ff0000" type="box" multiline="false"> Twee fam kogi swag banh mi before they sold out chillwave. 8-bit sustainable stumptown austin freegan, lyft godard vexillologist skateboard franzen shoreditch. Lo-fi cronut brooklyn put a bird on it gluten-free. </spx-notation> </p> <p> Typewriter helvetica kombucha succulents. Brunch copper mug tote bag literally pok pok succulents woke shaman wayfarers humblebrag pop-up. Mustache DIY health goth echo park lyft YOLO lomo. </p>

I'm baby vice keytar beard godard pitchfork stumptown ugh meditation aesthetic shabby chic listicle meh. Leggings austin fanny pack readymade. Intelligentsia literally green juice pop-up glossier keffiyeh, actually portland enamel pin.

Twee fam kogi swag banh mi before they sold out chillwave. 8-bit sustainable stumptown austin freegan, lyft godard vexillologist skateboard franzen shoreditch. Lo-fi cronut brooklyn put a bird on it gluten-free.

Typewriter helvetica kombucha succulents. Brunch copper mug tote bag literally pok pok succulents woke shaman wayfarers humblebrag pop-up. Mustache DIY health goth echo park lyft YOLO lomo.

Properties

animation

Type: booleanDefault: true

Turn animation on or off when animation.

animation-duration

Type: numberDefault: 800

Animation duration.

autoplay

Type: booleanDefault: true

Autoplay.

brackets

Type: stringDefault: left, right

Brackets.

color

Type: stringDefault: var(--spx-color-gray-100)

delay

Type: number

group

Type: boolean

Create a group on annotations by applying a "data-spx-annotation" to elements within.

iterations

Type: numberDefault: 1

Number of iterations.

multiline

Type: booleanDefault: true

Annotate multiline text.

padding

Type: number

Padding around notations.

stroke-width

Type: numberDefault: 1

Stroke width.

type

Type: stringDefault: underlineChoices: underline, box, circle, highlight, strike-through, crossed-off, bracket

Type of notation.

Slots

inner

Slot (between HTML tag).

Events

spxNotationDidLoad

Fires after component has loaded.

Methods

clear

Remove the annotation.

hide

Hides the annotation. (non animated)

redraw

Redraw the animation.

show

Draws the annotation.