Options: textSpaces on split="wrapped"

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 that is itself encapsulated in another span with class="gt-word" (so that they can be styled by outside CSS rules) 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.gt-word span { width: 1.5em; text-align: center; margin-bottom: 0.2em;  }

textSpaces="nostyle"

Spaces are encapsulated in a double 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.gt-word span { width: 1.5em; text-align: center; margin-bottom: 0.2em;  }

textSpaces="nostylenocount"

Spaces are encapsulated in a double 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 = {
    split: "wrapped",
    textSpaces: "nostylenocount"
}

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


#example2b span.gt-word span { width: 1.5em; text-align: center; margin-bottom: 0.2em;  }

textSpaces="nostyleorwrap"

Spaces are not encapsulated in any 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.gt-word span { width: 1.5em; text-align: center; margin-bottom: 0.2em;  }

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.gt-word span { width: 1.5em; text-align: center; margin-bottom: 0.2em;  }