DOM Output

The public contract of StringSplit is the rebuilt DOM tree. This page documents every wrapper, class, attribute, and CSS variable the module produces.

Generated Wrappers

Wrapper	Created when
`span.-s-line`	`line`, `word-line`, or `char-line` is present
`span.-s-word`	`word`, `word-line`, or `char-word` is present
`span.-s-char`	`char`, `char-line`, or `char-word` is present

Source Element

After splitting, the source element receives:

Output	Description
class `-splitted`	Marks that the element has been processed
`aria-label`	Original text content for accessibility
`string-split-original`	Cached original HTML (runtime-owned, do not modify)

If string-split-restore-after fires later:

Output	Description
class `-restored`	Marks that the original HTML was restored

CSS Variables On Wrappers

`.-s-line`

Variable	Always	Description
`--line-index`	yes	0-based line index
`--word-total`	yes	Number of words in this line
`--fit-font-size`	when `fit` + line split	Computed font size to fill container width
`--line-start`	when `line[start]`	Index from the beginning
`--line-center`	when `line[center]`	Distance from center
`--line-end`	when `line[end]`	Index from the end
`--line-random`	when `line[random()]`	Random value

`.-s-word`

Variable	Always	Description
`--word-index`	yes	Global 0-based word index
`--char-total`	yes	Number of chars in this word
`--word-start`	when `word[start]`	Global word index
`--wordLine-start`	when `word-line[start]`	Per-line word index
etc.		Other alignment combinations follow the same pattern

`.-s-char`

Variable	Always	Description
`--char-index`	yes	Global 0-based char index
`--kerning`	when needed	Kerning delta with the next character (also applied as `margin-right`)
`--char-start`	when `char[start]`	Global char index
`--charWord-start`	when `char-word[start]`	Per-word char index
`--charLine-center`	when `char-line[center]`	Per-line distance from center
etc.		Other alignment combinations follow the same pattern

Source Element Variables

Variable	When	Description
`--char-global-total`	char wrappers active	Total char count
`--word-global-total`	word wrappers active	Total word count
`--line-global-total`	line wrappers active	Total line count
`--fit-font-size`	`fit` without line split	Computed font size for the widest line
`--fit-scale-y`	`fit` without line split	Viewport height / text height ratio
`--fit-aspect-ratio`	`fit` without line split	Container width / text height ratio

Wrapper Attributes

Every generated wrapper (.-s-line, .-s-word, .-s-char) receives:

aria-hidden="true" — so screen readers skip individual wrappers
data-split-content — the text content of that wrapper

Nesting Order

When multiple wrapper levels are active, nesting follows this order:

TEXT

.-s-line
  └─ inline elements (em, strong, a, span...)
       └─ .-s-word
            └─ .-s-char

Inline HTML elements from the source (like <em> or <a>) are reconstructed between line and word wrappers. They keep their original tag and attributes so your CSS selectors continue to work.

Spaces And Line Breaks

Spaces and tabs are not wrapped in .-s-char spans
Inter-word spacing uses \u00a0 (non-breaking space) text nodes between words
When line wrappers are active, <br> is inserted between lines
Char-based animation only applies to visible characters, not spaces

Helper Classes

`-before-element`

Applied to a wrapper whose content sits immediately before an inline element like <img>.

`-after-element`

Applied to a wrapper whose content sits immediately after an inline element.

These classes appear on the relevant .-s-line, .-s-word, or .-s-char wrapper depending on which levels are active. Use them to adjust spacing or animation timing near embedded elements.

`split-class` Classes

When you use <split-class class="is-accent">...</split-class> in the source, those classes appear on the generated wrappers:

If every char in a word has the same split-class, the classes are hoisted to the .-s-word wrapper
Otherwise, they appear on individual .-s-char wrappers

Kerning

When char wrappers are active, the runtime measures kerning between adjacent characters. If a meaningful kerning delta is detected, it writes:

--kerning CSS variable
margin-right: var(--kerning) inline style

This preserves the visual tightness/looseness of the original typeface after splitting characters into individual spans.

Opaque Elements

Elements like <img>, <svg>, <video>, and <table> inside the source are inserted into the output as-is:

They do not get .-s-word or .-s-char wrappers
They do not receive index variables
They do occupy a slot in the word/char index sequence — the next word after an image will have an incremented index

See Inline HTML for the full list.

Base module page: StringSplit
Grammar: Split Grammar
Inline HTML: Inline HTML
Fit variables: Fit And Rebuild