Options: textSpaces on split="text"

The textSpaces option determines how spaces will be treated on the text. When using split="text" you have the following options:

textSpaces="style" (default)

If you do not specify a textSpaces option, the default: textSpaces="style" is used. Spaces are encapsulated in a span and styled.

Example

ALTERNATING COLORED SEGMENTS on the magazine’s spine make WIRED recognizable on nearly any bookshelf.


var rules = {
    color: {
        values: ["#FB3126", "#15B5B4"],
        steps: true,
    },
    backgroundColor: {
        values: ["#15B5B4", "#FB3126"],
        steps: true,
    }

}

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

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

textSpaces="nostyle"

Spaces are encapsulated in a span but not styled. The space is counted when calculating styles.

Example

ALTERNATING COLORED SEGMENTS on the magazine’s spine make WIRED recognizable on nearly any bookshelf.

var opts2 = {
    textSpaces: "nostyle"
}

var wiredSpineNoStyledSpaces = new generativeText(rules, opts2);
wiredSpineNoStyledSpaces.applyToElementById("example2");
            

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

textSpaces="nostylenocount"

Spaces are encapsulated in a span but not styled. The space is not counted when calculating styles.

Example

ALTERNATING COLORED SEGMENTS on the magazine’s spine make WIRED recognizable on nearly any bookshelf.

var opts2b = {
    textSpaces: "nostylenocount"
}

var wiredSpineNoStyledNoCountSpaces = new generativeText(rules, opts2b);
wiredSpineNoStyledNoCountSpaces.applyToElementById("example2b");
            

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

textSpaces="nostyleorwrap"

Spaces are not encapsulated in a span. They are replaced with a   entity. The space is not counted when calculating styles.

Example

ALTERNATING COLORED SEGMENTS on the magazine’s spine make WIRED recognizable on nearly any bookshelf.

var opts3 = {
    textSpaces: "nostyleorwrap"
}

var wiredSpineNoStyledSpaces = new generativeText(rules, opts3);
wiredSpineNoStyledSpaces.applyToElementById("example3");
            

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

textSpaces="remove"

Spaces are removed.

Example

ALTERNATING COLORED SEGMENTS on the magazine’s spine make WIRED recognizable on nearly any bookshelf.

var opts4 = {
    textSpaces: "remove"
}

var wiredSpineRemovedSpaces = new generativeText(rules, opts4);
wiredSpineRemovedSpaces.applyToElementById("example4");
            

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