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="blue" type="box"> 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: 800CSS variable: --spx-notation-animation-duration

Animation duration.

autoplay

Type: booleanDefault: true

Autoplay.

brackets

Type: stringDefault: 'left, right'

Brackets.

color

Type: stringDefault: 'var(--spx-color-gray-100)'CSS variable: --spx-notation-color

Component color property.

delay

Type: number

display

Type: stringDefault: 'inline-block'CSS variable: --spx-notation-display

Component display property.

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: numberCSS variable: --spx-notation-padding

Padding around notations.

stroke-width

Type: numberDefault: 1

Stroke width.

type

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

Type of notation.

Events

spxNotationDidLoad

Fires after component has loaded.

Methods

clear

Remove the annotation.

hide

Hides the annotation. (non animated)

reload

Reload component.

show

Draws the annotation.