Options: split

The split option determines how the text on the element will be splitted.

The split option is not taken into consideration when using .applyToElementsSequentially().

split="text" (default)

If you do not specify an split option, the default: split="text" is used. When using split="text" the text of the element is splitted into each character and then a set of span elements are generated for each character. Linebreaks may happen anywhere within the text.

var rules = {
    color: {
        values: ["#111111", "#eeeeee"],
        steps: true,
    },
    backgroundColor: {
        values: ["#eeeeee", "#111111"],
        steps: true,
    }

}

var twoToneText = new generativeText(rules);
twoToneText.applyToElementById("example1");
            

#example1 span { width: 0.6em; text-align: center; }
            

split="wrapped"

When using split="wrapped" the text is also splitted into spans, however each word is wrapped in another span with white-space: nowrap; and class="gt-word". Because of this, linebreaks respect words.

var optsWrapped = {
    split: "wrapped"
}

var twoToneWrapped = new generativeText(rules, optsWrapped);
twoToneWrapped.applyToElementById("example2");
            

#example2 span.gt-word span { width: 0.6em; text-align: center; }
            

split="words"

When using split="words" the text is splitted into words rather than characters.

var optsWords = {
    split: "words"
}

var twoToneWords = new generativeText(rules, optsWords);
twoToneWords.applyToElementById("example3");
            

#example3 span { padding: 0.2em; text-align: center; }