Style Inheritance

Styles are composable, which means they can inherit properties from one another, which allows you to create partial styles and blend them on the fly to create new styles.

For example, let's say you have a style that just turns a font red, and another one that turns a font gold, and another that makes a font bigger. You could then write something such as:

<red>Red</red> <gold>Gold</gold> <big>Big</big>

That might then render some text like this:

Nesting Tags

The first way that you can inherit properties is to nest tags together like this:

This <gold>is</gold> some <big><red>big red</red></big>

Which creates this:

Because we wrapped <big> and <red> around the text "big red" it is both big and red.

Inheriting From Other Styles

Under the "Advanced" section of a style, there is an "Inherit From" field. In this field you can put a comma separated list of other styles you wish to inherit the properties from. So If we created a new style called "header" and "red, big, gold" into the "Inherit From" field like this:

And then we wrote some text like this:

<header>My Header</header>

Then we'd get this:

Now you might be wondering why is the text gold rather than red? That's because with inheritance, the last style in the list that references any given property wins for that property. So the text was red, then becomes bigger which doesn't interfere with the color, then red is overwritten by gold. 

Inheriting In Text Layers

Text Layers have a field called "Default Styles" under the "Text Formatting" section. This sets the default style for that text layer. However, just like in the style editor field called "Inherit From", you can put a list of styles you wish to use, it doesn't have to be just one.

Still need help? Contact Us Contact Us