Split Grammar

StringSplit is configured through one attribute: string-split (also accepted as data-string-split). The parser is strict — it does not try to guess intent.

Attribute Format

TEXT

token[params]|token[params]|...

tokens are separated by |
each token has an optional [params] block
parameters inside [] are separated by ;
empty parts and extra whitespace are ignored

Tokens

Each token enables one level of wrappers and/or CSS variables.

Token	Wrappers created	What it does
`line`	`.-s-line`	Wraps each visual line
`word`	`.-s-word`	Wraps each word, global ordering
`word-line`	`.-s-line` + `.-s-word`	Wraps words with per-line ordering
`char`	`.-s-char`	Wraps each character, global ordering
`char-line`	`.-s-line` + `.-s-char`	Wraps characters with per-line ordering
`char-word`	`.-s-word` + `.-s-char`	Wraps characters with per-word ordering
`fit`	none	Scales text to fill container width

A wrapper is created when any token that implies it is present:

.-s-line appears when line, word-line, or char-line is used
.-s-word appears when word, word-line, or char-word is used
.-s-char appears when char, char-line, or char-word is used

Alignment Parameters

Each token (except fit) accepts an alignment parameter inside []:

Parameter	Produces variable	Value
`start`	`--{token}-start`	Index from the beginning (0, 1, 2...)
`center`	`--{token}-center`	Distance from the center
`end`	`--{token}-end`	Index from the end
`random(min,max)`	`--{token}-random`	Random integer in `[min, max]`

If no parameter is given, the default is start.

Variable naming

The CSS variable name combines the token's internal key with the alignment:

Attribute	Variable
`line[center]`	`--line-center`
`word-line[start]`	`--wordLine-start`
`char-word[end]`	`--charWord-end`
`char[random(0,10)]`	`--char-random`

What the values mean

Alignment	Formula
`start`	Item's 0-based index
`end`	`total - index - 1`
`center`	Distance from the center index
`random(min,max)`	Random integer in the inclusive range

The scope of total depends on the token:

Token	Total is...
`line`	total lines
`word`	total words across all lines
`word-line`	words in the current line
`char`	total chars across all lines
`char-word`	chars in the current word
`char-line`	chars in the current line

Combining Tokens

Use | to combine multiple levels in one attribute:

HTML

<!-- line + word + char ordering -->
string-split="line[center]|word-line[start]|char-word[end]"

This creates all three wrapper levels, each with its own alignment variable.

`fit`

fit is a standalone token with no parameters:

HTML

string-split="line[start]|fit"

See Fit And Rebuild for details.

Common Patterns

Goal	Attribute
Reveal chars inside each word	`word[start]\|char-word[start]`
Stagger lines then chars per line	`line[start]\|char-line[start]`
Fit text to width with line animation	`line[start]\|fit`
Word wrappers only (no char split)	`word[start]`
Full three-level control	`line[center]\|word-line[start]\|char-word[end]`

Edge Cases

Leading or trailing | is ignored
Whitespace around tokens is trimmed
A token with empty [] defaults to start
Unrecognized token names are skipped with a console warning
The parser accepts abs as a flag inside [], but it has no public effect in the current runtime

Base module page: StringSplit
DOM output: DOM Output
Inline HTML: Inline HTML
Fit behavior: Fit And Rebuild