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.

JS CSS



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.

JS CSS


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.

JS CSS


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.

JS CSS


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.

JS CSS


var opts4 = {
    textSpaces: "remove"
}

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


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