Project-wide Variables

MadCap Flare includes its own styles and properties³ to format the look of single-source authoring elements within the development environment at design time. Some of these built-in styles also apply to the generated output. Such is the case of the MadCap|variable selector, so it does not require supporting tags.

For this reason, Debug.css includes the said MadCap|variable selector and a declaration which will display variables in dark green:

    MadCap|variable {
        color: darkgreen;
    }

The resulting output will look like this:

This is a variable as rendered in the output

To further highlight the variables and make them searchable in the output, the following pseudo-class selectors enclose each variable in orange square brackets:

        MadCap|variable::before {
            content: "[";
            color: orange;
        }

        MadCap|variable::after {
            content: "]";
            color: orange;
        }

These settings will show variables as follows:

This is a [variable] as rendered in the output

Among other advantages, this bracket enclosing approach is especially useful in case two or more variables are placed side-by-side. For example, a string such as

This is a double variable as rendered in the output

may actually include two adjacent variables:

This is a [double] [variable] as rendered in the output

In translated versions, text inversion might require swapping the order of the variables in the target language:

Esto es una [variable] [doble] según aparece en el resultado