Fixed and List Values

Fixed Values

All rules may take fixed values. A fixed value is just a string with the value you would apply to the CSS directive if you were writing the CSS by hand. As when writing CSS by hand, if you supply an string with an invalid value it will not work. It's your responsibility to provide correct values.

Note: Fixed values are very useful when dealing with compound rules (which we'll see later). For general rules (like the following example) it's always better to use a general CSS rule targeting the spans on the element than using fixed rules.

Example

On the following example we are using a fixed value on the border-bottom-style and border-bottom-color, while generating the border-bottom-width.

You Should Not Do This
JS

var rules = {
    borderBottomColor: "#303030",
    borderBottomStyle: "solid",
    borderBottomWidth: {
        min: 1,
        max: 21,
        steps: true
    }
}
var growingBorderBottom = new generativeText(rules);
growingBorderBottom.applyToElementById("example1");

List Values

All rules may take List values. A List value is just an array of strings with values to be applied to the CSS directive. generativeText will randomly pick the value from the list.

Example

Cthulu says DON'T parse HTML with Regexes
JS CSS

var rules2 = {
    textDecoration: { values:["line-through", "overline", "underline"] },
}
var cthulu = new generativeText(rules2);
cthulu.applyToElementById("example2");
            

#example2 span { font-family: 'Bitter'; text-shadow: 2px 3px 4px #808080; }

List Values with steps

If you add the steps option the value will be picked sequentially from the beginning of the array of values. When the end of the array is reached, the count will restart from the first element. This can be used to alternate between 2 (or more) values.

Example

Don't mistake legibility with communication.
JS CSS

var rules3 = {
    transformRotateY: {
        values:["0", "180"],
        steps: true,
    },
}
var opts3 = {
    split: "wrapped"
}
var rotated = new generativeText(rules3, opts3);
rotated.applyToElementById("example3");
            

#example3 { font-family: 'Playfair Display'; }

List Values with stepFunctions

A stepFunction is a function that is applied on each step of the process. When using Lists an stepFunction must return the index of the value on the list. An stepFunction on a List value will have access the the following variables: 


    this.totalSteps //Contains the total number of steps
    this.currentStep //Contains the current step
    this.valuesLength //The lenght of the list of values

Example

The schizo-text comically blurs the line of demarcation between fictive and nonfictive text in order to live out the madness that our various philosophical systems would ascribe to our daily lives.
JS CSS


var rules4 = {
    textTransform: {
        values:["lowercase", "uppercase"],
        stepFunction: function() {
            if(this.currentStep == 1 || (this.currentStep % 5 == 0) ||
            (this.currentStep % 7 == 0) || (this.currentStep % 11 == 0) ) {

                return 1;
            }
            return 0;
        },
    },
}
var schizo = new generativeText(rules4);
schizo.applyToElementById("example4");
            

#example4 { font-family: 'Lora'; }

Rules that may take only Fixed or List Values

All Rules may take Fixed o List values, however there are some rules that can only take Fixed or List values. This is the list: